網站性能優化三---yahoo網站頁面性能優化34條黃金守則---javascript

[color=red][b]1.Put Scripts at the Bottom

把腳本置於頁面底部[/b][/color]

[url]http://developer.yahoo.com/performance/rules.html#js_bottom[/url]

腳本帶來的問題就是它阻止了頁面的平行下載。HTTP/1.1 規範建議，瀏覽器每個主機名的並行下載內容不超過兩個。[color=blue]如果你的圖片放在多個主機名上，你可以在每個並行下載中同時下載2個以上的文件。但是當下載腳本時，瀏覽器就不會同時下載其它文件了，即便是主機名不相同。[/color]
在某些情況下把腳本移到頁面底部可能不太容易。比如說，如果腳本中使用了document.write來插入頁面內容，它就不能被往下移動了。這裏可能還會有作用域的問題。很多情況下，都會遇到這方面的問題。
[color=blue]一個經常用到的替代方法就是使用延遲腳本。DEFER屬性表明腳本中沒有包含document.write，它告訴瀏覽器繼續顯示。不幸的是，Firefox並不支持DEFER屬性。在Internet Explorer中，腳本可能會被延遲但效果也不會像我們所期望的那樣。如果腳本可以被延遲，那麼它就可以移到頁面的底部。這會讓你的頁面加載的快一點。[/color]


[color=red][b]2.Make JavaScript and CSS External

使用外部JavaScript和CSS[/b][/color]

[url]http://developer.yahoo.com/performance/rules.html#external[/url]

很多性能規則都是關於如何處理外部文件的。但是，在你採取這些措施前你可能會問到一個更基本的問題：JavaScript和CSS是應該放在外部文件中呢還是把它們放在頁面本身之內呢？
在實際應用中使用外部文件可以提高頁面速度，因爲JavaScript和CSS文件都能在瀏覽器中產生緩存。內置在HTML文檔中的 JavaScript和CSS則會在每次請求中隨HTML文檔重新下載。這雖然減少了HTTP請求的次數，卻增加了HTML文檔的大小。從另一方面來說，如果外部文件中的JavaScript和CSS被瀏覽器緩存，在沒有增加HTTP請求次數的同時可以減少HTML文檔的大小。
關鍵問題是，外部JavaScript和CSS文件緩存的頻率和請求HTML文檔的次數有關。雖然有一定的難度，但是仍然有一些指標可以一測量它。如果一個會話中用戶會瀏覽你網站中的多個頁面，並且這些頁面中會重複使用相同的腳本和樣式表，緩存外部文件就會帶來更大的益處。
許多網站沒有功能建立這些指標。對於這些網站來說，最好的堅決方法就是把JavaScript和CSS作爲外部文件引用。比較適合使用內置代碼的例外就是網站的主頁，如Yahoo!主頁和My Yahoo!。主頁在一次會話中擁有較少（可能只有一次）的瀏覽量，你可以發現內置JavaScript和CSS對於終端用戶來說會加快響應時 間。
對於擁有較大瀏覽量的首頁來說，有一種技術可以平衡內置代碼帶來的HTTP請求減少與通過使用外部文件進行緩存帶來的好處。[color=blue]其中一個就是在首頁中內置 JavaScript和CSS，但是在頁面下載完成後動態下載外部文件，在子頁面中使用到這些文件時，它們已經緩存到瀏覽器了。[/color]


[color=red][b]3.Minify JavaScript and CSS

削減JavaScript和CSS[/b][/color]

[url]http://developer.yahoo.com/performance/rules.html#minify[/url]

精簡JavaScript中目前用到的最廣泛的兩個工具是JSMin和YUI Compressor。YUI Compressor還可用於精簡CSS。

JSMin
[url]http://crockford.com/javascript/jsmin[/url]

YUI Compressor
[url]http://developer.yahoo.com/yui/compressor/[/url]

在對美國前10大網站的調查中發現，精簡也可以縮小原來代碼體積的21%，而混淆可以達到25%。儘管混淆法可以更好地縮減代碼，但是對於JavaScript來說精簡的風險更小。


[color=red][b]4.Remove Duplicate Scripts

剔除重複腳本[/b][/color]

[url]http://developer.yahoo.com/performance/rules.html#js_dupes[/url]

在Internet Explorer中會產生不必要的HTTP請求，而在Firefox卻不會。
除增加額外的HTTP請求外，多次運算腳本也會浪費時間。在Internet Explorer和Firefox中不管腳本是否可緩存，它們都存在重複運算JavaScript的問題。


[color=red][b]5.Minimize DOM Access

減少DOM訪問[/b][/color]

[url]http://developer.yahoo.com/performance/rules.html#dom_access[/url]

使用JavaScript訪問DOM元素比較慢，因此爲了獲得更多的應該頁面，應該做到：

[color=blue]緩存已經訪問過的有關元素
線下更新完節點之後再將它們添加到文檔樹中
避免使用JavaScript來修改頁面佈局 [/color]
有關此方面的更多信息請查看Julien Lecomte在YUI專題中的文章“[color=blue]高性能Ajax應該程序[/color]”。

高性能Ajax應該程序:
[url]http://yuiblog.com/blog/2007/12/20/video-lecomte/[/url]


[color=red][b]6.Develop Smart Event Handlers

開發智能事件處理程序[/b][/color]

[url]http://developer.yahoo.com/performance/rules.html#events[/url]

有時候我們會感覺到頁面反應遲鈍，這是因爲DOM樹元素中附加了過多的事件句柄並且些事件句病被頻繁地觸發。這就是爲什麼說使用event delegation（事件代理）是一種好方法了。[color=blue]如果你在一個div中有10個按鈕，你只需要在div上附加一次事件句柄就可以了，而不用去爲每一個按鈕增加一個句柄。事件冒泡時你可以捕捉到事件並判斷出是哪個事件發出的。[/color]
你同樣也不用爲了操作DOM樹而等待onload事件的發生。你需要做的就是等待樹結構中你要訪問的元素出現。你也不用等待所有圖像都加載完畢。
[color=blue]你可能會希望用DOMContentLoaded事件來代替onload，但是在所有瀏覽器都支持它之前你可使用YUI 事件應用程序中的onAvailable方法。[/color]

YUI Event:
[url]http://developer.yahoo.com/yui/event/[/url]

onAvailable:
[url]http://developer.yahoo.com/yui/event/#onavailable[/url]