何时发生重排？何时发生重绘？

预计阅读时间: 2 分钟

重排

重排的本质修改了布局树，导致重新计算布局，重新绘制。

所有对布局树的更改都会导致重排，以及所有对布局树的读取，都会导致重排。

更改，异步重排，下一次渲染时才会发生。

dom.style.width = '100px';
dom.style.height = '100px';
dom.style.border = '1px solid red';
// 只会触发一次重排

读取，同步重排，立即发生。

dom.style.width = '100px';
dom.clientHeight; // 读取, 如果当读取时，它不重排的话，会导致读取到脏数据
dom.style.height = '100px';
// 会触发两次重排

技巧

dom.style.width = '0px';
dom.style.trasition = '0.5s';
dom.clientHeight;
dom.style.width = '100px';

布局树和DOM树是不是一一对应的？

不是，布局树是DOM树的一个子集，只包含可见元素。

比如：display: none的元素不在布局树中，或者\<head\> \<script\>等不可见元素不在布局树中。

还有，比如说有些元素可能会产生多个布局树节点 \<li\>, \<table\>, \<tr\>, \<td\>等。

块盒里面是不能直接出现内容的，内容必须要被包裹在行内盒里面，所以块盒里面的内容会被包裹在一个匿名的行内盒里面。

都是针对：可见样式

对所有非几何信息的读取所造成的可见样式的变化，都会导致重绘。

字体类型，大小会导致重排, 因为内容被行内盒包裹，行内盒的大小变化，会导致块盒的大小变化，进而导致重排。

outline 和 border 的本质区别：都是绘制边框，一个是内边框，一个是外边框，但是 outline 不会影响布局，不会导致重排，不在布局树中。

ON THIS PAGE