区分回流和重绘，并举例说明两者触发的条件

回流（Reflow）和重绘（Repaint）是浏览器渲染页面时的两个重要概念，它们的区别和触发条件如下：

回流（Reflow）：

回流是指浏览器为了重新渲染部分或全部页面布局而进行的计算过程。当页面中的部分或全部元素的尺寸、结构、布局、隐藏状态等发生变化时，浏览器需要重新计算元素的几何属性（例如位置、大小、布局）并重新构建渲染树（Render Tree），这个过程就称为回流。回流的成本较高，会触发浏览器重新布局，因此应尽量避免过于频繁的触发。

回流的触发条件：

• 页面首次渲染。
• 浏览器窗口大小发生变化（因为整体布局需要重新计算）。
• 元素的位置、尺寸、内容发生变化。
• 添加或删除可见的DOM元素。
• 激活 CSS 伪类（例如 :hover）。
• 修改元素的样式（例如修改 width、height、padding 等）。
• 计算 offsetWidth 和 offsetHeight 属性。
• 查询某些属性或调用某些方法，需要获取布局信息的属性值，例如 getComputedStyle。

重绘（Repaint）：

重绘是指浏览器根据元素的样式变化（如颜色、背景等）重新绘制元素的过程，但是元素的几何属性没有发生变化，即不会影响到布局。重绘比回流消耗的性能较少，因为它只涉及到样式的变化，不需要重新计算布局。

重绘的触发条件：

• 修改元素的背景色、文字颜色等样式。
• 修改元素的可见性（visibility）。
• 添加或修改 outline 属性。
• 修改元素的 border 样式。
• 修改 box-shadow 属性。