不要什么都依賴JavaScript。不要編寫重復(fù)性的腳本。要把JavaScript當(dāng)作糖果工具，只是起到美化作用。別給你的網(wǎng)站添加大量的JavaScript代碼。只有必要的時候用一下。只有確實能改善用戶體驗的時候用一下。

　　盡量減少DOM訪問

　　使用JavaScript訪問DOM元素很容易，代碼更容易閱讀，但是速度很慢。下面介紹幾個要點：限制使用JavaScript來修飾網(wǎng)頁布局，把針對訪問元素的引用緩存起來。有時，當(dāng)你的網(wǎng)站依賴大量的DOM改動時，就應(yīng)該考慮限制你的標(biāo)記。這是改用HTML5、舍棄那些原來的XHTML和HTML4的一個充分理由。你可以查看DOM元素的數(shù)量，只要在Firebug插件的控制臺中輸入：document.getElementsByTagName('*').length。

　　壓縮代碼

　　要提供經(jīng)過壓縮的JavaScript頁面，最有效的辦法就是先用JavaScript壓縮工具對你的代碼壓縮一下，這種壓縮工具可以壓縮變量和參數(shù)名稱，然后提供因而獲得的代碼，使用了gzip壓縮。

　　是的，我沒有壓縮我的main.js，但你要檢查有沒有未經(jīng)壓縮的任何jQuery插件，別忘了壓縮。下面我列出了壓縮方面的幾個方案。

　　◆ YUI壓縮工具(jQuery開發(fā)團(tuán)隊就使用它)，初學(xué)者指南

(http://www.slideshare.net/nzakas/extreme-JavaScript-compression-with-yui-compressor)、第二指南 (http://vilimpoc.org/research/js-speedup/)和官方網(wǎng)站(http://developer.yahoo.com/yui/compressor/)。

　　◆ Dean Edwards Packer(http://dean.edwards.name/packer/)

　　◆ JSMin(http://crockford.com/JavaScript/jsmin)

　　GZip壓縮：其背后的想法是，縮短在瀏覽器和服務(wù)器之間傳送數(shù)據(jù)的時間。縮短時間后，你得到標(biāo)題是Accept-Encoding: gzip,deflate的一個文件。不過這種壓縮方法有一些缺點。它在服務(wù)器端和客戶端都要占用處理器資源(以便壓縮和解壓縮)，還要占用磁盤空間。

　　避免eval()：雖然有時eval()會在時間方面帶來一些效率，但使用它絕對是錯誤的做法。eval()導(dǎo)致你的代碼看起來更臟，而且會逃過大多數(shù)壓縮工具的壓縮。

　　加快JavaScript裝入速度的工具：Lab.js

　　有許多出色的工具可以加快JavaScript裝入的速度。值得一提的一款工具是Lab.js。

　　借助LAB.js(裝入和阻止JavaScript)，你就可以并行裝入JavaScript文件，加快總的裝入過程。此外，你還可以為需要裝入的腳本設(shè)置某個順序，那樣就能確保依賴關(guān)系的完整性。此外，開發(fā)者聲稱其網(wǎng)站上的速度提升了2倍。

　　使用適當(dāng)?shù)腃DN

　　現(xiàn)在許多網(wǎng)頁使用內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)。它可以改進(jìn)你的緩存機(jī)制，因為每個人都可以使用它。它還能為你節(jié)省一些帶寬。你很容易使用ping檢測或使用Firebug調(diào)試那些服務(wù)器，以便搞清可以從哪些方面加快數(shù)據(jù)的速度。選擇CDN時，要照顧到你網(wǎng)站那些訪客的位置。記得盡可能使用公共存儲庫。

　　面向jQuery的幾個CDN方案：

　　◆ http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js——谷歌Ajax，關(guān)于更多庫的信息請參閱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)。

　　網(wǎng)頁末尾裝入JavaScript

　　如果你關(guān)注用戶，用戶因互聯(lián)網(wǎng)連接速度慢而沒有離開你的網(wǎng)頁，這是一個非常好的做法。易用性和用戶放在首位，JavaScript放在末位。這也許很痛苦，但是你應(yīng)該有所準(zhǔn)備，有些用戶會禁用JavaScript?？梢栽陬^部分放置需要裝入的一些JavaScript，但是前提是它以異步方式裝入。

　　異步裝入跟蹤代碼

　　這一點非常重要。我們大多數(shù)人使用谷歌分析工具(Google Analytics)來獲得統(tǒng)計數(shù)據(jù)。這很好?，F(xiàn)在看一下你把你的跟蹤代碼放在哪里。是放在頭部分?還是說它使用document.write?然后，如果你沒有使用谷歌分析工具異步跟蹤代碼，那也只能怪你自己。

　　這就是谷歌分析工具異步跟蹤代碼的樣子。我們必須承認(rèn)，它使用DOM，而不是使用document.write，這可能更適合你。它可以在網(wǎng)頁裝入之前檢測到其中一些事件，這非常重要?，F(xiàn)在想一想這種情況，你的網(wǎng)頁甚至還沒有裝入，所有用戶都關(guān)閉了網(wǎng)頁。已找到了解決頁面瀏覽量錯失的辦法。

　　Ajax優(yōu)化

　　Ajax請求對你網(wǎng)站的性能有重大影響。下面我介紹關(guān)于Ajax優(yōu)化的幾個要點。

　　緩存你的ajax

　　先看一下你的代碼。你的ajax可以緩存嗎?是的，它依賴數(shù)據(jù)，但是你的ajax請求大多應(yīng)該可以緩存。在jQuery中，你的請求在默認(rèn)情況下已被緩存，不包括script和jsonp數(shù)據(jù)類型。

　　針對Ajax請求使用GET

　　POST類型請求要發(fā)送兩個TCP數(shù)據(jù)包(先發(fā)送標(biāo)題，然后發(fā)送數(shù)據(jù))。GET類型請求只需要發(fā)送一個數(shù)據(jù)包(這可能取決于你的cookie數(shù)量)。所以，當(dāng)你的URL長度不到2K，你又想請求一些數(shù)據(jù)時，不妨使用GET。

　　使用ySlow

　　說到性能，ySlow既簡單，又極其有效。它可以對你的網(wǎng)站進(jìn)行評分，顯示哪些方面需要改正，以及應(yīng)關(guān)注哪些方面。

　　另外支一招：把你的JavaScript打包成PNG文件

　　設(shè)想一下：把你的JS和CSS添加到圖片的末尾，然后用CSS來裁切，通過一次HTTP請求來獲得應(yīng)用程序中所需的所有信息。

　　我最近找到了這個方法。它基本上把你的JavaScript/css數(shù)據(jù)打包成PNG文件。之后，你可以拆包，只要使用畫布API的getImageData()。此外，它非常高效。你可以在不縮小數(shù)據(jù)的情況下，多壓縮35%左右。而且是無損壓縮!我得指出，對比較龐大的腳本來說，在圖片指向畫布、讀取像素的過程中，你會覺得有“一段”裝入時間。
英文原文：http://www.1stwebdesigner.com/design/load-JavaScript-faster/

最新評論