回流和重绘

减少重绘和回流的方法:

• 用vue /react 框架,以虚拟DOM代替真实DOM,最终可以减少DOM回流的次数,

• 当代浏览器都会有一个渲染队列,连续的改变元素的样式,比如width,height,margin等,最终只会引发一次回流,但是若是在中间进行了读取元素的样式,会引发多次的回流,故分离读写很重要,

• 用createElementFragment

• 用拼接字符串的形式对DOM进行

• 事件委托

• 动画要应用到脱离文档流的元素上面, 防止文档流整体的重排

• css硬件加速,修改基于transform属性,transform不会引发元素回流,但是有兼容性

• 防抖节流

• requestAnimationFrame实现动画代替定时器动画