移動HTML5前端效能最佳化總結

標籤：viewport   效率   最佳化   .com   idt   比較   opera   圖片顯示   第三方   

概述

1. PC最佳化手段在Mobile側同樣適用

2. 在Mobile側我們提出三秒種渲染完成首屏指標

3. 基於第二點，首屏載入3秒完成或使用Loading

4. 基於聯通3G網路平均338KB/s(2.71Mb/s)，所以首屏資源不應超過1014KB

5. Mobile側因手機配置原因，除載入外渲染速度也是最佳化重點

6. 基於第五點，要合理處理代碼減少渲染損耗

7. 基於第二、第五點，所有影響首屏載入和渲染的代碼應在處理邏輯中後置

8. 載入完成後使用者互動使用時也需注意效能

 

最佳化指南

[載入最佳化]

載入過程是最為耗時的過程，可能會佔到總耗時的80%時間，因此是最佳化的重點

·減少HTTP請求

因為手機瀏覽器同時響應請求為4個請求(Android支援4個，iOS 5後可支援6個)，所以要盡量減少頁面的請求數，首次載入同時請求數不能超過4個

a)合并CSS、JavaScript

b)合并小圖片，使用雪碧圖

·緩衝

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

a)緩衝一切可快取的資源

b)使用長Cache(使用時間戳更新Cache)

c)使用外聯式引用CSS、JavaScript

·壓縮HTML、CSS、JavaScript

減少資源大小可以加快網頁顯示速度，所以要對HTML、CSS、JavaScript等進行代碼壓縮，並在伺服器端設定GZip

a)壓縮(例如，多餘的空格、分行符號和縮排)

b)啟用GZip

·無阻塞

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

·使用首屏載入

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

·按需載入

將不影響首屏的資源和當前螢幕資源不用的資源放到使用者需要時才載入，可以大大提升重要資源的顯示速度和降低總體流量

PS：按需載入會導致大量重繪，影響渲染效能

a)LazyLoad

b)滾屏載入

c)通過Media Query載入

·預先載入

大型重資源頁面(如遊戲)可使用增加Loading的方法，資源載入完成後再顯示頁面。但Loading時間過長，會造成使用者流失

對使用者行為分析，可以在當前頁載入下一頁資源，提升速度

a)可感知Loading(如進入空間遊戲的Loading)

b)不可感知的Loading(如提前載入下一頁)

·壓縮圖片

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

PS：過度壓縮圖片大小影響圖片顯示效果

a)使用智圖( http://zhitu.tencent.com/ )

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

c)使用Srcset

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

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

·減少Cookie

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以及float

b)display:inline-block後不應該再使用float

c)display:block後不應該再使用vertical-align

d)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動畫代替setTimeout

c)適當使用Canvas動畫 5個元素以內使用css動畫，5個以上使用Canvas動畫(iOS8可使用webGL)

·高頻事件最佳化

Touchmove、Scroll 事件可導致多次渲染

a)使用requestAnimationFrame監聽幀變化，使得在正確的時間進行渲染

b)增加響應變化的時間間隔，減少重繪次數

·GPU加速

CSS中以下屬性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)來觸發GPU渲染，請合理使用

更多web前端文章及教材請加 web前端開發學習群 547860425，一起交流學習

移動HTML5前端效能最佳化總結