重绘与回流的优化策略

重绘:

节点发生改变而不影响布局。如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元素

全部评论

相关推荐

点赞 评论 收藏
转发
点赞 收藏 评论
分享
牛客网
牛客企业服务