从前端角度看网页渲染慢的原理及解决方案

1.网页的写法导致渲染时产生的平台相关的layer过多。

浏览器在网页排版的时候会产生一棵render tree用于渲染。由于z-index和一些特殊元素如overflow，fixed元素等的存在，浏览器为了保证渲染的正确，真正渲染的时候不直接使用render tree，而是根据render tree的信息产生一棵对应的renderLayer tree。RenderLayer可以理解为是一个平面，上面可能对应着一个或者多个render tree上的节点，而对应当前主流的支持硬件加速的浏览器而言，还要基于renderLayer tree生成对应的graphicsLayer tree，那么在不同的平台上这棵graphicsLayer tree又对应于平台相关的实现，在android平台上就是layerAndroid tree了。layerAndroid tree有两棵，一个在内核线程，负责收集内核线程排版后产生的renderLayer tree的经过处理的信息，另一个在UI线程，由内核线程的layerAndroid tree复制得到，真正渲染的时候就是通过遍历这个UI线程的layerAndroid tree来实现，由于每个layerAndroid分开渲染之后再进行组合，所以一个layerAndroid的内容改变并不会影响到其他layerAndroid，所以网页部分内容的修改就不会导致整体网页的重绘了。因此，为某些特别的网页元素产生layer，会提高网页的渲染效率。但是有些时候过犹不及，如果网页产生的layerAndroid过多，遍历和绘制layerAndroid tree的时间就会变得非常长，这个时候就会出现渲染变慢和卡顿的问题了。而layerAndroid tree基本上是与graphicsLayer tree对应的，所以我们可以通过追查graphicsLayer的产生原因来分析layer过多导致的卡顿原因。

 

接上面，layerAndroid tree是根据graphicsLayer tree生成的，而graphicsLayer tree是根据renderLayer tree生成的。为了网页上一些特殊元素的渲染正确，两棵树上的节点并不是一一对应的，renderLayer tree上的节点可能不产生graphicsLayer，也可能产生不止一个graphicsLayer。

 

1.1 renderLayer在以下条件下会产生对应的graphicsLayer：

1> video元素

2>canvas元素

3>插件如flash元素

4>frame或iframe元素

5>网页元素有一些3d变换属性如translate3d，Preserve3D等

6>网页元素有backface-visibility:hidden属性

7>网页元素正在进行加速动画

8>网页使用了CSS Filter

9>Fixed元素

10>网页元素有overflow:scroll或者overflow:auto（产生滚动条的情况，与