什么是重排或回流、重绘？如何减少重排？

什么是重排、重绘？

首先我们需要先了解浏览器渲染机制，浏览器渲染引擎是浏览器的核心组成部分之一，它负者将网页代码(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。。。尽量将多次操作合并成一次。

2.批量操作DOM
3.避免多次触发布局