重绘与回流——影响浏览器加载速度

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

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操作的原因之一，在本博客文章《dom tree和render tree》中会有详解。