标签：浏览器 background DOM 元素 渲染 回流 重绘 属性

浏览器渲染html页面的流程基本上分为四步：

1、计算CSS样式
2、构建Render Tree
3、Layout 定位坐标和大小
4、正式开始渲染

那么，首先要提出两个重要概念，一个是Relfow，一个是Repaint。

重绘：当我们对DOM的修改导致了样式变化，也就是说DOM的CSS样式发生改变，但是几何属性并没有改变，比如只是修改了DOM的颜色、背景色时，浏览器不需要重新计算元素的几何属性，直接为该元素绘制新的样式。

回流：当我们对DOM的修改改变了DOM的几何尺寸，比如修改了元素的宽、高或隐藏元素等，那么浏览器需要重新计算元素的几何属性；因为该元素相邻元素的几何属性和位置都会受到影响。然后再将计算的结果重新绘制出来，这个过程称为回流。

我们知道，网页生成的时候，至少会渲染一次。刷新和回退都会不断的重新渲染，每次的重新渲染必然会引发回流+重绘，有时候只是重绘。

回流必然引发重绘，但是重绘则不一定会引起回流。

如果重回和回流在设置节点时频发出现，那么很大程度上影响页面的性能。回流所需的成本比重绘高的多，改变父节点里的子节点，会导致父节点的一系列回流。

常见引起回流的属性和方法

1、添加或者删除可见的DOM元素；

2、元素尺寸的改变，margin、padding、border、width、height

3、内容变化，比如用户在input框中输入文字

4、浏览器窗口尺寸的改变——resize事件发生时

5、计算offsetWidth 或者offsetLeft属性

6、设置style的属性值

常见引起重绘的属性和方法

color、border-style、visibility、background、background-image、background-size、background-position、background-repeat、border-radius、box-shadow、outline、outline-color、outline-style、outline-width

如何减少回流、重绘

使用transform代替top、使用visibility代替display：none，因为前者会引起重绘而后者会引起回流。

不要把DOM节点作为循环变量使用。

不要使用table布局，table基本都是回流。

动画实现的速度越快，回流次数越多。

CSS选择符从右向左匹配查找，避免节点层级过多。

标签：浏览器,background,DOM,元素,渲染,回流,重绘,属性
来源： https://blog.51cto.com/11365839/2379605

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。