前言

回流和重绘，在我刚刚接触前端的时候就听别人分享过了

比如大家经常看到的xxx

那么问你，xxx，一定会导致xxx么？

先说我作为渲染引擎我会怎么做，以及实际渲染引擎怎么做

本次测试基于 chrome 78

目前我的水平，应该只能分析处于 dirty 的布局树，获取其上属性不会触发 layout

修改布局属性后，再次获取会触发。。

先不写了，后面变强了再写

背景知识

以前的分析

而在宏任务中操作 dom,设置样式等，只可能进行解析(Parse HTML)，计划计算样式(Schedule Style Recalculation)等，还不会开始计算样式，进行布局和绘制等

但是，如果在宏任务中去获取具体布局相关属性，比如宽高位置，会进行布局和样式计算(同步操作)，然后将值返回

同样，如果在宏任务中去获取具体非布局相关属性，比如颜色等，会进行样式计算(同步操作)，然后将值返回

当然，这个的前提是触发了计划计算样式(Schedule Style Recalculation)，如果这个没触发，直接去获取属性并不会造成回流重绘

并且，如果进行了重排重绘，在 UI Render 阶段不会再次进行样式计算(Recalculate Style)和生成布局树(Layout)了

注意一点，设置了某个节点的样式，然后去获取另一个节点的布局，会先进行样式计算，但不一定是会进行 Layout 的

渲染引擎很智能，会根据样式计算结果得知需不需要进行 Layout

比如前面节点设置的样式并没有涉及布局相关属性，那么后者获取布局属性并不需要先进行 Layout ，

原本以为处于绝对定位然后设置了布局相关属性，影响不到我们要获取的节点，不会进行 Layout，但事实会 Layout 说明渲染引擎没有那么智能

css3 硬件加速原理

参考文献

强烈推荐。。 https://juejin.im/entry/590801780ce46300617c89b8

https://www.rrfed.com/2017/02/26/chrome-layout/

https://juejin.im/post/5c0f104551882509a7683d63

https://fed.taobao.org/blog/2016/04/26/performance-composite/