了解基本知识

1. 浏览器采用的是流式布局模型（Flow Based Layout）
2. 浏览器会把CSS解析成CSSOM Tree，把HTML解析成 DOM Tree，把这两个合并成 Render Tree。
3. 有了Render Tree 我们就知道了所有节点的位置和样式，浏览器就开始计算他们在页面中的位置，然后开始绘制

回流（Reflow）

我们把Render Tree重新生成的过程我们称之为回流。回流引起的原因有很多，主要是影响布局的操作。

一、影响布局变化的，会导致回流的操作有：

1 页面初次渲染
2 浏览器窗口发生改变
3 元素尺寸，位置，内容发生变化
4 元素字体大小变化
5 添加或者删除的可见dom元素
6 激活CSS伪类，例如 :hover

二、查询某些属性或调用某些方法

clientWidth, clientHeight, clientTop, clientLeft,
offsetWidth, offsetHeight, offsetTop, offsetLeft,
scrollWidth, scrollHeight, scrollTop, scrollLeft,
scrollIntorView(), scrollInToViewIfNeeded(),
getComputedStyle(),getBoundingClientRect(),scrollTop
...

重绘（Repaint）

按照renderTree重新渲染的过程，称之为重绘。回流一定会导致重绘，否则将会引起表现不一致。

我看有很多网上的老旧知识，把过程讲的非常啰嗦而且不准确，就是一个简单的知识点。