重排和重绘的区别,什么情况下会触发这两种情况

简介: 重排和重绘的区别,什么情况下会触发这两种情况

重排(reflow)和重绘(repaint)是两种不同的操作,它们在网页渲染过程中发生。


重排是指当元素的布局和几何属性发生改变时,浏览器需要重新计算元素的几何属性,然后重新布局所有相关元素的过程。这个过程会涉及到重新计算元素的位置、大小以及其他相关属性,所以重排是一种比较昂贵的操作,会消耗较多的计算资源和时间。


重绘是指当元素的样式(如颜色、字体、背景等)发生改变时,浏览器需要重新渲染这些元素的过程。在重绘的过程中,浏览器并不会重新计算元素的布局和几何属性,而只是把新的样式绘制到元素上。相比重排,重绘是一种比较轻量级的操作。


重排和重绘的触发条件是不同的:


重排:


添加、删除、修改 DOM 元素的结构

修改 DOM 元素的位置、尺寸、边距等几何属性

修改浏览器窗口的大小(Resize)

内容的变化,比如文本内容的改变、图片的加载完成等

重绘:


修改 DOM 元素的样式,如颜色、字体、背景等

需要注意的是,重排和重绘是紧密相关的,一次重排往往会伴随着多次重绘。因为在重排过程中,浏览器会重新计算元素的几何属性,而在重绘过程中,浏览器会把新的样式绘制到元素上。所以尽量减少重排和重绘操作,可以提高页面的性能和响应速度。


相关文章
|
22天前
|
存储 JavaScript 前端开发
重排和重绘
重排和重绘
17 0
|
22天前
|
JavaScript 前端开发 UED
JavaScript中重排与重绘的区别及触发条件
JavaScript中重排与重绘的区别及触发条件
32 1
|
22天前
重排和重绘的区别,什么情况下会触发这两种情况?
重排和重绘的区别,什么情况下会触发这两种情况?
45 0
|
11月前
|
缓存 JavaScript 前端开发
浏览器:重绘(repaint)与回流/重排(reflow)
浏览器:重绘(repaint)与回流/重排(reflow)
66 0
|
6月前
|
移动开发 JavaScript 前端开发
重绘和重排
重绘和重排
51 0
|
7月前
|
前端开发 JavaScript
重排和重绘的区别?
重排和重绘的区别?
|
7月前
|
缓存 前端开发 JavaScript
重绘与重排(回流)
重绘与重排(回流)
39 0
|
10月前
|
JavaScript 前端开发 异构计算
【怎么理解回流跟重绘?什么场景下会触发?】
【怎么理解回流跟重绘?什么场景下会触发?】
|
10月前
|
缓存 JavaScript 前端开发
【怎么理解回流与重绘?以及触发场景】
【怎么理解回流与重绘?以及触发场景】
113 0
|
Web App开发 JavaScript 前端开发
页面运行中事件频繁触发会阻塞页面吗?
之前看`防抖`和`节流`的时候,看到短时间内大量的事件触发会引起浏览器卡死,浪费浏览器性能,那么为什么事件触发会引起阻塞页面的情况呢?引起页面阻塞的原因真的是因为事件触发太多了吗?

热门文章

最新文章