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

一，最最基本的

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

轉載：http://www.zhangxinxu.com/wordpress/?p=3152