HTML頁面最佳化

標籤：設定   檔案   時間間隔   view   device   initial   center   綁定   顯示   

第一步：載入最佳化

1. 減少HTTP請求。

   因為手機瀏覽器同時響應請求為4個請求（Android支援4個，iOS 5後可支援6個），所以要盡量減少頁面的請求數，首次載入同時請求數不能超過4個。a) 合并CSS、JavaScript；b) 合并小圖片，使用雪碧圖（CSS SPRITE）；

2.  

   緩衝。

   使用緩衝可以減少向伺服器的請求數，節省載入時間，所以所有靜態資源都要在伺服器端設定緩衝，並且盡量使用長Cache（長Cache資源的更新可使用時間戳）。

   a) 緩衝一切可快取的資源；b) 使用長Cache（使用時間戳更新Cache）；c) 使用外聯式引用CSS、JavaScript；

3.  

   壓縮HTML、CSS、JavaScript。

   減少資源大小可以加快網頁顯示速度，所以要對HTML、CSS、JavaScript等進行代碼壓縮，並在伺服器端設定GZip。a) 壓縮（例如，多餘的空格、分行符號和縮排）；b) 啟用GZip；

4.  

   確保無阻塞。

   寫在HTML頭部的JavaScript（無非同步），和寫在HTML標籤中的Style會阻塞頁面的渲染，因此CSS放在頁面頭部並使用Link方式引入，避免在HTML標籤中寫Style，JavaScript放在頁面尾部或使用非同步方式載入

5.  

   使用首屏載入。

   首屏的快速顯示，可以大大提升使用者對頁面速度的感知，因此應盡量針對首屏的快速顯示做最佳化。

6.  

   按需載入。

   將不影響首屏的資源和當前螢幕資源不用的資源放到使用者需要時才載入，可以大大提升重要資源的顯示速度和降低總體流量（PS：按需載入會導致大量重繪，影響渲染效能）。

   a) LazyLoad；b) 滾屏載入；c) 通過Media Query載入；

7.  

   預先載入。

   大型重資源頁面（如遊戲）可使用增加Loading的方法，資源載入完成後再顯示頁面。但Loading時間過長，會造成使用者流失。對使用者行為分析，可以在當前頁載入下一頁資源，提升速度；a) 可感知Loading(如進入空間遊戲的Loading)；b) 不可感知的Loading（如提前載入下一頁）；

8.  

   壓縮圖片。

   圖片是最占流量的資源，因此盡量避免使用他，使用時選擇最合適的格式（實現需求的前提下，以大小判斷），合適的大小，然後使用智圖壓縮，同時在代碼中用Srcset來按需顯示（PS：過度壓縮圖片大小影響圖片顯示效果）。

   a) 使用智圖（雪碧圖）；

   b) 使用其它方式代替圖片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)；

   c) 使用Srcset；

   d) 選擇合適的圖片(1. webP優於JPG 2. PNG8優於GIF)；

   e) 選擇合適的大小（1. 首次載入不大於1014KB 2. 不寬於640（基於手機螢幕一般寬度））；

   減少Cookie、避免重新導向以及非同步載入第三方資源。

9. Cookie會影響載入速度，所以靜態資源網域名稱不使用Cookie。此外，重新導向也會影響載入速度，所以在伺服器正確設定避免重新導向。最後，第三方資源不可控會影響頁面的載入和顯示，因此要非同步載入第三方資源。

   第二步：指令碼執行最佳化

   指令碼處理不當會阻塞頁面載入、渲染，因此在使用時需當注意：

   · CSS寫在頭部，JavaScript寫在尾部或非同步。

    

   · 避免圖片和iFrame等的空Src。

   空Src會重新載入當前頁面，影響速度和效率。

    

   · 盡量避免重設圖片大小。

   重設圖片大小是指在頁面、CSS、JavaScript等中多次重設圖片大小，多次重設圖片大小會引發圖片的多次重繪，影響效能。

    

   · 圖片盡量避免使用DataURL。

    

   DataURL圖片沒有使用圖片的壓縮演算法檔案會變大，並且要解碼後再渲染，載入慢耗時間長度。

   第三步：css最佳化

   盡量避免寫在HTML標籤中寫Style屬性。

   · 避免CSS運算式CSS運算式的執行需跳出CSS樹的渲染，因此請避免CSS運算式

   · 移除空的CSS規則空的CSS規則增加了CSS檔案的大小，且影響CSS樹的執行，所以需移除空的CSS規則

   · 正確使用Display的屬性Display屬性會影響頁面的渲染，因此請合理使用a) display:inline後不應該再使用width、height、margin、padding以及floatb) display:inline-block後不應該再使用floatc) display:block後不應該再使用vertical-alignd) display:table-*後不應該再使用margin或者float

    

   · 不濫用Float。

   Float在渲染時計算量比較大，盡量減少使用

    

   · 不濫用Web字型。

   Web字型需要下載，解析，重繪當前頁面，盡量減少使用

    

   · 不聲明過多的Font-size。

   過多的Font-size引發CSS樹的效率

    

   · 值為0時不需要任何單位。

   為了瀏覽器的相容性和效能，值為0時不要帶單位

    

   · 標準化各種瀏覽器首碼。

   a) 無首碼應放在最後

   b) CSS動畫只用 （-webkit- 無首碼）兩種即可

   c) 其它首碼為 -webkit- -moz- -ms- 無首碼 四種，（-o-Opera瀏覽器改用blink核心，所以淘汰）

    

   · 避免讓選擇符看起來像Regex。

    

   進階選取器執行耗時間長度且不易讀懂，避免使用

   第四步：JavaScript執行最佳化

   · 減少重繪和迴流。

   a) 避免不必要的Dom操作

   b) 盡量改變Class而不是Style，使用classList代替className

   c) 避免使用document.write

   d) 減少drawImage

    

   · 緩衝Dom選擇與計算。

   每次Dom選擇都要計算，緩衝它

    

   · 緩衝列表.length。

   每次.length都要計算，用一個變數儲存這個值

    

   · 盡量使用事件代理，避免大量繫結事件

    

   · 盡量使用ID選取器。

   ID選取器是最快的

    

   · TOUCH事件最佳化。

    

   使用touchstart、touchend代替click，因快影響速度快。但應注意Touch響應過快，易引發誤操作

   第五步：渲染最佳化

    HTML使用Viewport。

   Viewport可以加速頁面的渲染，請使用以下代碼<meta name=”viewport” content=”width=device-width, initial-scale=1″>

    

   · 減少Dom節點。

   Dom節點太多影響頁面的渲染，應盡量減少Dom節點

    

   · 動畫最佳化。

   a) 盡量使用CSS3動畫b) 合理使用requestAnimationFrame動畫代替setTimeoutc) 適當使用Canvas動畫 5個元素以內使用css動畫，5個以上使用Canvas動畫（iOS8可使用webGL）

    

   · 高頻事件最佳化。

   Touchmove、Scroll 事件可導致多次渲染a) 使用requestAnimationFrame監聽幀變化，使得在正確的時間進行渲染b) 增加響應變化的時間間隔，減少重繪次數

    

   · GPU加速。

   CSS中以下屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）來觸發GPU渲染，請合理使用（PS：過渡使用會引發手機過耗電增加）

    

    

    

