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

來源:互聯網
上載者:User

在一個頁面中,每一個外部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效果略遜且不太流行。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.