实习第十七天（回流reflow/重绘repaint）

参考前端性能优化|
浏览器的回流与重绘

浏览器解析的工作流程

浏览器的工作流程可分为四步：
1、解析HTML构建DOM树：渲染引擎开始解析HTML文档，转换树中的HTML标签或者js生生的标签到DOM节点，它被称为内容树。即图中第一个黄色椭圆
2、构建渲染树：解析css（包括外部css文件和样式元素以及js生成的样式），根据css选择器计算出节点的样式，创建另一个数，渲染树。即图中第二个黄色椭圆
3、布局渲染树：从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点所应该在屏幕上出现的青雀坐标。即图中第三个黄色椭圆
4、绘制渲染树：遍历渲染树，每个节点将使用UI后端层来绘制。即图中第四个黄色椭圆。
可以看出， reflow 和repaint分别对应步骤中的第三步和第四步

---

repaint主要是针对某一个DOM元素进行的重绘，reflow则是回流，针对整个页面的重排。
reflow 回流
1、什么是reflow对于DOM结构中的各个元素都有自己的盒子模型，这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称为 reflow
2、什么情况下会导致reflow

• width/height/border/margin/padding的修改，如width=778px；
• 动画，:hover等伪类引起的元素表现改动，display=none等造成页面回流；
• appendChild等DOM元素操作；
• font类style的修改；
• background的修改，注意着字面上可能以为是重绘，但是浏览器确实回流了，经过浏览器厂家的优化，部分background的修改只触发repaint，当然IE不用考虑；
• scroll页面，这个不可避免；
• resize页面，桌面版本的进行浏览器大小的缩放，移动端的话，还没玩过能拖动程序，resize程序窗口大小的多窗口操作系统。
• 读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))；
  注：display：none 会发生reflow ，而，visibility：hidden 只会触发repaint ，因为它没有发现位置的变化。

减少回流要注意

1：不要通过父级来改变子元素样式，最好直接改变子元素样式，改变子元素样式尽可能不要影响父元素和兄弟元素的大小和尺寸
2：尽量通过class来设计元素样式，切忌用style
3：实现元素的动画，对于经常要进行回流的组件，要抽离出来，它的position属性应当设为fixed或absolute
4：权衡速度的平滑。比如实现一个动画，以1个像素为单位移动这样最平滑，但reflow就会过于频繁，CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。
5：不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合，可以设置table-layout为auto或fixed，
6：这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。
7：css里不要有表达式expression
8：减少不必要的 DOM 层级（DOM depth）。改变 DOM 树中的一级会导致所有层级的改变，上至根部，下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面。
9：避免不必要的复杂的 CSS 选择器，尤其是后代选择器（descendant selectors），因为为了匹配选择器将耗费更多的 CPU。
10: 尽量不要过多的频繁的去增加，修改，删除元素，因为这可能会频繁的导致页面reflow，可以先把该dom节点抽离到内存中进行复杂的操作然后再display到页面上。
11：请求如下值offsetTop, offsetLeft, offsetWidth, offsetHeight，scrollTop/Left/Width/Height，clientTop/Left/Width/Height，浏览器会发生reflow，建议将他们合并到一起操作，可以减少回流的次数。
如果我们要经常去获取和操作这些值，则可以先将这些值缓存起来

---

repaint 重绘
1、什么是repaint当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上，这个过程称为repaint
2、什么情况下会导致repaint --重绘发生在元素的可见的外观被改变，但并没有影响到布局的时候。比如，仅修改DOM元素的字体颜色（只有Repaint，因为不需要调整布局）
3、为什么repaint 不可取repaint的开销是昂贵的，因为浏览器必须验证DOM Tree中所有结点的可见性。

触发重绘的条件：改变元素外观属性。如：color，background-color等。

注意：table及其内部元素可能需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多花两倍时间，这就是我们尽量避免使用table布局页面的原因之一。
具体参考repaint 重绘 reflow 渲染

优化

重绘重排的代价：耗时，导致浏览器卡慢。

1、浏览器自己的优化：浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。

2、我们要注意的优化：我们要减少重绘和重排就是要减少对渲染树的操作，则我们可以合并多次的DOM和样式的修改。并减少对style样式的请求。

（1）直接改变元素的className
（2）display：none；先设置元素为display：none；然后进行页面布局等操作；设置完成后将元素设置为display：block；这样的话就只引发两次重绘和重排；
（3）不要经常访问浏览器的flush队列属性；如果一定要访问，可以利用缓存。将访问的值存储起来，接下来使用就不会再引发回流；
（4）使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；
（5）将需要多次重排的元素，position属性设为absolute或fixed，元素脱离了文档流，它的变化不会影响到其他元素；
（6）如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document；
（7）尽量不要使用table布局。