js效能最佳化 如何更快速地載入你的JavaScript頁面
- 高洛峰原創
- 2017-02-04 13:16:50915瀏覽
確保程式碼盡量簡潔
不要什麼都依賴JavaScript。不要編寫重複性的腳本。要把JavaScript當作糖果工具，只是起到美化作用。別為你的網站增加大量的JavaScript程式碼。只有必要的時候可以用一下。只有確實能改善使用者體驗的時候用一下。
盡量減少DOM存取
使用JavaScript存取DOM元素很容易，程式碼更容易閱讀，但是速度很慢。以下介紹幾個重點：限制使用JavaScript來修飾網頁佈局，並將針對存取元素的參考快取起來。有時，當你的網站依賴大量的DOM改動時，就應該考慮限制你的標記。這是改用HTML5、捨棄那些原來的XHTML和HTML4的充分理由。你可以查看DOM元素的數量，只要在Firebug插件的控制台中輸入：document.getElementsByTagName('*').length。
壓縮程式碼
要提供經過壓縮的JavaScript頁面，最有效的辦法就是先用JavaScript壓縮工具對你的程式碼壓縮一下，這種壓縮工具可以壓縮變數和參數名稱，然後提供因而獲得的程式碼，使用了gzip壓縮。
是的，我沒有壓縮我的main.js，但你要檢查有沒有未經壓縮的任何jQuery插件，別忘了壓縮。下面我列出了壓縮方面的幾個方案。
◆ YUI壓縮工具(jQuery開發團隊就使用它)，初學者指南
(http://www.slideshare.net/nzakas/extreme-JavaScript-compression-with-yui-compressor)、第二指南( http://vilimpoc.org/research/js-speedup/)和官方網站(http://developer.yahoo.com/yui/compressor/)。
◆ Dean Edwards Packer(http://dean.edwards.name/packer/)
◆ JSMin(http://crockford.com/JavaScript/jsmin)
GZip，其在背後的想法是縮短瀏覽器和伺服器之間傳送資料的時間。縮短時間後，你得到標題是Accept-Encoding: gzip,deflate的一個檔案。不過這種壓縮方法有一些缺點。它在伺服器端和客戶端都要佔用處理器資源(以便壓縮和解壓縮)，還要佔用磁碟空間。
避免eval()：雖然有時eval()會在時間方面帶來一些效率，但使用它絕對是錯誤的做法。 eval()導致你的程式碼看起來更髒，而且會逃過大多數壓縮工具的壓縮。
加快JavaScript裝入速度的工具：Lab.js
有許多出色的工具可以加快JavaScript裝入的速度。值得一提的工具是Lab.js。
借助LAB.js(裝入和阻止JavaScript)，你就可以並行裝入JavaScript文件，加快總的裝入過程。此外，你也可以為需要裝入的腳本設定某個順序，這樣就能確保依賴關係的完整性。此外，開發者聲稱其網站上的速度提升了2倍。
使用適當的CDN
現在許多網頁使用內容分發網路(CDN)。它可以改進你的快取機制，因為每個人都可以使用它。它還能為你節省一些頻寬。你很容易使用ping檢測或使用Firebug調試那些伺服器，以便搞清可以從哪些方面加快資料的速度。選擇CDN時，要照顧到你網站那些訪客的位置。記得盡可能使用公共儲存庫。
面向jQuery的幾個CDN方案：
◆ http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js——GoogleAjax，關於更多函式庫的資訊請請參閱http://code.google.com/apis/libraries/devguide.html#Libraries。
◆ http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js——微軟的CDN
•http://code.jquery.com/jquery-1.4.2. min.js——Edgecast (mt)。
網頁末尾裝入JavaScript
如果你關注用戶，用戶因互聯網連接速度慢而沒有離開你的網頁，這是一個非常好的做法。易用性和使用者放在第一位，JavaScript放在末位。這也許很痛苦，但你應該有所準備，有些使用者會停用JavaScript。可以在頭部部分放置一些需要裝入的JavaScript，但前提是它以非同步方式裝入。
非同步裝入追蹤程式碼
這一點非常重要。我們大多數人使用谷歌分析工具(Google Analytics)來獲得統計數據。這很好。現在看看你把你的追蹤程式碼放在哪裡。是放在頭部分?還是說它使用document.write?然後，如果你沒有使用谷歌分析工具異步跟踪代碼，那也只能怪你自己。
這就是Google分析工具非同步追蹤程式碼的樣子。我們必須承認，它使用DOM，而不是使用document.write，這可能更適合你。它可以在網頁裝入之前檢測到其中一些事件，這非常重要。現在想想這種情況，你的網頁甚至還沒有裝入，所有使用者都關閉了網頁。已找到了解決頁面瀏覽量錯失的辦法
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-XX']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/JavaScript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();沒有使用谷歌分析工具?這不是問題，今天的分析工具提供者大多允許你使用非同步追蹤。
Ajax優化
Ajax請求對你網站的效能有重大影響。下面我介紹關於Ajax優化的幾個要點。
快取你的ajax
先看一下你的程式碼。你的ajax可以快取嗎?是的，它依賴數據，但是你的ajax請求大多應該可以快取。在jQuery中，你的請求在預設情況下已被緩存，不包括script和jsonp資料類型。
針對Ajax請求使用GET
POST類型請求要發送兩個TCP資料包(先發送標題，然後發送資料)。 GET類型請求只需要發送一個資料包(這可能取決於你的cookie數量)。所以，當你的URL長度不到2K，你又想請求一些資料時，不妨使用GET。
使用ySlow
說到性能，ySlow既簡單，又極其有效。它可以對你的網站進行評分，顯示哪些方面需要改正，以及應該關注哪些方面。
另外支一招：把你的JavaScript打包成PNG檔案
設想一下：把你的JS和CSS添加到圖片的末尾，然後用CSS來裁剪，透過一次HTTP請求來獲得應用程式中所需的所有資訊。
我最近找到了這個方法。它基本上把你的JavaScript/css資料打包成PNG檔。之後，可以拆包，只要使用畫布API的getImageData()。此外，它非常有效率。你可以在不縮小資料的情況下，多壓縮35%左右。而且是無損壓縮!我得指出，對比較龐大的腳本來說，在圖片指向畫布、讀取像素的過程中，你會覺得有「一段」裝入時間。
更多js效能最佳化 如何更快速載入你的JavaScript頁面相關文章請關注PHP中文網！