欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS代碼優(yōu)化技巧之通俗版(減少js體積)

 更新時間:2011年12月23日 12:02:15   作者:  
如果你問我網(wǎng)站中最影響網(wǎng)站打開速度的是什么?我會告訴是網(wǎng)站中的javascript,簡稱JS。模板中引用的JS文件越多,打開速度越慢,這點我深有體會,不信你看看盧松松博客首頁,使勁優(yōu)化后依然有100K的文件
細(xì)讀完這篇文章,夠你優(yōu)化大半天的了,關(guān)于JS優(yōu)化方法大都脫離不了這三種方法。

JS代碼優(yōu)化技巧之通俗版

(網(wǎng)頁總大小為155.k,而JS就占了100.3K)

是時候優(yōu)化下JS了

關(guān)于JS優(yōu)化的文章已經(jīng)很多了,大多技術(shù)性很強,像什么變量、字符串、類型,就不做介紹了,也不需要介紹,我也不懂,你知道了也沒用。大多數(shù)站長都是“拿來主義”,我只需要告訴JS怎么放,刪那里就可以了。

現(xiàn)在的網(wǎng)站都加的有統(tǒng)計代碼、分享工具、評論列表、相關(guān)文章插件等工具,而要實現(xiàn)強大的功能,必須使用JS文件,正是這些JS插件,再增強了網(wǎng)站功能的同時,也給影響了網(wǎng)站速度。

最常用的JS優(yōu)化辦法

通過博客調(diào)用JS來看,目前最影響速度的為無覓插件(952ms),拿福能廣告(434ms)。如果確實要用可以保留,適當(dāng)?shù)母鶕?jù)官方教材做做優(yōu)化,下面盧松松介紹幾個最常用的JS優(yōu)化方法。

方法一:把不重要的JS放在頁面最底部

這是最簡單,也是效果最好的優(yōu)化方法,把不重要的JS通通放到頁面的最下面body的上面,實現(xiàn)異步加載,也就是等網(wǎng)頁都加載完了,最后在加載這些不重要的JS,這樣就不影響網(wǎng)頁速度了。

如低調(diào)與華麗模板中公共的util.js公共文件,默認(rèn)效果為,瀏覽網(wǎng)頁時會在網(wǎng)頁中出現(xiàn)“回頂部、寫評論”特效?,F(xiàn)在把wumii(無覓插件JS)和jiathis(分享工具JS)統(tǒng)一整合到util.js文件中了。

JS代碼優(yōu)化技巧之通俗版

(不重要的JS都放到頁面最底部了)

當(dāng)然,其他網(wǎng)站也需要這樣做:把不重要的JS通通放到頁面最底部。

方法二:合并JS文件

合并JS,也就是減少HTTP請求,少給服務(wù)器請求一次就加快一點速度,而合并兩個原本獨立的JS就需要點技術(shù)了,但這難不倒我們,告訴大家一個最簡單的方法:

不管三七二十一,先把A文件直接粘貼到B文件中,合并后刪除網(wǎng)頁中的A文件,如果網(wǎng)頁運行正常,就OK;如果一些特效失效,那就還原,換C文件合并??倳袃蓚€不沖突的JS文件的。

例如我博客上的百度廣告管家,有6個廣告位,默認(rèn)情況是要進行6次HTTP請求的,因為是第三方JS,一次請求最快要花234ms,而6次請求就就需要花2秒,也就是說因為這個廣告管家打開網(wǎng)頁就要額外增加2秒。

JS代碼優(yōu)化技巧之通俗版

(第二段JS就是把6個請求變成了1個)

按照官方教程把JS合并后,6個廣告位的廣告請求合并為1次請求,大幅降低js請求次數(shù),有效減少頁面渲染被阻塞的情況,提升廣告加載速度。

方法三:給JS文件減肥

咱不討論什么三目運算符、減少對象查找、如何讓JS簡潔,咱就用“JS減肥工具”。通常這類工具會把JS文件中幾百行的代碼壓縮成一行,使體積變小。推薦工具:http://javascriptcompressor.com/軟件版本(容錯效果好)

