重绘与回流

回流:引起Dom树结构变化,页面布局变化的行为

重绘:只是样式改变,不会引起Dom树变化,页面布局变化的行为

1.回流必定引起重绘,但重绘不一定会伴随回流

如何优化代码减少回流重绘过程

主要思想就是减少对Dom树的操作次数和减少一些具有影响性的样式请求

1.合并多次对样式的修改,如改变className

2.动态改变样式时使用cssText

3.将要改变的元素节点,先隐藏掉,改变后再显示

4.元素节点本身是处于隐藏状态,通过cloneNode或者replaceChild将其展示,原理与第3点相同

5.不要经常访问会引起浏览器flush队列的属性,如要确要访问,使用缓存即可

6.让元素脱离动画流,减少render树的规模

7.牺牲平滑度来换取速度

8.避免使用table布局

9.IE中避免使用Javascript表达式

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。