提高前端性能

梳理：提高前端性能方面的處理以及不足

這篇文章發佈於 2013年04月3日，星期三，13:52，歸類於 css相關。 閱讀 61301 次, 今日 17 次

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=3152

一、清明時節雨紛紛

明兒個清明節了，也是我在現在公司三年合同到期的時間，本來計劃換個地方的，無奈面試智商低、個性不收斂、略顯隨性，面了兩家上海心儀公司，都在最後被拒了。我跟總監說了這事，他說我是挺虧的（畢竟不是因爲技術能力不足被拒），他建議我把棱角再磨掉些。要磨嗎？

先不說這個，畢竟我還年輕，機會還會有，所以當作擴展眼界、自我學習的好機會。return;

面試時候，有被提問網站性能優化的問題。被問到這個問題的時候，第一反應是，這是我自認爲做的不錯的地方、我做了很多優化，於是撲面而來很多信息，但由於之前沒有系統梳理過，很多非常基本的都漏了（可能潛意識覺得這是常識，沒什麼好說的），其他的技術點也有些亂，我自己覺得是糟糕的回答。

於是，纔有今天這篇文章，自己梳理下，順便跟大家交流交流。//zxx: 本文所述的優化以及問題都可以從訂餐小祕書上找到。

二、最最基本的

• 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輸出的，後來因爲不同城市不同站等原因，後臺那邊懶得折騰了。