非下表中的所有實體都能在所有的瀏覽器中正確地顯示。

目前，IE 11 是唯一一個能正確顯示所有 HTML5 實體的瀏覽器。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

小伙伴們，感覺我的分享很不錯的別忘記“贊賞”我一下喲!

思維新建站官網：jz.inspinovation.com

文|李掌柜

前面給大家介紹了《HTML5移動前端性能優化之加載優化》，今天來向大家介紹如何從網頁渲染的層面來優化HTML5前端性能。

一、HTML5使用viewport

通俗的講，移動設備上的viewport就是設備的屏幕上能用來顯示我們的網頁的那一塊區域，在具體一點，就是瀏覽器上(也可能是一個app中的webview)用來顯示網頁的那部分區域，但viewport又不局限于瀏覽器可視區域的大小，它可能比瀏覽器的可視區域要大，也可能比瀏覽器的可視區域要小。在默認情況下，一般來講，移動設備上的viewport都是要大于瀏覽器可視區域的，這是因為考慮到移動設備的分辨率相對于桌面電腦來說都比較小，所以為了能在移動設備上正常顯示那些傳統的為桌面瀏覽器設計的網站，移動設備上的瀏覽器都會把自己默認的viewport設為980px或1024px（也可能是其它值，這個是由設備自己決定的），但帶來的后果就是瀏覽器會出現橫向滾動條，因為瀏覽器可視區域的寬度是比這個默認的viewport的寬度要小的。下圖列出了一些設備上瀏覽器的默認viewport的寬度。

二、減少DOM節點

當解析的html文件很大時，生成DOM樹占用內存較大，同時遍歷（不更新）元素耗時也更長。但這都不是重點，DOM的核心問題是：DOM修改導致的頁面重繪、重新排版！重新排版是用戶阻塞的操作，同時，如果頻繁重排，CPU使用率也會猛漲！

三、盡量使用CSS3動畫

CSS雖然是由瀏覽器實現，按理在瀏覽器支持的前提下性能會更好，然而使用者如果加入了其他干擾，發生頻繁的重繪或者回流，自然性能就差了。

四、Touchmove 和Scroll事件會導致多次渲染

類似touchmove，scroll這類的事件可導致多次渲染，對于這種事件可以通過以下手段進行優化:

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

2.增加響應變化的時間間隔，減少重繪次數。

五、GPU加速

觸發GPU加速的方式有：CSS3 transitions、CSS3 3D transforms、WebGL 3D 繪制、Video。

GPU加速實際上是大幅減少了合成/繪制時間，從而大大地提高了頁面速度，但GPU加速有自己的缺點：

過多的GPU層會帶來性能開銷，主要原因是使用GPU加速其實是利用了GPU層的緩存，讓渲染資源可以重復使用，所以一旦層多了，緩存增大，就會引起別的性能問題。