本文已参与「新人创作礼」活动，一起开启掘金创作之路。
DOM 的变化影响到了页面元素的几何属性比如宽高，浏览器重新计算元素的几何属性，其他元素的几何属性也会受到影响，浏览器需要重新构造渲染树，这个过程称之为重排，浏览器将受到影响的部分重新绘制在屏幕上 的过程称为重绘。
引起重排重绘的原因有：添加或者删除可见的 DOM 元素， 元素尺寸位置的改变 浏览器页面初始化， 浏览器窗口大小发生改变，
重排一定导致重绘，重绘不一定导致重排，
减少重绘重排的方法有： 不在布局信息改变时做 DOM 查询， 使用 csstext,className 一次性改变属性 使用 fragment 对于多次重排的元素，比如说动画。使用绝对定位脱离文档流，使其不影响其他元素
重绘：当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器根据元素的新属性重新绘制 ，使元素呈现新的外观叫做重绘。 重排（回流）:当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程。 避免重绘重排具体方案
- CSS 使用transform替代top等位移 使用visibility替换display:none 避免使用table布局 尽可能在DOM树的最末端改变class 避免设置多层内联样式，尽量层级扁平 将动画效果应用到position属性为absolute或fixed的元素上 避免使用CSS表达式 将频繁重绘或者回流的节点设置为图层，比如video,iframe CSS3硬件回事（GPU加速），可以是transform: translateZ(0),opacity,filters,will-change,will-change提前告诉浏览器元素会发生什么变化
- JS 避免频繁操作样式，合并操作 避免频繁操作DOM,合并操作 防抖节流控制频率 避免频繁读取会引发回流/重绘的属性，比如上面的C O S 属性 对具有复杂动画的元素使用绝对定位