1. 減少HTTP請求。

   因為手機瀏覽器同時響應請求為4個請求（Android支援4個，iOS 5後可支援6個），所以要盡量減少頁面的請求數，首次載入同時請求數不能超過4個。a) 合并CSS、JavaScript；b) 合并小圖片，使用雪碧圖（CSS SPRITE）；

2.  

   緩衝。

   使用緩衝可以減少向伺服器的請求數，節省載入時間，所以所有靜態資源都要在伺服器端設定緩衝，並且盡量使用長Cache（長Cache資源的更新可使用時間戳）。

   a) 緩衝一切可快取的資源；b) 使用長Cache（使用時間戳更新Cache）；c) 使用外聯式引用CSS、JavaScript；

3.  

   壓縮HTML、CSS、JavaScript。

   減少資源大小可以加快網頁顯示速度，所以要對HTML、CSS、JavaScript等進行代碼壓縮，並在伺服器端設定GZip。a) 壓縮（例如，多餘的空格、分行符號和縮排）；b) 啟用GZip；

4.  

   確保無阻塞。

   寫在HTML頭部的JavaScript（無非同步），和寫在HTML標籤中的Style會阻塞頁面的渲染，因此CSS放在頁面頭部並使用Link方式引入，避免在HTML標籤中寫Style，JavaScript放在頁面尾部或使用非同步方式載入

5.  

   使用首屏載入。

   首屏的快速顯示，可以大大提升使用者對頁面速度的感知，因此應盡量針對首屏的快速顯示做最佳化。

6.  

   按需載入。

   將不影響首屏的資源和當前螢幕資源不用的資源放到使用者需要時才載入，可以大大提升重要資源的顯示速度和降低總體流量（PS：按需載入會導致大量重繪，影響渲染效能）。

   a) LazyLoad；b) 滾屏載入；c) 通過Media Query載入；

7.  

   預先載入。

   大型重資源頁面（如遊戲）可使用增加Loading的方法，資源載入完成後再顯示頁面。但Loading時間過長，會造成使用者流失。對使用者行為分析，可以在當前頁載入下一頁資源，提升速度；a) 可感知Loading(如進入空間遊戲的Loading)；b) 不可感知的Loading（如提前載入下一頁）；

8.  

   壓縮圖片。

   圖片是最占流量的資源，因此盡量避免使用他，使用時選擇最合適的格式（實現需求的前提下，以大小判斷），合適的大小，然後使用智圖壓縮，同時在代碼中用Srcset來按需顯示（PS：過度壓縮圖片大小影響圖片顯示效果）。

   a) 使用智圖（雪碧圖）；

   b) 使用其它方式代替圖片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)；

   c) 使用Srcset；

   d) 選擇合適的圖片(1. webP優於JPG 2. PNG8優於GIF)；

   e) 選擇合適的大小（1. 首次載入不大於1014KB 2. 不寬於640（基於手機螢幕一般寬度））；

9.  

   減少Cookie、避免重新導向以及非同步載入第三方資源。

   Cookie會影響載入速度，所以靜態資源網域名稱不使用Cookie。此外，重新導向也會影響載入速度，所以在伺服器正確設定避免重新導向。最後，第三方資源不可控會影響頁面的載入和顯示，因此要非同步載入第三方資源。

HTML頁面最佳化