什么是浏览器的重排（reflow）和重绘 (repaint)？如何减少重排和重绘？

一个页面由两部分组成：
DOM：描述该页面的结构
render：描述 DOM 节点 (nodes) 在页面上如何呈现

当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为 repaint。

如果该次变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为 reflow。

这两个过程是很耗费浏览器性能的, 从 IE 系列和 Chrome 渲染页面速度上的差距即可看出渲染引擎计算对应值和呈现并不一定高效, 而每次对元素的操作都会发生 repaints 或 reflow, 因此编写 DOM 交互时如果不注意就会导致页面性能低下.
页面渲染的过程如下：

1.解析HTML代码并生成一个 DOM 树。

2.解析CSS文件，顺序为：浏览器默认样式->自定义样式->页面内的样式。

3.生成一个渲染树（render tree）。这个渲染树和DOM树的不同之处在于，它是受样式影响的。它不包括那些不可见的节点。

4.当渲染树生成之后，浏览器就会在屏幕上“画”出所有渲染树中的节点。

不管页面发生了重绘还是重排，它们都会影响性能（最可怕的是重排 ，应尽量避免） 

下列情况会发生重排

• 页面初始渲染
• 添加/删除可见DOM元素
• 改变元素位置
• 改变元素尺寸（宽、高、内外边距、边框等）
• 改变元素内容（文本或图片等）
• 改变窗口尺寸

怎么减少重排？说一下我的方法：

1.分离读写操作

var curLeft=div.offsetLeft;

var curTop=div.offsetTop;

div.style.left=curLeft+1+'px';

div.style.top=curTop+1+'px';

2.样式集中改变 

可以添加一个类，样式都在类中改变

3.可以使用absolute脱离文档流。

4.使用 display:none ，不使用 visibility，也不要改变 它的 z-index

5.能用css3实现的就用css3实现。

如何在浏览器中查看页面渲染时间

1.打开开发者工具：点击TimeLine 左侧有个小圆点 点击刷新页面会录制整个页面加载出来 时间的分配情况。如下图

下面具体的说一下这几个过程：点击 Event Log ：单独勾选Loading项会显示html 和 css 加载时间。如下图：

解析完DOM+css之后会生成一个渲染树 Render Tree，就是 dom 和 css 的一一对应关系。

DOM+css= Render Tree 

layout:  重排 ，又叫回流。

paint:重绘 也可以在Event Log里看的到，这里就不附图了。

重排重绘这些步骤都是在cpu中发生的。

最后 到  compostite Layers阶段，cpu 把生成的 BitMap（位图）传输到GPU，渲染到屏幕。 css3就是在GPU发生的：transform  opacity。

在 GPU发生的属性比较高效。所以css3性能比较高。

小结：

渲染的三个阶段 Layout ,Paint,Composite Layers。

修改不同的css属性会触发不同阶段。

触发的阶段越前，渲染的代价越高。

详解css属性在哪个阶段发生的 参考：https://csstriggers.com