重新布局英文

此处需要首先说明一下网页从HTML文件变成屏幕上的画面所经历的过程：

其中第4步为布局排列（flow），第5步为绘制（paint），这两部加起来也就是我们通常所说的 渲染

本次主题所说的重排与重绘便是指网页重新布局排列和重新绘制，英文概念分别为： Reflow , Repaint ，也有些文章中称之为 回流与重绘

重绘与重排与我们的前端性能有什么关系呢？

在Web前端页面的生命周期中，在网页生成时，浏览器会至少渲染一次页面，并且，在用户访问页面过程中，还可能会不断触发重排和重绘，不管页面发生了重绘还是重排，都会影响到网页的性能，尤其是其中的重排，会使我们付出高额的性能代价，因此我们应尽量避免。

那么哪些操作会引发重排与重绘呢？

当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。

重排也叫回流，简单的说就是重新生成布局，重新排列元素。

以下情况会引发重排：

重排影响的范围：

由于浏览器渲染界面是基于流失布局模型的，所以触发重排时会对周围DOM重新排列，影响的范围有两种：

局部布局来解释这种现象：把一个dom的宽高之类的几何信息定死，然后在dom内部触发重排，就只会重新渲染该dom内部的元素，而不会影响到外界。

当一个元素的外观发生改变，但没有改变布局, 浏览器重新把元素外观绘制出来的过程，叫做重绘。

重排必定会引发重绘，但重绘不一定会引发重排。

重排的代价是高昂的，会破坏用户体验，并且让UI展示非常迟缓，重排重绘非常耗费资源，是导致网页性能低下的根本原因。

DOM变动和样式变动，都会触发重新渲染。但是，浏览器已经很智能了，会尽量把所有的变动集中在一起，排成一个队列，然后一次性执行，尽量避免多次重新渲染

如果写得不好，就会触发两次重排和重绘

我们应尽量减少重排，最简单的方式是： 1.减少重排次数；2.缩小重排范围

我们可以通过Chrome观察重排与重绘

打开开发者工具 => 点击Performance => 点击左侧小圆点 => 点击刷新页面 => 录制=>查看数据

room arrangement

布局，流程布置

"布局""Layout""布局""Layout"

布局、安排等，你要把这个词在哪里出现，这样的话意思会更准确的。