重绘：重新绘制，当修改颜色、替换背景等不会影响布局，进而导致重新渲染页面，重绘不会导致回流 回流：增加、删除dom节点，修改元素宽高等，会影响页面布局，进而导致重新构建dom树而再次渲染，回流肯定会导致重绘 优化方案： 1.避免使用css表达式，可能会导致回流，如left：expression(document.body.offsetWidth - 180 “px”) 2.避免使用table布局，稍微一点改动，就会导致重绘和回流 3.创建dom节点时，使用document.fragment创建 4.避免频繁操作dom，合并多次修改为一次，如 5.避免频繁读取会引发回流或重绘的属性，js获取元素时，采用缓存，不要一直获取，如for渲染（浏览器大多是此阿勇队列机制批量更新布局，浏览器会把修改操作放在队列中，至少一个浏览器刷新即1帧（16.66ms）才会清空队列，但当获取布局信息时，队列中可能会有这些属性或方法返回值的操作，即使没有，浏览器也会强制清空队列，触发回流和重绘，进而确保返回正确的值） 6.vue的虚拟dom，key是虚拟DOM对象的标示，当数据变化时，vue会根据【新数据】生成【新的虚拟DOM】的差异比较，规则如下： a. 若虚拟DOM中的内容没变，直接使用之前的真实DOM； B. 若虚拟DOM内容变了，则生成新的真实DOM，替换原真实DOM； C. 旧虚拟DOM未找到新虚拟DOM相同的key，创建新的真实DOM，随后渲染页面； 7.对具有复杂动画的元素采用绝对定位，使其脱离文档流 8.使用visibility替代display:none，前者重绘，后者引发回流 9.渲染优化避免节点层级过多（css选择符从右往左查找，避免节点层级过多，如.nav .item .title, 浏览器渲染过程大概是，找到所有的.title，沿着.title的父元素查找.item，然后再查找.nav。中途找到了符合匹配规则的节点就加入结果集，则不在便利该跳路径，从下一个a开始重新按照这个规则查找匹配），避免多层内联样式（先加载dom） 10.多个属性尽量简写，如：border可以替代为border-width、border-color、border-style
