減少資源大小可以加快網頁顯示速度,所以要對 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
2. 使用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