CSS的重绘与回流？

浏览器渲染浏览器在渲染页面的时候，大致是以下几个步骤：解析html生成DOM树，解析css，生成CSSOM树，将DOM树和CSSOM树结合，生成渲染树；根据渲染树，浏览器可以计算出网页中有哪些节点，各节点的CSS以及从属关系 - 回流根据渲染树以及回流得到的节点信息， 计算出每个节点在屏幕中的位置 - 重绘最后将得到的节点位置信息交给浏览器的图形处理程序，让浏览器中显示页面回流回流：英文叫reflow，指的是当渲染树中的节点信息发生了大小、边距等问题，需要重新计算各节点和css具体的大小和位置。例：在css中对一个div修饰的样式中，使用了宽度50%，此时需要将50%转换为具体的像素，这个计算的过程，就是回流的过程。 容易造成回流的操作：1、布局流相关操作盒模型的相关操作会触发重新布局定位相关操作会触发重新布局浮动相关操作会触发重新布局2、改变节点内的内容改变节点的结构或其中的文本结构会触发重新布局3、csswidth 、height 、 padding、 border、margin、position、top、left、bottom、right、float、cleartext-align、vertical-align、line-height、font-weigh、tfont-size、font-family、overflow、white-space重绘重绘：英文叫repaint，当节点的部分属性发生变化，但不影响布局，只需要重新计算节点在屏幕中的绝对位置并渲染的过程，就叫重绘。比如：改变元素的背景颜色、字体颜色等操作会造成重绘。回流的过程在重绘的过程前面，所以回流一定会重绘，但重绘不一定会引起回流。容易造成重绘操作的css：color、border-style、border-radius、text-decoration、box-shadow、outline、background每次回流都会对浏览器造成额外的计算消耗，所以浏览器对于回流和重绘有一定的优化机制。浏览器通常都会将多次回流操作放入一个队列中，等过了一段时间或操作达到了一定的临界值，然后才会挨个执行，这样能节省一些计算消耗。但是在获取布局信息操作的时候，会强制将队列清空，也就是强制回流，比如访问或操作以下或方法时：offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTopscroll、Leftscroll、Widthscroll、Heightclient、Topclient、Leftclient、Widthclient、Heightget、ComputedStyle()这些属性或方法都需要得到最新的布局信息，所以浏览器必须去回流执行。因此，在项目中，尽量避免使用上述属性或方法，如果非要使用的时候，也尽量将值缓存起来，而不是一直获取。

DreamCoders/CoderGuide

内容风险标识

评论 (0)

DreamCoders/CoderGuide .gitee-modal { width: 500px !important; }

内容风险标识