重排和重绘，讲讲看

[问答题]

重排和重绘，讲讲看

查看答案及解析

拯救世界的光太郎

【前端性能优化之重排和重绘 - SegmentFault 思否】

https://segmentfault.com/a/1190000016990089

简单总结：

重排：

当DOM的变化引发了元素几何属性的变化，比如改变元素的宽高，元素的位置，导致浏览器不得不重新计算元素的几何属性，并重新构建渲染树（渲染树：记录所有可见元素以及适配的CSS样式规则），这个过程称为“重排”。

重绘：

完成重排后，要将重新构建的渲染树渲染到屏幕上，这个过程就是“重绘”。

简单的说，重排负责元素的几何属性更新，重绘负责元素的样式更新。而且，重排必然带来重绘，但是重绘未必带来重排。比如，改变某个元素的背景，这个就不涉及元素的几何属性，所以只发生重绘。

重绘重排和性能优化有很大的关系，建议大家看一下我给的链接，讲的很详细👍🏻

编辑于 2021-03-06 22:59:45 回复(0)

东东dong

重排：根据渲染树中每个渲染对象的信息，计算出各自渲染对象的信息，并将其安置在页面中正确的位置上。

引起重排：页面首次渲染、浏览器窗口大小的改变，元素的尺寸或者位置发生改变，元素的内容发生改变，元素字体发生改变，添加或者删除可见的dom元素，设置style属性等

重绘：页面中元素样式改变并不影响在文档中的位置，例如：改变了字体的颜色

重排必定重绘，重绘不一定重排

发表于 2020-07-23 12:00:06 回复(0)

火柴哥

重排实际上就是根据渲染树中每个渲染对象的信息，计算出各自渲染对象的几个信息（DOM对象的位置和尺寸大小），并将其安置在界面中的正确位置上所以总结会引起重排的操作：页面的首次渲染，浏览器的窗口大小改变，元素尺寸或位置发生改变，元素内容改变，元素字体大小改变，添加或者删除可见的DOM元素，设置style属性等 重绘就是当页面中的元素样式改变但并不影响它在文档中的位置，例如改变了字体颜色，浏览器会将新的样式赋予元素并重新绘制的过程叫重绘

发表于 2020-06-10 21:35:57 回复(0)