提高網站性能之 —— 如何對待JavaScript

<DIV id=app-share-content>

在一個頁面中，每一個外部JavaScript 及CSS文件都會導致一個額外的HTTP請求。所以，如何合理的合并JavaScript 文件及CSS文件也是前端工程師應該考慮的。

尤其是JavaScript 文件，在下載它時，并行下載實際上是被禁用的，并且還會阻塞頁面的呈現！

關于JavaScript 的下載

在下載JavaScript 腳本文件時，瀏覽器不會并行啟動其它下載，而是讓JavaScript 腳本文件單獨下載完畢后，再繼續其它請求。這將對頁面的整體性能是一個很大的問題，解決方案如下：

解決方案1：將JavaScript 腳本內聯在頁面中，即直接將JavaScript 腳本寫在HTML標簽中。

                         優點：速度最快。在大型網站的首頁中，可以合理的將JavaScript 腳本的一部分直接內聯在HTML標簽中。

                         缺點：JavaScript 腳本不被單獨緩存，其它頁面不能共享該JavaScript 腳本（不能重用）。

解決方案2：將JavaScript 腳本標簽的鏈接（link）放在HTML文件標簽的底部。

                         要求：腳本中不包含document.write() 方法改寫頁面。

解決方案3：使用延遲(Defferred) 腳本。即在link標簽中添加defer 屬性表明JS腳本中不包含document.write() 方法。

                         缺陷：在Firefox 中使用延遲(Defferred ) 腳本后，JavaScript 腳本還是會阻塞呈現、阻塞并行下載。

                                        而在IE中，效果也不明顯。

                         總結：如果一個腳本可以使用延遲(Defferred ) 腳本技術，那么它一定可以移到頁面的底部！

                                        即“解決方案3”完全可以用“解決方案2”替代。

解決方案4：使用加載后下載。即JavaScript 腳本在頁面加載完畢后，通過onload 事件動態下載。(CSS也通用 )

                         優點：既不阻塞HTML頁面的呈現，又能實現JavaScript 腳本的重用（腳本將被緩存在瀏覽器中）。

                         缺點：產生額外的JavaScript 代碼用于實現該功能，增加了程序復雜度。

                         問題：可能加載兩次（內聯一次，外部加載一次）。

                                       可以使用IFrame嵌套一個頁面并加載JavaScript 腳本來解決。

                       示例：http://stevesouders.com/hpws/post-onload.php

解決方案5：動態內聯。根據cookie做指示器，用代碼進行判斷，實現將外部JS內聯到頁面當中。

                           動態內聯是對“加載后下載”的進一步完善。也再次增加了程序復雜度。

雖然JavaScript 腳本推薦放在頁面底部，但CSS樣式表則應該放在頁面的頂部！

關于JavaScript 的精簡

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

精簡工具：JSMin    http://crockford.com/javascript/jsmin
JSMin 用于去除javascript 文件中所有不必要的字符、注釋、空白。

cmd 使用方法：C:\Documents and Settings\xugang>jsmin <openWin.js> js_rerurn.js

      1. 先指定到 jsmin.exe 文件夾
      2. openWin.js為源文件
      3. js_rerurn.js為目標文件

精簡工具：ShrinkSafe（ 原名：Dojo Compressor ）   http://dojotoolkit.org/docs/shrinksafe

ShrinkSafe 用于移除javascript 文件中的空白，同時還通過替換的方式縮短了變量名。

cmd 使用方法：java -jar shrinksafe.jar infile.js > outfile.js
     shrinksafe.jar是工具名
     infile.js為源文件
     outfile.js為目標文件

注意：在控制臺運行時，要保證shrinksafe.jar和js.jar是在同一個目錄，并且輸入的JS源文件和輸出的JS目標文件也會在同一個目錄。（默認在C盤根目錄）

一般可以對你的JavaScrip文件同時使用JSMin 和 ShrinkSafe 這兩個工具進行精簡。

壓縮組件

同時，不要忘記通過HTTP的頭部聲明，壓縮腳本、樣式表和HTML文檔來減少響應時間。

瀏覽器客戶端的請求： Accept-Encoding: gzip, deflate

Web服務器端的響應：Content-Encoding: gzip

gzip是目前流行和理想有效壓縮方法，deflate效果略遜且不太流行。