Web前端性能優化

雅虎性能優化法則的第一條：要儘可能地減小HTTP請求。

1、html文檔結構標籤語義化
一、首先什麼是語義化呢？
語義化是指用合理HTML標記以及其特有的屬性去格式化文檔內容。機器在須要更少的人類干預的狀況下可以研究和收集信息,讓網頁可以被機器理解,最終讓人類受益。即用正確的標籤作正確的事。

二、語義化的好處或者說存在的意義
① 有利於搜索引擎
② 結構清晰的HTML在團隊合做中的做用：代碼可讀、便於維護、提升開發效率、快速達成共識、利於二次開發。
③ 有利於盲人屏幕閱讀器

2、css、js文件數量及大小優化
通常對於css、js是建議使用外聯式來進行導入。咱們能夠對css、js作相應的規劃也能夠減小css、js的個數以減小http請求。同時也要注重減小重複代碼，注重代碼重複利用，以達到用最少的代碼幹最多的事。同時當項目要投入上線使用的時候，能夠對css、js文件進行壓縮，文件的減少能夠加速文件的連接導入，以便加速網頁的加載渲染。

3、圖片的數量和大小
多個服務器請求會對站點的性能產生顯著的影響。對一張圖片進行導入又是一個http請求，所以咱們應該減小圖片的導入數量以便減小http請求。此處，咱們必須提到一個名詞「css精靈spirit」。css精靈是指包含多個不一樣的圖標、按鈕或圖形的單個圖像。所以咱們能夠把多張背景圖片合併爲一張而後對背景圖片進行相應的定位。同時使用PNG8格式的圖片相對於GIF來講比較少。而對於內容圖片，能夠對其進行適當的壓縮，能夠加快文檔內容加載，或者若是是須要用戶下載的圖片，小的圖片能夠加快用戶下載的速度。

4、有效性驗證
除了根據語義加標記以外，HTML文檔還須要用有效的代碼來編寫，若是代碼是無效的，瀏覽器會嘗試解釋標記自己，有時候會產生錯誤的結果。更糟的是，若是發送具備正確的MIME類型的XHTML文檔，理解XML的瀏覽器將不顯示無效的頁面。由於瀏覽器須要知道要使用什麼DTD（文檔類型定義）才能正確地處理頁面，因此對頁面進行有效性驗證要求有DOCTYPE聲明。

有效性驗證工具徑：
① W3C驗證器（bookmarklet），這是一小段能夠存儲在瀏覽器的書籤或收藏夾中的Javascript。單擊這個書籤就會觸發Javascript動做。
②能夠訪問http://validator.w3.org/，經過輸入本身的URL來對本身的站點來進行在線驗證。
③使用firefox瀏覽器的能夠下載插件Firefox Web Developer Extension

5、雅虎的Web優化最佳實踐

一、內容優化
① 儘可能減小HTTP請求：常見方法包括合併多個CSS文件和JavaScript文件，利用CSS Sprites整合圖像，Image map（圖像中不一樣的區域設置不一樣的連接），內聯圖象（使用 data: URL scheme 在實際的頁面嵌入圖像數據）等。
② 減小DNS查找
③ 避免重定向
④ 使Ajax可緩存
⑤ 延遲加載組件：考慮哪些內容是頁面呈現時所必需首先加載的、哪些內容和結構能夠稍後再加載，根據這個優先級進行設定。
⑥ 預加載組件：預加載是在瀏覽器空閒時請求未來可能會用到的頁面內容（如圖像、樣式表和腳本）。當用戶要訪問下一個頁面時，頁面中的內容大部分已經加載到緩存中了，所以能夠大大改善訪問速度。
⑦ 減小DOM元素數量：頁面中存在大量DOM 元素，會致使JavaScript遍歷DOM的效率變慢。
根據域名劃分頁面內容：把頁面內容劃分紅若干部分可使你最大限度地實現平行下載。但要確保你使用的域名數量在2個到4個之間（不然與第2條衝突）。
⑧ 最小化iframe的數量：iframes 提供了一個簡單的方式把一個網站的內容嵌入到另外一個網站中。但其建立速度比其餘包括JavaScript和CSS的DOM元素的建立慢了1-2個數量級。
⑨ 避免404：HTTP請求時間消耗是很大的，所以使用HTTP請求來得到一個沒有用處的響應（例如404沒有找到頁面）是徹底沒有必要的，它只會下降用戶體驗而不會有一點好處。

二、服務器優化
① 使用內容分發網絡（CDN）：把你的網站內容分散到多個、處於不一樣地域位置的服務器上能夠加快下載速度。
添加Expires或Cache-Control信息頭：對於靜態內容，可設置文件頭過時時間Expires的值爲「Never expire（永不過時）」；對於動態內容，可以使用恰當的Cache-Control文件頭來幫助瀏覽器進行有條件的請求。
② Gzip壓縮
③ 設置ETag：ETags（Entity tags，實體標籤）是web服務器和瀏覽器用於判斷瀏覽器緩存中的內容和服務器中的原始內容是否匹配的一種機制。
④ 提早刷新緩衝區：當用戶請求一個頁面時，服務器會花費200到500毫秒用於後臺組織HTML文件。在這期間，瀏覽器會一直空閒等待數據返回。在PHP中，可使用flush()方法，它容許你把已經編譯的好的部分HTML響應文件先發送給瀏覽器，這時瀏覽器就會能夠下載文件中的內容（腳本等）然後臺同時處理剩餘的HTML頁面。
⑤ 對Ajax請求使用GET方法：當使用XMLHttpRequest時，瀏覽器中的POST方法會首先發送文件頭，而後才發送數據。所以使用GET最爲恰當。
⑥ 避免空的圖像src

三、Cookie優化
① 減少cookie大小：去除沒必要要的coockie，並使coockie體積儘可能小以減小對用戶響應的影響
② 針對Web組件使用域名無關的Cookie：對靜態組件的Cookie讀取是一種浪費，使用另外一個無Cookie的域名來存放靜態組件是一個好方法，或者也能夠在Cookie中只存放帶www的域名。

四、CSS優化
① 將CSS代碼放在HTML頁面的頂部
② 避免使用CSS表達式：CSS表達式在執行時候的運算量很是大，會對頁面性能產生大的影響
③ 使用<link>來代替@import
④ 避免使用Filters：IE獨有屬性AlphaImageLoader用於修正IE 7如下版本中PNG圖片的半透明效果，但它的問題在於瀏覽器加載圖片時它會終止內容的呈現而且凍結瀏覽器。

五、JavaScript優化
① 將JavaScript腳本放在頁面的底部
② 將JavaScript和CSS做爲外部文件來引用：在實際應用中使用外部文件能夠提升頁面速度，由於JavaScript和CSS文件都能在瀏覽器中產生緩存。
③ 縮小JavaScript和CSS
④ 刪除重複的腳本
⑤ 最小化DOM的訪問：使用JavaScript訪問DOM元素比較慢
⑥ 開發智能的事件處理程序

六、圖像優化
① 優化圖片大小
② 經過CSS Sprites優化圖片
③ 不要在HTML中使用縮放圖片
④ favicon.ico要小並且可緩存

七、針對移動優化
① 保持組件大小在25KB如下：主要是由於iPhone不能緩存大於25K的文件（注意這裏指的是解壓縮後的大小）。
② 將組件打包成爲一個複合文檔：把頁面內容打包成複合文本就如同帶有多附件的Email，它可以使你在一個HTTP請求中獲取多個組件。

更多信息：http://developer.yahoo.com/performance/rules.html（中文翻譯）