快捷導(dǎo)航

提高網(wǎng)站性能之如何對(duì)待JavaScript

更新時(shí)間：2009年10月31日 23:26:49 作者：

在一個(gè)頁(yè)面中，每一個(gè)外部JavaScript 及CSS文件都會(huì)導(dǎo)致一個(gè)額外的HTTP請(qǐng)求。所以，如何合理的合并JavaScript 文件及CSS文件也是前端工程師應(yīng)該考慮的。

尤其是JavaScript 文件，在下載它時(shí)，并行下載實(shí)際上是被禁用的，并且還會(huì)阻塞頁(yè)面的呈現(xiàn)！

關(guān)于JavaScript 的下載

在下載JavaScript 腳本文件時(shí)，瀏覽器不會(huì)并行啟動(dòng)其它下載，而是讓JavaScript 腳本文件單獨(dú)下載完畢后，再繼續(xù)其它請(qǐng)求。這將對(duì)頁(yè)面的整體性能是一個(gè)很大的問(wèn)題，解決方案如下：

解決方案1：將JavaScript 腳本內(nèi)聯(lián)在頁(yè)面中，即直接將JavaScript 腳本寫在HTML標(biāo)簽中。
優(yōu)點(diǎn)：速度最快。在大型網(wǎng)站的首頁(yè)中，可以合理的將JavaScript 腳本的一部分直接內(nèi)聯(lián)在HTML標(biāo)簽中。
缺點(diǎn)：JavaScript 腳本不被單獨(dú)緩存，其它頁(yè)面不能共享該JavaScript 腳本（不能重用）。

解決方案2：將JavaScript 腳本標(biāo)簽的鏈接（link）放在HTML文件標(biāo)簽的底部。
要求：腳本中不包含document.write() 方法改寫頁(yè)面。

解決方案3：使用延遲(Defferred) 腳本。即在link標(biāo)簽中添加defer 屬性表明JS腳本中不包含document.write() 方法。
缺陷：在Firefox 中使用延遲(Defferred ) 腳本后，JavaScript 腳本還是會(huì)阻塞呈現(xiàn)、阻塞并行下載。
而在IE中，效果也不明顯。

總結(jié)：如果一個(gè)腳本可以使用延遲(Defferred ) 腳本技術(shù)，那么它一定可以移到頁(yè)面的底部！
即“解決方案3”完全可以用“解決方案2”替代。

解決方案4：使用加載后下載。即JavaScript 腳本在頁(yè)面加載完畢后，通過(guò)onload 事件動(dòng)態(tài)下載。(CSS也通用 )
優(yōu)點(diǎn)：既不阻塞HTML頁(yè)面的呈現(xiàn)，又能實(shí)現(xiàn)JavaScript 腳本的重用（腳本將被緩存在瀏覽器中）。
缺點(diǎn)：產(chǎn)生額外的JavaScript 代碼用于實(shí)現(xiàn)該功能，增加了程序復(fù)雜度。
問(wèn)題：可能加載兩次（內(nèi)聯(lián)一次，外部加載一次）。

可以使用IFrame嵌套一個(gè)頁(yè)面并加載JavaScript 腳本來(lái)解決。
示例：http://stevesouders.com/hpws/post-onload.php

解決方案5：動(dòng)態(tài)內(nèi)聯(lián)。根據(jù)cookie做指示器，用代碼進(jìn)行判斷，實(shí)現(xiàn)將外部JS內(nèi)聯(lián)到頁(yè)面當(dāng)中。
動(dòng)態(tài)內(nèi)聯(lián)是對(duì)“加載后下載”的進(jìn)一步完善。也再次增加了程序復(fù)雜度。
雖然JavaScript 腳本推薦放在頁(yè)面底部，但CSS樣式表則應(yīng)該放在頁(yè)面的頂部！

關(guān)于JavaScript 的精簡(jiǎn)

精簡(jiǎn)（Minification）是從代碼中移除不必要的字符、注釋、空白以減小JavaScript 代碼的大小，進(jìn)而改善JavaScript的下載長(zhǎng)度和加載速度。

精簡(jiǎn)工具：JSMin JS Minifier js壓縮
JSMin 用于去除javascript 文件中所有不必要的字符、注釋、空白。

cmd 使用方法：C:\Documents and Settings\xugang>jsmin <openWin.js> js_rerurn.js
1. 先指定到 jsmin.exe 文件夾
2. openWin.js為源文件
3. js_rerurn.js為目標(biāo)文件

精簡(jiǎn)工具：ShrinkSafe（原名：Dojo Compressor ） http://dojotoolkit.org/docs/shrinksafe
ShrinkSafe 用于移除javascript 文件中的空白，同時(shí)還通過(guò)替換的方式縮短了變量名。
cmd 使用方法：java -jar shrinksafe.jar infile.js > outfile.js
shrinksafe.jar是工具名
infile.js為源文件
outfile.js為目標(biāo)文件

注意：在控制臺(tái)運(yùn)行時(shí)，要保證shrinksafe.jar和js.jar是在同一個(gè)目錄，并且輸入的JS源文件和輸出的JS目標(biāo)文件也會(huì)在同一個(gè)目錄。（默認(rèn)在C盤根目錄）

一般可以對(duì)你的JavaScrip文件同時(shí)使用JSMin 和 ShrinkSafe 這兩個(gè)工具進(jìn)行精簡(jiǎn)。
壓縮組件

同時(shí)，不要忘記通過(guò)HTTP的頭部聲明，壓縮腳本、樣式表和HTML文檔來(lái)減少響應(yīng)時(shí)間。
瀏覽器客戶端的請(qǐng)求： Accept-Encoding: gzip, deflate
Web服務(wù)器端的響應(yīng)：Content-Encoding: gzip
gzip是目前流行和理想有效壓縮方法，deflate效果略遜且不太流行。