浏览器回流和重绘

浏览器用两个引擎来处理页面工作

1. 渲染引擎
2. JavaScript引擎

且不同的浏览器使用的引擎也有不同

浏览器	渲染引擎	JavaScript引擎
IE	Trident	Chakra
Edge	EdgeHTML	Chakra
Firefox	Gecko	SpiderMonkey
Chrome	Webkit	V8
Safari	Webkit	Javascriptcore
Opera	Presto	Carakan

访问页面时，浏览器会解析HTML代码，并构建一个DOM树，每个HTML标签在树中都有对应的节点；

在构建DOM树的同时也会解析CSS，并创建 CSSOM树；

浏览器将DOM树和CSSOM树合并为渲染树；

渲染树创建完成后，浏览器后根据渲染树进行布局，布局的流程是输出一个盒模型，它会精确的捕获每个节点在视图中的确切位置和尺寸，所有相对的测量值都会转换成屏幕上的绝对像素。通常这一行为被称为回流和自动重排。

在布局完成后浏览器会立即发出paint setup事件，将渲染树转换成屏幕的像素。这一过程称为绘制。

页面显示在屏幕上。

用户访问页面时，会不断的触发回流和重绘。

回流必定重绘。

什么情况下触发回流、重绘？

当节点发生布局的变化，比如宽高、display、节点内容发生变化、浏览器窗口大小改变等都会触发回流重排和重绘的行为。

只发生重绘是什么情况？

颜色、透明度、transform、box-shadow、background-*、outline- 等

实际开发中，尽可能减少回流行为。