JS里的重绘和回流

对于重绘和回流的概念不是很清晰,查看了许多博文,在这里说一下自己的理解!!
欢迎同学们与我交流。
1、重绘概念

重绘:对元素的背景颜色,字体样式样式进行设置,如:font-weight、
color、background-color.回流一定是重绘,重绘不一定是回流

2、回流的概念

回流:因为元素的尺寸,布局,隐藏等改变而需要重新对其进行构建的操作(重构页面)。
包括:
1、对font-size,margin,padding 等可以改变宽高和布局的style属性(尺寸、内容、距离)的改变。
2、添加、删除(可见元素)的dom操作。
3、用户操作 改变浏览器窗口大小或是字体等
4、对offset**** 、scroll***、client***、width/height的改变(***=Top/Left/Width/Height)

3、如何减少重绘和回流

1、想要改变元素样式,通过改变元素的 class 名 (尽可能在 DOM 树的最末端改变class)
2、避免设置多项内联样式,因为每个都会造成回流,样式应该合并在一个外部类,这样当该元素的class属性可被操控时仅会产生一个reflow。
3、在操作offset**** 、scroll***、client***、width/height等属性时,先用变量先进行存储,在进行操作。

重绘和回流也是为什么要减少dom操作的原因之一。

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,018评论 25 708
  • 页面重绘和回流以及优化 在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解,页面是怎么把html结合css等显...
    sponing阅读 2,085评论 1 11
  • 出差是很多人工作上的一个坎。很多女性甚至男性因出差放弃某些工作岗位。 出差这事,年轻的刚开始工作的人是挺喜欢的,而...
    木清琳阅读 4,291评论 3 13
  • 一念之间 人生有太多的事取决于一念之间。一念起,善心油生,一念灭,恶意肆起;一念起...
    范菲阅读 1,017评论 0 1
  • 第十三章 “说说吧怎么回事?”吴亦凡冷着一张脸说到 “嗯……老师……我,我就是喜欢鹿晗,想跟他在一起”女生红着脸对...
    顾凯风阅读 613评论 0 1