关于repaint和reflow的笔记

repaint(重绘) ，repaint发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变outline, visibility, opacity（opacity替代visibility可以减少repaint,进而优化性能）,z-index, background, color，box-shadow，transform3d不会影响到dom结构渲染。
既不引起回流也不引起重绘的属性：transform, cursor, perspective, windows
https://csstriggers.com/opacity

reflow(回流，重排)，与repaint区别就是他会影响到dom的结构渲染，同时他会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。

什么会引起回流？

1. 页面渲染初始化
2. DOM结构改变，比如删除了某个节点
3. render树变化，比如减少了padding
4. 窗口resize
5. 改变字体
6. 内容变化，比如用户在input框中输入文字
7. 增加或者移除样式表（Adding or removing a stylesheet）
8. 激活 CSS 伪类，比如 :hover (IE 中为兄弟结点伪类的激活)
9. 操作 class 属性（Manipulating the class attribute）
10. 最复杂的一种：获取某些属性，引发回流。

　　很多浏览器会对回流做优化，会等到数量足够时做一次批处理回流（flush队列）。但当获取一些属性时，浏览器为了获得正确的值也会触发回流，这样使得浏览器优化无效，包括：

1. offset(Top/Left/Width/Height)

2. scroll(Top/Left/Width/Height)

3. cilent(Top/Left/Width/Height)

4. width,height

5. 调用了getComputedStyle()或者IE的currentStyle

6. 修改字体

重绘不会带来重新布局，并不一定伴随回流。回流是更明显的一种改变，渲染树需要重新计算;回流的危害在于重新对DOM树进行渲染，那么，脱离文档流（position:absolute,fixed;float:left,right）之后，进行的任何操作，都不会造成回流了。如果没有对页面进行优化(存在大量回流)，那么页面因为回流所花费的时间，导致用户体验感大打折扣；只要修改DOM或修改了元素的形状或大小，就会触发Reflow，单纯修改元素的颜色只需Repaint一下（调用操作系统Native GUI的API绘制）。

回流一定伴随着重绘，重绘却可以单独出现。所以一般会有一些优化方案，如：

• 减少逐项更改样式，最好一次性更改style，或者将样式定义为class并一次性更新

• 避免循环操作dom，创建一个documentFragment或div，在它上面应用所有DOM操作，最后再把它添加到window.document

• 避免多次读取offset等属性。无法避免则将它们缓存到变量

• 将复杂的元素绝对定位或固定定位，使得它脱离文档流，否则回流代价会很高

减少回流的几点建议：

1. 减少不必要的DOM深度。因为无论你改变DOM节点树上任何一个层级都会影响节点树的每个层级——从根结点一直到修改的子节点。不必要的节点深度将导致执行回流时花费更多的时间。
2. 精简css，去除没有用处的css
3.

如果你想让复杂的表现发生改变，例如动画效果，使用position-absolute或position-fixed来实现它，也即是让其脱离文档流，不影响父级；

现代浏览器也可以使用CSS3
transition实现动画效果，比改变像素值来的高性能。
4. 避免不必要的复杂的css选择符，尤其是使用子选择器，或消耗更多的CPU去做选择器匹配。

5. 页面的元素适当定高，例如如果div内容可能有高度差异的动态内容载入； 页面刷新载入的时候，应避免页面元素的晃动、位移等，这些都是额外的重绘，会让你的CPU和风扇兴奋的

6. 图片：如果你的<img>不设定尺寸、同时外部容器没有定死高宽，则图片在首次载入时候，占据空间会从0到完全出现，左右上下都可能位移，发生大规模的重绘。

---

• 构建dom树的过程即根据html代码自上而下进行构建，当遇到script文件加载／执行会阻塞后面dom树的构建（javascript可能会改变dom树），而遇到css文件，不会阻塞dom树构建，会阻塞render树的构建。
• 当浏览器遇到需要加载资源的标签时（img、video等），不会等待资源加载完成，而是继续向后渲染。（当资源加载完毕时，浏览器会重新渲染这部分）

添加 3D 动画硬件加速的方法

.item {
  transform: translateZ(0);      /* 或者 will-change: transform; */
}

3d加速参考：https://www.cnblogs.com/rubylouvre/p/3471490.html