DOM的重绘和回流及代码性能优化

1.DOM的重绘和回流Repaint&Reflow

---

1.1重绘：元素样式的改变(但宽高、大小、位置等不变)

---

如outline、visibility、color、background-color等

1.2回流：元素的大小或者位置发生了变化(当页面布局和几何信息发生变化的时候)，触发了重新布局，导致渲染树重新设计布局和渲染。

---

如添加或删除可见的DOM元素；元素的位置发生变化，元素的尺寸发生变化，内容发生变化(比如文本变化或者图片被另一个尺寸不一样的图片替换);页面一开始渲染的时候(这是无法避免);因为回流是根据视口的大小来计算元素的位置和大小的，所以浏览器的窗口尺寸变化也会引发回流。

注意回流一定会触发重绘，重绘不一定会回流。

2.前端性能优化：避免DOM的回流

---

2.1放弃传统操作DOM，基于vue/react开始数据影响视图模式

---

可通过vue或react等框架中的virtual dom/dom diff，避免对DOM的直接操作。

2.2分离读写操作(现代的浏览器都有渲染队列的机制)

---

style样式

body代码

2.3样式集中改变

---

style样式

body代码

2.4缓存布局信息

---

body代码

2.5元素批量修改

---

body代码

2.6动画效果应该使用position属性absolute或者fixed(脱离文档流)

---

如果使用margin等属性对元素进行定位，会对其他元素的位置造成影响并导致回流。而使用position属性进行定位的元素能够脱离文档流，在一个新的平面上操作，虽然也会引起回流，但是不会影响其他元素，性能更好。

2.7CSS3硬件加速(GPU加速)

---

比起考虑如何减少回流、重绘，我们更期望的是，根本不需要回流和重绘；transform、opacity、filters...这些属性会触发硬件加速，不会引发回流和重绘。
通常用的比较多的是transform(能用transform改变的样式绝对不用普通样式)。比如用translate属性来移动元素不会引起回流。
缺点：用的多会导致占用大量内存，性能消耗严重。

2.8牺牲平滑度换取速度

---

简单地说就是动画总移动100px的情况下，每一秒钟移动1px，平滑度高，但是会引发100次回流；每一秒钟移动10px，平滑度相对较差，但是只会引起10次回流。当电脑比较快时可取前者，电脑较慢应取后者。

2.9避免使用table布局

---

由于table布局要一层一层的嵌套，添加完底层样式，才开始往外一层一层添加样式，不仅不好写样式，而且不利于DOM的性能优化。