前端之页面优化——回流(重排)与重绘

参考资料：

https://blog.csdn.net/a419419/article/details/90402561

https://kb.cnblogs.com/page/169820/

https://www.cnblogs.com/chenyanlong/p/10551080.html

---

回流（reflow）与重绘（repaint），在性能优化的时候，经常会提起，因为涉及到浏览器底层的渲染，所以掌握的童鞋并不多，但是面试经常被提及。而且在解决一些bug上，也能派上用场。

1. 浏览器渲染机制

在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解，页面是怎么把html结合css等显示到浏览器上的，下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。

• 1.解析HTML以构建DOM树 浏览器把获取到的HTML代码解析成1个DOM树，HTML中的每个标签都是DOM树中的1个节点。