回流（重排）（reflow）和重绘（repaint）

当我们请求一个地址，获取返回的html时。浏览器会进行如下的操作

1、浏览器将html代码解析成一个DOM树(包含dispaly: none, 以及js动态添加的dom) 2、浏览器将css解析成样式结构体 3、浏览器根据DOM树和css结构体结合生成render tree（不包含隐藏的DOM，render tree 每一个DOM都有自己的style） 4、浏览器会根据render tree去绘制页面

回流

1、当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面都至少进行一次回流，就是页面第一次加载的时候。在回流的时候，浏览器会是渲染树中受到影响的部分失效，重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分在屏幕中，该过程叫做重绘。

2、如果只更改一些元素样式不改变结构，则重绘。

注：回流必定引起重绘，重绘不一定会引起回流。

发生回流

• 添加删除dom
• 元素位置改变
• 元素尺寸改变
• 内容改变
• 页面渲染初始化
• resize

减少回流、重绘

尽量减少对render tree的操作。