重绘与回流的优化策略

重绘:

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

全部评论

相关推荐

自学java狠狠赚一...:骗你点star的,港卵公司,记得把star收回去
点赞 评论 收藏
分享
不愿透露姓名的神秘牛友
07-02 17:28
25届每天都在焦虑找工作的事情0offer情绪一直很低落硬撑着面了一个岗位岗位有应酬的成分面试的时候hr给我出各种场景题问的问题比较犀利 有点压力面的感觉感觉有点回答不上来本来就压抑的情绪瞬间爆发了呢一瞬间特别想哭觉得自己特别没用没绷住掉眼泪了事后想想觉得自己挺有病的 真的破大防了
喜欢唱跳rap小刺猬...:我觉得没关系吧,之前有一次面试leader给我压力面,我顶住了压力,结果入职的时候发现组里氛围很差,果断跑路。其实从面试就能大概看出组的情况,面试体验好的组倒是不一定好,但是面试体验不好的组。。。就很难说
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务