dev 中 gridcontrol1 滚动条重绘_浏览器的重绘和回流（Repaint & Reflow）

参考文献：

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=zh-cn​developers.google.com 你真的了解回流和重绘吗 · Issue #4 · chenjigeng/blog​github.com

前言：

重绘：由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的，称为重绘，例如outline,visibility,color、background-color等。

回流：是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素，因为其变化涉及到部分页面（或是整个页面）的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。

测试：

分别使用left跟translate实现位移效果，查看重绘&回流对浏览器性能及视觉效果的影响。

1.left效果:

left效果

2.translate效果：

translate效果

可以看到left一直在重绘&回流，但是translate就不一样啦，这是因为CSS3做了很多优化。由此可见重绘&回流带来的性能影响及糟糕的用户体验。

浏览器的渲染过程：

本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘，如果大家想直接看如何减少回流和重绘，可以跳到后面。（这个渲染过程来自MDN）

从上面这个图上，我们可以看到，浏览器渲染过程如下：

1. 解析HTML，生成DOM树，解析CSS，生成CSSOM树
2. 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
3. Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
4. Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
5. Display:将像素发送给GPU，展示在页面上。（这一步其实还有很多内容，比如会在GPU将多个合成层合并为同一个层，并展示在页面中。而css3硬件加速的原理则是新建合成层，这里我们不展开，之后有机会会写一篇博客）

渲染过程看起来很简单，让我们来具体了解下每一步具体做了什么。

生成渲染