共计 869 个字符，预计需要花费 3 分钟才能阅读完成。
咱们来讲一下页面的重排和重绘。
重排, 顾名思义就是重新排列元素重绘, 顾名思义就是从新绘制元素兴许这样解释，你还是不能了解，为了帮忙咱们记忆, 通过这个例子先来看一下页面展现在浏览器上的过程
在筹备好的 Rearrange-redraw.html 文件中，定义 div 和 p 两个元素，在头部增加 style 标签，作为外部样式表应用。
定义选择器 div，申明款式 width: 200px; height: 200px; background-color: orange;
定义选择器 p 申明款式 width: 300px;height: 300px;background-color: skyblue;
关上页面咱们看到内容显示了。
那么咱们写的 html 和 css 是如何被出现在页面上的呢？
其实, 首先浏览器会捕捉到 html 构造, 生成一个 html 树结构, 这个构造内的所有标签是没有款式呈现的, 只是表明了 标签和标签之间的父子关系而已
接下来, 浏览器还会拿到你写的 css 款式, 解析当前生成一个 css 树结构, 这个构造是没有和 html 联合, 只是一个 css 款式阐明的树状构造
再来, 浏览器就会把拿到的 html 树 和 css 树 相结合, 将两个树缓缓交融在一起, 组成一个 rander 树, 这外面就会把 标签和款式 联合在一起, 呈现出页面中的成果最初, 就是由浏览器来把这个 rander 树 一笔一笔的“画”在页面上, 咱们看到的页面就呈现了。晓得了页面展现在浏览器上的过程过程, 咱们再来聊一下重排和重绘当咱们通过前期的操作, 让页面中的节点产生了尺寸变动, 那么会因为一个元素的扭转而导致整个页面发生变化, 可能后续的元素地位都会产生扭转, 那么这个时候, 就会重新排列所有元素, 也就是说会触发重排, 也就是从新用 html 树 和 css 树 联合，去生成新的 rander 树，来进行新一次的绘制当咱们通过前期的操作, 让页面中的节点产生一些外观上的变动, 比方扭转背景色彩, 文字色彩, 边框色彩 的时候, 不会导致页面排列元素的变动, 只是以后一个节点发生变化, 对其余节点没有影响, 那么这个时候不须要重新排列元素, 只须要从新绘制以后这个节点即可, 这个行为叫做重绘