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

最新推荐文章于 2024-07-08 17:12:07 发布

weixin_30808253

最新推荐文章于 2024-07-08 17:12:07 发布

阅读量5.1k

点赞数

文章标签：前端 javascript ui ViewUI

原文链接：http://www.cnblogs.com/joyho/articles/4455893.html

版权

本文从前端角度分析了网页渲染慢的原因，包括因层过多导致的渲染效率降低和特定元素如overflow:scroll、CSS动画、JavaScript修改translate实现惯性滚动等引发的卡顿。建议避免过度使用3d变换、canvas、固定定位元素，以及注意CSS动画的实现方式。同时，优化原则包括减少动画使用，根据浏览器能力选择属性，以及避免页面无限滚动导致的性能问题。

摘要由CSDN通过智能技术生成

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。