因為空行等問題,有時候使用這類工具會使JS功能失效,而最簡單的辦法是用Dreamweaver,把壓縮后的JS放入DW中,DW會自動提示你那里有誤,把錯誤的地方另起一行,或還原回去即可。

最后再給個網(wǎng)友的現(xiàn)身說法吧:

JS代碼優(yōu)化技巧之通俗版

當(dāng)你的站點隨著時間的推移慢慢地做大的時候,你就會發(fā)現(xiàn)很多問題出來的,其中一個就是越來越臃腫龐大,因此運行的速度也就會慢了下來。優(yōu)化,盡力去優(yōu)化站點,就變得非常重要了。

這些方法都通俗易懂,希望對大家有用!

相關(guān)文章

  • javascript中的self和this用法小結(jié)

    javascript中的self和this用法小結(jié)

    本篇文章主要是對javascript中的self和this用法進行了詳細(xì)的總結(jié)介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2014-02-02
  • JavaScript中輸出信息的方法(信息確認(rèn)框-提示輸入框-文檔流輸出)

    JavaScript中輸出信息的方法(信息確認(rèn)框-提示輸入框-文檔流輸出)

    這篇文章主要介紹了JavaScript中輸出信息的方法(信息確認(rèn)框-提示輸入框-文檔流輸出)的相關(guān)資料,需要的朋友可以參考下
    2016-06-06
  • JavaScript實現(xiàn)網(wǎng)絡(luò)測速的方法詳解

    JavaScript實現(xiàn)網(wǎng)絡(luò)測速的方法詳解

    在我們的日常生活中離不開網(wǎng)絡(luò),而網(wǎng)絡(luò)的快慢直接決定了用戶的產(chǎn)品使用體驗。本文就來帶大家了解如何用JavaScript實現(xiàn)網(wǎng)絡(luò)測速,需要的可以參考一下
    2023-01-01
  • javascript操作select參考代碼

    javascript操作select參考代碼

    用js控制select的方法,大家可以參考下
    2008-06-06
  • 詳解 javascript對象創(chuàng)建模式

    詳解 javascript對象創(chuàng)建模式

    這篇文章主要介紹了詳解 javascript對象創(chuàng)建模式的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)JavaScript的相關(guān)知識。感興趣的朋友可以了解下
    2020-10-10
  • 使用Xcache緩存器加速PHP網(wǎng)站的配置方法

    使用Xcache緩存器加速PHP網(wǎng)站的配置方法

    由于國內(nèi)網(wǎng)站備案比較麻煩,所以筆者便把網(wǎng)站放到了香港。雖然網(wǎng)站免去了備案的困擾,但是從訪問速度上來看,一般要比放于國內(nèi)的網(wǎng)站慢2-3倍,所以便想辦法對網(wǎng)站做了一些簡單的優(yōu)化,比如使用緩存系統(tǒng)來提升網(wǎng)站頁面訪問速度
    2017-04-04
  • JAVASCRIPT keycode總結(jié)

    JAVASCRIPT keycode總結(jié)

    JAVASCRIPT中keycode總結(jié),方便需要控制keycode的朋友
    2009-02-02
  • 淺析Ajax語法

    淺析Ajax語法

    本文主要介紹了原生JS中Ajax的實現(xiàn)原理,XMLHttpRequest及promise的概念和流程。需要的朋友可以看下
    2016-12-12
  • JavaScript中子對象訪問父對象的方式詳解

    JavaScript中子對象訪問父對象的方式詳解

    js中雖然沒有傳統(tǒng)面向?qū)ο蟮木幊陶Z言里子類訪問父類的特殊語法,但是我們可以根據(jù)需要造一個,接下來本文給大家分享在JavaScript中子對象訪問父對象的方式,需要的朋友可以參考下
    2016-09-09
  • 輸入框點擊時邊框變色效果的實現(xiàn)方法

    輸入框點擊時邊框變色效果的實現(xiàn)方法

    下面小編就為大家?guī)硪黄斎肟螯c擊時邊框變色效果的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,祝大家游戲愉快哦
    2016-12-12

最新評論