js中的重绘和回流，js中的重绘和回流是什么

vif触发回流还是重绘

回流一定会触发重绘，而重绘不一定会回流。回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流。

相关问答

Q1: js中的重绘与重排的区别

重排： 部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算。这被称为重排，注意这里至少会有一次重排——初始化页面布局。

重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。 重绘不会带来重新布局，并不一定伴随重排 。重排一定会引起重绘 。

重排 一定会引起 重绘 ，而 重绘 不一定会引起 重排 ， 重绘 的开销较小， 重排 的代价较高。在日常开发过程中应该尽量减少 重排 和 重绘 操作。

重排必定会引发重绘，但重绘不一定会引发重排。重排的代价是高昂的，会破坏用户体验，并且让UI展示非常迟缓，重排重绘非常耗费资源，是导致网页性能低下的根本原因。DOM变动和样式变动，都会触发重新渲染。

在js中，渲染真实 DOM 的开销是非常大的， 比如我们修改了某个数据，如果直接渲染到真实 DOM ， 会引起整个 dom 树的重绘和重排。

重绘和重排何时重绘、重排？重绘并不一定导致重排，比如修改某个元素的颜色，只会导致重绘；而重排之后，浏览器需要重新绘制受重排影响的部分。

Q2: 页面重绘与回流

1、在这个过程中，回流与dom树和渲染树有关，重绘与渲染树有关。

2、在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘。回流 ：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置。

3、回流与重绘 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(其实我觉得叫重新布局更简单明了些)。每个页面至少需要一次回流，就是在页面第一次加载的时候。

4、重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。触发重绘的条件：改变元素外观属性。如：color，background-color等。

5、减少回流与重绘的措施 操作DOM时，尽量在低层级的DOM节点进行操作。不要使用table布局，一个小的改动可能会使整个table进行重新布局。使用CSS的表达式。

Q3: 会导致页面回流的操作

DOM的增删行为 比如你要删除某个节点，给某个父元素增加子元素，这类操作都会引起回流。如果要加多个子元素，最好使用documentfragment。

（1）使用DocumentFragment进行缓存操作，引发一次回流和重绘 （2）使用display：none，只引发两次回流和重绘。道理跟上面的一样。

在页面初始渲染阶段，回流不可避免的触发，可以理解成页面一开始是空白的元素，后面添加了新的元素使页面布局发生改变。当渲染树的一部分因为元素的规模尺寸、布局、隐藏等改变需要重新构建的操作，会影响布局的操作。

eg. base内容超过100%。此时会触发回弹滚动，导致页面被截断。eg. base内容超过100%。此时向相反方向拉会滚动内容，内容不会被截断。

就是在生成render Tree 的时候，有的CSS涉及到了HTML的尺寸（width/height）、布局改变、隐藏等。详细的可以去搜一下怎么会造成回流。

当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。

Q4: 重绘与重排

1、重排： 部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算。这被称为重排，注意这里至少会有一次重排——初始化页面布局。

2、重绘。背景图替换页面属于重绘操作，只涉及到元素外观的改变，不会改变页面的布局结构。当背景图被替换时，浏览器会重新绘制受影响的区域，以反映新的背景图像。

3、重绘是指页面中某些元素发生了不影响布局的变化时（如颜色改变），浏览器重新绘制的过程。此时由于只需要UI层面的重新像素绘制，因此损耗较少。

4、重绘和重排的关系：在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。重排必定会引发重绘，但重绘不一定会引发重排。

5、重排 ：当渲染树的一部分或全部更新而导致网页结构或节点尺寸发生改变时，都会导致重排。例如可见元素节点的添加和删除、改变元素的尺寸(元素宽、高、内边距大小、边框大小)、浏览器窗口大小发生改变等。

6、重排一定会引起重绘 。下面是常见的触发重排的操作：将多次改变样式属性的操作合并成一次操作。 同一个DOM的多个属性改变可以写在一起（减少DOM访问，同时把强制渲染队列刷新的风险降为0）。

Q5: 前端性能优化总结(一)-js、css优化

访问DOM会影响浏览器性能，修改DOM则更耗费性能，因为他会导致浏览器重新计算页面的几何变化。通常的做法是减少访问DOM的次数，把运算尽量留在JS这一端。

方法有很多种，以下请参考：尽量减少对服务端的数据请求，因为每一次的请求需要消耗大量的资源，而且产生页面的等待，对用户的UI体验特别差，因此，可以将多次的数据请求合成为一次，获取后再次分割进行保存，然后再使用。

合并图片。当图片较多时，可以合并为一张大图，从而减少http请求数。经常变化的图片可能不太合适，变化相对稳定的就可以考虑。合并大图除了能减少http请求数外，还可以充分利用缓存来提升性能。

那如何才能优化前端性能？归纳为三步 关键资源字节数 字节数也就是通常说的减少资源文件（js、css、image、video...）的大小。

js中的重绘和回流的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js中的重绘和回流是什么、js中的重绘和回流的信息别忘了在本站进行查找喔。