參考資料：
[url]http://developer.yahoo.com/performance/rules.html[/url]
[url]http://apps.hi.baidu.com/share/detail/14611816[/url]
[color=red][b]1.Put Stylesheets at the Top
把樣式表置於頂部[/b][/color]
[url]http://developer.yahoo.com/performance/rules.html#css_top[/url]
The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer. These browsers block rendering to avoid having to redraw elements of the page if their styles change. The user is stuck viewing a blank white page.
[b][color=blue]The optimal solution is to follow the HTML specification and load your stylesheets in the document HEAD.[/color][/b]
[color=blue][b]把樣式表放到文檔的<head />內部[/b][/color]
[color=red][b]2.Avoid CSS Expressions
避免使用CSS表達式（Expression）[/b][/color]
[url]http://developer.yahoo.com/performance/rules.html#css_expressions[/url]
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
expression方法在其它瀏覽器中不起作用，因此在跨瀏覽器的設計中單獨針對Internet Explorer設置時會比較有用。
表達式的問題就在於它的計算頻率要比我們想象的多。不僅僅是在頁面顯示和縮放時，就是在頁面滾動、乃至移動鼠標時都會要重新計算一次。
[color=blue]一個減少CSS表達式計算次數的方法就是使用一次性的表達式，它在第一次運行時將結果賦給指定的樣式屬性，並用這個屬性來代替CSS表達式。如果樣式屬性必須在頁面週期內動態地改變，使用事件句柄來代替CSS表達式是一個可行辦法。[/color]如果必須使用CSS表達式，一定要記住它們要計算成千上萬次並且可能會對你頁面的性能產生影響。
[color=red][b]3.Choose <link> over @import
用<link>代替@import[/b][/color]
[url]http://developer.yahoo.com/performance/rules.html#csslink[/url]
[color=blue]在IE中，頁面底部@import和使用<link>作用是一樣的，因此最好不要使用它。[/color]
[color=red][b]4.Avoid Filters
避免使用濾鏡[/b][/color]
[url]http://developer.yahoo.com/performance/rules.html#no_filters[/url]
The IE-proprietary AlphaImageLoader filter aims to fix a problem with semi-transparent true color PNGs in IE versions < 7. The problem with this filter is that it blocks rendering and freezes the browser while the image is being downloaded. It also increases memory consumption and is applied per element, not per image, so the problem is multiplied.
The best approach is to avoid AlphaImageLoader completely and use gracefully degrading PNG8 instead, which are fine in IE. If you absolutely need AlphaImageLoader, use the underscore hack _filter as to not penalize your IE7+ users.
IE獨有屬性AlphaImageLoader用於修正7.0以下版本中顯示PNG圖片的半透明效果。這個濾鏡的問題在於瀏覽器加載圖片時它會終止內容的呈現並且凍結瀏覽器。在每一個元素（不僅僅是圖片）它都會運算一次，增加了內存開支，因此它的問題是多方面的。
[color=blue]完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式來代替，這種格式能在IE中很好地工作。如果你確實需要使用 AlphaImageLoader，請使用下劃線_filter又使之對IE7以上版本的用戶無效。[/color]
網站性能優化一---yahoo網站頁面性能優化34條黃金守則---css
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
網站性能優化三---yahoo網站頁面性能優化34條黃金守則---javascript
[color=red][b]1.Put Scripts at the Bottom把腳本置於頁面底部[/b][/color][url]http://d
網站性能優化六---yahoo網站頁面性能優化34條黃金守則---server
[color=red][b]1.Use a Content Delivery Network使用內容分發網絡[/b][/color][url]http
網站性能優化四---yahoo網站頁面性能優化34條黃金守則---cookie
[color=red][b]1.Reduce Cookie Size減小Cookie體積[/b][/color][url]http://develop