重绘与回流的优化策略
重绘:
节点发生改变而不影响布局。如visbility,color,background-color
回流:
页面的布局更新,一个Dom节点的回流会导致其子节点,父节点,祖先节点,以及紧随其后的节点发生回流。回流是影响性能的主要因素。
优化策略:
少使用以下属性读取:
读取下面属性时,浏览器会触发回流和重绘来确保获得正确的值,频繁使用的时候采用缓存
offsetTop offsetLeft offsetWidth offsetHeight
clientTop clientLeft clientWidth clientHeight
scrollTop scrollLeft scrollWidth scrollHeight
width height
css优化
1.避免使用table布局
2.在Dom树的最末端改变class
3.动画效果使用在绝对定位和fix定位上
4.避免使用css表达式
JS优化
1.避免频繁操作样式,最好一次性重写style样式
2.避免频繁的操作dom元素