2021-01-18 20:46:03 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 浏览器的渲染机制
|
|
|
|
|
|
|
|
|
|
|
|
我们需要先理解浏览器的渲染经历了哪些过程，才能有针对性的进行相关优化。
|
|
|
|
|
|
|
|
|
|
|
|
掌握浏览器的渲染优化，可以说是前端工程师的一个分水岭。如果想要具备架构师的思维，需要达到什么样的能力？不光是要解决当下的问题，还需要掌握基本的原理，将来在遇到新问题时也能解决，即“预测问题”。
|
|
|
|
|
|
|
|
|
|
|
|
有一个经典的面试题是：“在浏览器的地址栏输入url，回车后，经历了哪些过程？”这个问题并不简单，根据你回答的详细程度，可以看出你对前端知识的掌握程度。你能否答出“浏览器的渲染机制”？如果不能，说明你对浏览器渲染的性能优化，不够了解。
|
|
|
|
|
|
|
|
|
|
|
|
关于浏览器的渲染机制，可以看本教程的另外一篇文章：
|
|
|
|
|
|
|
|
|
|
|
|
> 《前端面试/面试必看/浏览器渲染机制.md》
|
2021-01-19 21:23:49 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 避免布局抖动（layout thrashing）
|
|
|
|
|
|
|
|
|
|
|
|
1、尽量避免 reflow：
|
|
|
|
|
|
|
|
|
|
|
|
比如说，如果想改变一个元素的位置，很多人可能会使用相对布局的left、top属性，但是这个属性会引起 reflow。我们可以使用 `transfrom:translate`让元素做位移，这个属性既不会触发 reflow，也不会触发 repaint，只会触发 conmposite。
|
|
|
|
|
|
|
|
|
|
|
|
再比如说，vue、react这样的框架，采用了虚拟DOM，它会把涉及到DOM修改的操作积攒起来，然后统一计算，批量处理，最后应用到真正的DOM上。
|
|
|
|
|
|
|
|
|
|
|
|
2、读写分离。
|
|
|
|
|
|
## 使用FastDom 做防抖
|
|
|
|
|
|
|
|
|
|
|
|
|
