reflow-repaint

1.reflow:是浏览器的布局引擎根据元素的样式和几何属性来计算元素的布局（位置和大小）时触发的过程

Reflow（回流）通常发生在构建或更新渲染树（Render Tree）的过程中。

渲染树是浏览器用于绘制网页内容的抽象结构，它包括了所有可见的DOM元素，并且每个元素都与其样式和布局信息相关联。

Reflow 是浏览器的布局引擎根据元素的样式和几何属性来计算元素的布局（位置和大小）时触发的过程。在这个过程中，浏览器会遍历DOM树并计算每个元素的几何属性，以确保它们正确地布局在浏览器视窗中。

当页面中的元素发生变化时，浏览器需要重新计算整个页面的布局，这个过程称为回流。回流会涉及到页面中所有元素的重新计算和重新布局，因此是一种比较耗费性能的操作。

每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树

回流一定会触发重绘，而重绘不一定会回流;在性能优先的前提下，性能消耗>回流>重绘。

回流涉及到整个页面布局的重新计算和重新布局，而重绘只涉及到元素的样式重新绘制。

尽可能减少回流对于提高页面性能至关重要。

回流这一阶段主要是计算节点的位置和几何信息,当页面布局和几何信息发生变化的时候，就需要回流

浏览器回流是一项昂贵的计算过程，因为它需要遍历文档树，计算每个受影响元素的位置和大小。因此，频繁的回流操作可能会导致页面性能下降。优化网页以减少回流的次数和成本是提高页面性能的重要一步。

比如以下情况:

页面渲染初始化
浏览器窗口大小改变（因为回流是根据视口的大小来计算元素的位置和大小的）
添加、删除可见的dom元素
元素的位置改变
元素的尺寸改变（包括外边距、内边框、边框大小、高度和宽度等）,width/height/border/margin/padding 的修改，如 width=778px；
设置style属性
改变文字大小
添加/删除样式表
操作class属性
内容的改变，(用户在输入框中写入内容也会,比如文本变化或图片被另一个不同尺寸的图片所替代)
改变窗口大小：因为窗口大小的改变会影响页面的布局计算。
计算某些属性值：包括offsetWidth、offsetHeight、clientWidth、clientHeight、scrollWidth、scrollHeight等属性的值，因为这些属性的值需要浏览器重新计算元素的布局。
修改元素的类名：因为改变元素的类名可能会导致元素的样式发生变化，从而影响元素的尺寸或布局。
修改元素的内容：包括改变元素的文本内容、innerHTML、appendChild等操作，因为这些操作可能会改变元素的尺寸或布局。
改变元素位置或尺寸：包括改变元素的margin、padding、border、width、height等属性的值。

浏览器优化策略:

浏览器会维护一个队列，把所有引起重排、重绘的操作放入这个队列，等队列中的操作到了一定数量或时间间隔，浏览器就会flush队列，进行一个批处理。这样让多次的重排重绘变成一次。

避免频繁更改样式：不管是使用CSS类还是内联样式，频繁更改样式都可能导致回流。尽量避免在短时间内多次更改元素的样式，可以考虑在多个更改之间使用requestAnimationFrame来优化。
使用 CSS Transforms：对于需要动画或平移的元素，使用CSS Transforms而不是改变元素的位置属性，可以减少回流次数。
批量修改 DOM：如果需要多次修改DOM，尽量在批量操作中完成，而不是分散的单个操作。可以合并多次对DOM和样式的修改，然后一次处理掉。
对于复杂动画效果,使用绝对定位让其脱离文档流设置动画元素 position 属性为 fixed 或者 absolute：由于当前元素从 DOM 流中独立出来，因此受影响的只有当前元素，元素 repaint。
减少查询几何属性：在JavaScript中减少查询元素的几何属性，因为这些操作可能会引发回流。

定义：

通过构造渲染树和回流阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(位置、大小)，浏览器的重绘（Repaint）是指在不影响元素在文档流中位置的情况下更新元素的视觉外观。重绘不会改变元素的几何属性，只会重新绘制元素的样式，以确保元素在视觉上与之前相同。