共计 1613 个字符，预计需要花费 5 分钟才能阅读完成。
什么是重排、重绘？
首先咱们须要先理解浏览器渲染机制，浏览器渲染引擎是浏览器的外围组成部分之一，它负者将网页代码(html,CSS，javaScript) 转换为可视化的内容。
浏览器在渲染页面时，大抵分为解析 HTML、解析 CSS、构建 DOM 树和 CSS 树、合并 DOM 树和 CSS 树、布局和绘制，以及解决用户交互等。
- 解析 HTML：浏览器首先会获取 HTML 文件，而后从上到下逐行解析 HTML 文档，生成 DOM（Document Object Model）树。DOM 树是一个节点树，它示意了文档的构造，使得开发者能够不便地操作和批改文档的内容和构造。
- 解析 CSS：在解析 HTML 的同时，浏览器也会解析 CSS 文件，生成 CSSOM（CSS Object Model）树。CSSOM 树蕴含了文档的款式信息，如元素的色彩、大小、地位等。
- 构建渲染树：浏览器将 DOM 树和 CSSOM 树合并，生成渲染树（Render Tree）。渲染树只蕴含须要显示的节点和这些节点的款式信息。
- 布局：浏览器依据渲染树，计算每个元素的地位和大小，这就是布局（Layout）过程。
- 绘制：最初，浏览器依据渲染树和计算出的布局信息，将每个元素绘制到屏幕上，这就是绘制（Painting）过程。
1. 解析 html 生成 DOM 树，解析 css，生成 CSSOM 树，将 DOM 树和 CSSOM 树联合，生成渲染树；2. 依据渲染树，浏览器能够计算出网页中有哪些节点，各节点的 CSS 以及从属关系 - 回流
3. 依据渲染树以及回流失去的节点信息，计算出每个节点在屏幕中的地位 - 重绘
4. 最初将失去的节点地位信息交给浏览器的图形处理程序，让浏览器中显示页面在渲染过程中，浏览器还会进行各种优化，以进步渲染速度和效率。例如，浏览器会尽可能地并行加载和解析 HTML、CSS 和 JavaScript 文件，以缩小等待时间。此外，浏览器还会应用缓存、预加载等技术，以进步渲染速度。这些优化和并行处理使得浏览器的渲染速度更快，用户体验更好。
重排
重排 (reflow)：当页面的元素的地位、尺寸等产生扭转时，浏览器会从新计算该元素的几何属性并摆放到正确的地位的过程叫做重排。个别页面首次渲染、带有动画的元素、增加或删除性能、图片放大放大、浏览器扭转时都可能会触发重排。 重排和回流其实是一回事，重排也叫回流。
要缩小重排，能够采取以下策略：
批量批改元素：尽可能减少单个元素的批改次数，能够将屡次批改合并成一次，缩小浏览器的重排次数。
防止频繁查问布局信息：在 JavaScript 中，防止频繁查问布局信息，如 offsetWidth 和 offsetHeight，因为这些查问会导致浏览器强制同步，减少重排次数。
应用文档片段：如果须要频繁地向页面中增加大量 DOM 节点，能够先将他们增加到文档片段中，最初再对立插入文档中，这样能够缩小重排的次数。
应用 CSS 动画和过渡：在须要实现动画成果时，应用 CSS 动画和过渡，而不是 JavaScript 来操作元素款式，因为 CSS 动画和过渡能够由浏览器的合成线程来解决，不会触发重排。
应用 CSS Grid 和 Flex 布局：这两种布局形式能够缩小对元素地位的频繁调整，从而缩小重排。
防止 table 布局：table 属性变动应用会间接导致布局重排或者重绘，因而尽量减少 table 的应用。
请留神，尽管上述策略有助于缩小重排，但在某些状况下，重排是必要的，例如当页面的内容或布局发生变化时。因而，在优化重排时，须要衡量性能和用户体验，确保页面可能正确地出现并响应用户的操作。
缩小重排和重绘
1. 合并款式
缩小重排的次数，比方给一个元素增加多个 css 款式属性，每一个属性都会造成重排回流，应将屡次操作合并成一个。
例如：border、padding、margin。。。尽量将屡次操作合并成一次。
<style>
p{
padding:10px;
margin: 0px;
border:1px solid red
}
</style>2. 批量操作 DOM
3. 防止屡次触发布局
