移動端優化篇
減少資源大小可以加快網頁顯示速度,所以要對 HTML
、 CSS
、 JavaScript
等進行程式碼壓縮,並在伺服器端設定 GZip
GZip
2.3 無阻塞
寫在 HTML
頭部的 JavaScript
(無非同步),和寫在 HTML
標籤中的 Style
會阻塞頁面的渲染,因此 CSS
放在頁面頭部並使用 Link
HTML
標籤中寫 Style
, JavaScript
放在頁面尾部或使用非同步方式載入
2.4 使用首屏載入
首屏的快速顯示,可以大大提升使用者對頁面速度的感知,因此應儘量針對首屏的快速顯示做優化。
2.5 按需載入
將不影響首屏的資源和當前螢幕資源不用的資源放到使用者需要時才載入,可以大大提升重要資源的顯示速度和降低總體流量。
PS:按需載入會導致大量重繪,影響渲染效能
LazyLoad
Media Query
2.6 預載入
大型重資源頁面(如遊戲)可使用增加 Loading
Loading
時間過長,會造成使用者流失。
對使用者行為分析,可以在當前頁載入下一頁資源,提升速度。
Loading
Loading
2.7 壓縮圖片
圖片是最佔流量的資源,因此儘量避免使用他,使用時選擇最合適的格式(實現需求的前提下,以大小判斷),合適的大小,然後使用智圖壓縮,同時在程式碼中用 Srcset
來按需顯示
PS:過度壓縮圖片大小影響圖片顯示效果
- a)使用智圖( http://zhitu.tencent.com/ )
- b)使用其它方式代替圖片(1. 使用
CSS3
SVG
3. 使用IconFont
) - c)使用
Srcset
- d)選擇合適的圖片(1.
webP
優於JPG
2.PNG8
優於GIF
) - e)選擇合適的大小(1. 首次載入不大於
1014KB
2. 不寬於640
(基於手機螢幕一般寬度))
2.8 減少Cookie
Cookie
會影響載入速度,所以靜態資源域名不使用 Cookie
。
2.9 避免重定向
重定向會影響載入速度,所以在伺服器正確設定避免重定向。
2.10 非同步載入第三方資源
第三方資源不可控會影響頁面的載入和顯示,因此要非同步載入第三方資源
2.11 減少HTTP請求
因為手機瀏覽器同時響應請求為4個請求( Android
支援4個, iOS
5後可支援6個),所以要儘量減少頁面的請求數,首次載入同時請求數不能超過4個
- a)合併
CSS
、JavaScript
- b)合併小圖片,使用雪碧圖
三、指令碼執行優化
指令碼處理不當會阻塞頁面載入、渲染,因此在使用時需當注意
-
CSS
寫在頭部,JavaScript
寫在尾部或非同步 - 避免圖片和
iFrame
等的空Src
,空Src
會重新載入當前頁面,影響速度和效率。 - 儘量避免重設圖片大小
- 重設圖片大小是指在頁面、
CSS
、JavaScript
等中多次重置圖片大小,多次重設圖片大小會引發圖片的多次重繪,影響效能 - 圖片儘量避免使用
DataURL
,DataURL
圖片沒有使用圖片的壓縮演算法檔案會變大,並且要解碼後再渲染,載入慢耗時長
四、CSS優化
儘量避免寫在HTML標籤中寫 Style
屬性
4.1 css3過渡動畫開啟硬體加速
.translate3d{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
4.2 避免CSS表示式
CSS表示式的執行需跳出CSS樹的渲染,因此請避免CSS表示式。
4.3 不濫用Float
Float在渲染時計算量比較大,儘量減少使用
4.4 值為0時不需要任何單位
為了瀏覽器的相容性和效能,值為 0
時不要帶單位
五、JavaScript執行優化
5.1 減少重繪和迴流
- 避免不必要的Dom操作
- 儘量改變
Class
而不是Style
,使用classList
代替className
- 避免使用
document.write
- 減少
drawImage
5.2 TOUCH事件優化
使用 touchstart
、 touchend
代替 click
,因快影響速度快。但應注意 Touch
響應過快,易引發誤操作
六、渲染優化
6.1 HTML使用Viewport
Viewport可以加速頁面的渲染,請使用以下程式碼
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
6.2 動畫優化
- 儘量使用
CSS3
動畫 - 合理使用
requestAnimationFrame
動畫代替setTimeout
- 適當使用
Canvas
動畫5
個元素以內使用css
動畫,5
個以上使用Canvas
動畫(iOS8
可使用webGL
)
6.4 高頻事件優化
Touchmove
、 Scroll
事件可導致多次渲染
requestAnimationFrame