[轉] 提高前端效能方面的處理以及不足 ---張鑫旭

標籤：

二、最最基本的

• CSS頂部, JS底部
• YUI compressor/Gzip
• CDN 有
• 必要的CSS Sprite
• Ajax可緩衝

以上沒什麼好說的。

三、CSS渲染、頁面重繪以及迴流

• 盡量避免類似.a.b{}.list a{}以及其他一些複雜選取器，以提高整站整體CSS渲染。
• 避免某些expression運算式，避免IE6的AlphaImageLoader png透明濾鏡，可以試試使用fireworks產生png8 alpha透明（目前photoshop只有png8 索引透明）。
• 適當定高，例如如果div內容可能有高度差異的動態內容載入。什麼意思？例如右上方的個人使用者資訊是頁面渲染完畢之後動態載入的。但是，有可能會出現高度20像素的小表徵圖，，而文字所佔據高度為12px * 1.4 = 16.8px, IE6又存在行高被拒的悲劇。因此，如果這部分div不定高，就會出現個人資訊載入後，整個頁面下沉幾像素(3.2像素？)頁面重繪的問題。

  記住這麼個原則， 頁面重新整理載入的時候，應避免頁面元素的晃動、位移等，這些都是額外的重繪，會讓你的CPU和風扇興奮的。

• 圖片設定不響應重繪的尺寸，如果你的<img>不設定尺寸、同時外部容器沒有定死高寬，則圖片在首次載入時候，佔據空間會從0到完全出現，左右上下都可能位移，發生大規模的重繪。可以參見新浪微博載入時候頁面高度隨著圖片顯示不斷變高的問題，這些都讓瀏覽器重繪了，一是體驗可能不好，二是燒CPU的。

  你可以使用width/height控制，或者在CSS中設定。

• <textarea>或者使用<script type="text/html">儲存動態載入HTML或模板HTML，降低首屏載入的渲染時間。
• 具有複雜動畫的元素絕對位置-脫離文檔流，避免強烈的迴流。現代瀏覽器可以漸進使用CSS3 transition實現動畫效果，比改變像素值來的高效能。
• 不使用iframe，據說開銷最大的DOM元素。

四、降低靜態資源請求數

• 開始提到的CSS sprite，目前因降低後期維護成本，sprite的規模有所降低
• 字元與圖形產生，如： 該圖效果之前有介紹。
• CSS圖形產生，如三角：
• CSS類比，如幾像素的投影效果
• CSS3技術，例如漸層效果CSS3 gradient+filter。投影效果CSS3 box-shadow+filter blur。
• base64 url技術，例如虛點效果：

五、資源的複用

• 團隊CSS樣式庫，快速構建網站 – Bootstrap有點類似我們這個味道，.span1,.span2,.span3,.span4,.span4,...
• 高寬自適應 – 無論選項卡、按鈕等還是各個大小模組都是高寬自適應的，以適用於各種環境、需求
• CSS3 font-face技術 – 純色表徵圖大小以及顏色可以隨意控制，增強複用  

六、js/HTML互動相關

• localStorage本機存放區與最佳化。兩種實踐。 一是：大資料量互動，資料不怎麼更新的，含版本控制機制，一次請求，之後高枕無憂；    二是代替cookie實現某些功能，帶到期時間管理，降低頁面cookie大小（IE6-7依然使用Cookie）。
• 圖片/廣告位的顯屏載入，也就是滾動顯示載入
• 下拉/彈框等預設隱藏資源使用textarea隱藏。需要顯示時候才真正顯露。
• 特殊互動JS資源再使用的時候才非同步載入(上傳圖片，顯示地圖等)
• 無關緊要資源避開載入渲染高峰顯示，例如外站iframe等載入完畢後1秒再DOM建立載入處理（例如嵌入的新浪微博）。
• 複雜事件偵聽與初始化（滑鼠移動或鍵入到該地區才初始化複雜事件）。
• 鍵盤事件延遲，例如搜尋的Autocomplete效果，或hover延遲浮動層顯示
• MVC – 資料、展現、互動分離
• 面向資料編程
• 避免DOM操作，遍曆資料而非DOM
• 事件委託，避免過多的DOM元素的事件綁定
• 其他N多JS編寫細節等

七、瀏覽器自身的潛力

• ol列表的數字、table的自適應性
• <strong><h1-6>粗體效果
• form相關特性，元素自身特性實現submit以及reset等效果
• HTML5 placeholder以及其他N多現代瀏覽器支援特性等

八、問題所在

• 沒有模組載入機制，20個模組指令碼參雜在一起，一個頁面可能只使用了4個。
• 圖片的展開很常見
• 各種廣告跟蹤代碼，把網站前端效能拉低了一個等級。
• HTML沒有頂邊顯示，去除冗餘空白字元以及注釋，因此HTML頁面大小未最佳化。不難，程式那邊一直沒做相關處理。
• 頭部無用的一段專為IE6的script輸出，之前曾做過處理，只IE6輸出的，後來因為不同城市不同站等原因，後台那邊懶得折騰了。

九、結語

梳理過程中發現有些地方還可進一步改進，比如城市的下拉元素們預設可以放在隱藏的textarea中，我待會就去改掉。項目的實際情況不同，相關的處理最佳化策略也不一樣，適用性也不一樣。歡迎通過評論形式分享您的一些最佳化處理策略，或者幫忙指出我上面說法中有問題的地方。

互相交流，共同進步！

對了，諸位有沒有靠譜職位可以推薦的，長三角地區，可以微博私信聯絡，小生先謝過了。

他人觀點：

• @wo_is神仙 不要為了最佳化而最佳化，如有必要，盡量與後端配合。

原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com] 本文地址：http://www.zhangxinxu.com/wordpress/?p=3152

（本篇完）

[轉] 提高前端效能方面的處理以及不足 ---張鑫旭