回流和重绘

1.什么叫回流和重绘?

当页面首次加载的操作叫做布局和绘制,重新布局叫做回流,重新绘制叫做重绘。

2.怎样会导致回流和重绘

导致回流:

当页面DOM节点的位置,尺寸,隐藏发生了改变,页面会重新计算尺寸,布局,因此导致了回流。

导致重绘:

当部分元素DOM节点的外观(比如说颜色color)发生改变时,页面会重新绘制(发生改变的部分元素)

频繁的回流和重绘会导致频繁的页面渲染,从而导致cpu使用过量,引起页面卡顿

3.怎样减少回流

避免循环操作DOM,而是新建一个DOM节点,在这个DOM节点上操作,然后在导入到DOM中。

避免逐项的更改style样式,而是一次性将其定义好,定义在一个class中,做一次性加载渲染

将复杂的元通过绝对定位或者固定定位设置位置,使其脱离标准流,从而避免回流导致的布局错乱

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

推荐阅读更多精彩内容

  • 回流和重绘可以说是每一个web开发者都经常听到的两个词语,可是可能有很多人不是很清楚这两步具体做了什么事情。最近有...
    java菜阅读 3,301评论 0 1
  • 回流(reflow): 当render树(渲染树)中的一部分或者全部因为大小边距等引起结构变化 而需要重建的过程叫...
    伍六七_3141阅读 2,286评论 0 2
  • 第三次作业拖沓了这么久,还是在课程结束前交出来了。其实中途是想选择《彩色城堡》,可是连续画了三天,涂涂改改,怎么都...
    A_xie阅读 2,972评论 1 2
  • 所有的故事都会有答案,所有的付出都会被善待。那些暗自积累的德行犹如春起之苗,不见其增,日有所长。 只是在其茂盛之日...
    四夕清荷阅读 1,098评论 0 0
  • 今天资源没有完成 不过很开心呐 明天睡个好觉 收拾收拾!挺好!
    文萍_阅读 832评论 0 0