渲染類
使用Viewport固定屏幕渲染,可以加速頁面渲染內(nèi)容
一般認(rèn)為,在移動端設(shè)置Viewport可以加速頁面的渲染,同時可以避免縮放導(dǎo)致頁面重排重繪。在移動端固定Viewport設(shè)置的方法如下。
<!-- 設(shè)置viewport不縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
避免各種形式重排重繪
頁面的重排重繪很耗性能,所以一定要盡可能減少頁面的重排重繪,例如頁面圖片大小變化、元素位置變化等這些情況都會導(dǎo)致重排重繪。
使用CSS3動畫,開啟GPU加速
使用CSS3動畫時可以設(shè)置transform: translateZ(0)來開啟移動設(shè)備瀏覽器的GPU圖形處理加速,讓動畫過程更加流暢。
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
合理使用Canvas和requestAnimationFrame
選擇Canvas或requestAnimationFrame等更高效的動畫實現(xiàn)方式,盡量避免使用setTimeout、setInterval等方式來直接處理連續(xù)動畫。
SVG代替圖片
部分情況下可以考慮使用SVG代替圖片實現(xiàn)動畫,因為使用SVG格式內(nèi)容更小,而且SVG DOM結(jié)構(gòu)方便調(diào)整。
不濫用float
在DOM渲染樹生成后的布局渲染階段,使用float的元素布局計算比較耗性能,所以盡量減少float的使用,推薦使用固定布局或flex-box彈性布局的方式來實現(xiàn)頁面元素布局。
不濫用web字體或過多font-size聲明
過多的font-size聲明會增加字體的大小計算,而且也沒有必要的。