浏览器的渲染优化

作者: 图恩分类: 编程开发阅读: 578发布时间： 2021-08-15 16:07:46

浏览器的渲染机制

我们需要先理解浏览器的渲染经历了哪些过程，才能有针对性的进行相关优化。

掌握浏览器的渲染优化，可以说是前端工程师的一个分水岭。如果想要具备架构师的思维，需要达到什么样的能力？不光是要解决当下的问题，还需要掌握基本的原理，将来在遇到新问题时也能解决，即“预测问题”。

有一个经典的面试题是：“在浏览器的地址栏输入url，回车后，经历了哪些过程？”这个问题并不简单，根据你回答的详细程度，可以看出你对前后端知识的掌握程度。你能否答出“浏览器的渲染机制”？如果不能，说明你对浏览器渲染的性能优化，不够了解。

关于浏览器的渲染机制，可以看本教程的另外一篇文章：

《前端面试/面试必看/浏览器渲染机制.md》

关键渲染路径举例：

1、尽量避免重排：

比如说，如果想改变一个元素的位置，很多人可能会使用相对布局的left、top属性，但是这个属性会引起重排。我们可以使用 transfrom:translate让元素做位移，这个属性既不会触发重排，也不会触发重绘，只会触发 conmposite。

再比如说，vue、react这样的框架，采用了虚拟DOM，它会把涉及到DOM修改的操作积攒起来，然后统一计算，批量处理，最后应用到真正的DOM上。

2、读写分离。建议先批量读（获取位置等信息），然后再批量做写操作（修改位置）。

补充：

如果你的页面经常需要做重排、重绘，就很容易导致“页面抖动”。

很多时候，我们知道原理和解决方案。但是在工程化实践的时候，往往时间很紧，没有时间去做这些事情。我们希望有一些拿来就可以用的、而且经过测试没有问题的工具，来帮我们解决问题。

FastDom是用于做防抖的一个比较流行的解决方案。

我们可以针对高频事件做防抖。

高频事件处理函数：有很多事件的触发频率非常高，甚至超过了屏幕的刷新率（60帧/秒）。比如页面滚动、鼠标移动、移动端的touch事件。

如果我们不对这些事件做处理，就会频繁导致浏览器做重排、重绘，影响性能，导致页面卡顿，也就是“抖动”。因此需要对这些高频事件处理函数做防抖处理，降低它们的触发频率。

比如说滚动事件：我其实并不关心滚动中间的过程，我只关心最终滚动到了哪里。

requestAnimationFrame 这个api可以做防抖。

参考文章：

静态资源有很多种：js、图片、css、字体等。这些资源都有可能会很大，但是JS的开销仍然是最昂贵的，因为JS除了加载资源之外，还需要经历解析&编译、执行的过程。