非下表中的所有实体都能在所有的浏览器中正确地显示。

目前，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层的缓存，让渲染资源可以重复使用，所以一旦层多了，缓存增大，就会引起别的性能问题。