总览

回流和重绘

重绘就是节点几何属性变化或者样式变化不影响布局的，叫重绘，比如 outline，visibility，color 等。
回流就是布局改变，一个元素的回流可能导致所有子节点以及 dom 后面的节点，祖先节点的回流。

回流必定引发重绘，重绘不一定会回流。

获取某些属性，比如 clientTop，scrollTop，offsetTop，width，getComputedStyle 等的时候会强制回流以及重绘来保证正确。

如何优化：

• 少用 top，用 transform 这样
• 比如使用 visibility 而不是使用 display，因为改变 display 会导致渲染树变化，会回流 2.
• 避免使用 table 布局
• 避免太复杂的内联样式
• 动画效果用到 fixed 或者 absolute 的元素上，避免影响其他元素布局
• 设置属性触发 CSS3 硬件加速
• 避免频繁操作样式以及 dom
• 避免频繁读取

opacity:0;visibility:hidden;display:none;

相同点：
都能让节点不显示
区别：
继承：
display 和 opacity 不继承，visibility 被子元素继承，子元素修改后可以展示
结构：
display 不再渲染树中，其他两个在；opacity 可以点击，其他两个不行
性能：
display 会触发回流，性能最差，其他两个只是重绘性能还好。

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 981909093@qq.com