会引起Reflow和Repaint的操作有哪些？

在前端开发中，会引起Reflow（回流）和Repaint（重绘）的操作主要包括以下几种：

一、引起Reflow的操作：

1. DOM结构变化：例如添加或删除可见的DOM元素，或者元素的内容发生变化导致尺寸变化，比如文字数量改变使得容器高度增加。
2. 样式属性变更：当影响元素几何属性的CSS属性发生变化时，如宽度(width)、高度(height)、外边距(margin)、内边距(padding)、边框(border)等，以及顶部、底部、左边、右边定位(top, bottom, left, right)的改变，都会触发回流。此外，浮动(float)状态改变、display属性更改（例如从none变为block）以及flex或grid布局中的相关属性更改也会导致回流。
3. 获取布局信息：当JavaScript请求读取依赖于布局信息的样式属性，如offsetTop, offsetLeft, scrollTop, scrollWidth等时，浏览器可能会触发回流以便给出精确值。
4. 调整浏览器窗口大小：用户调整浏览器窗口大小时，特别是响应式设计场景，也会触发回流。

二、引起Repaint的操作：

1. 颜色、背景等样式更改：当元素的颜色、背景、text-align、text-decoration等属性发生变化时，这些变动通常只影响元素的外观而不涉及布局，因此会触发重绘而不是回流。
2. 伪类引起的样式改动：例如:hover等伪类引起的元素颜色或其他不导致页面回流的样式变动也会触发重绘。

需要注意的是，虽然重绘的开销相对较小，但频繁的重绘仍然可能对性能产生一定影响。因此，在进行前端开发时，应尽量减少不必要的回流和重绘操作，以提高页面的渲染性能。例如，可以通过批量修改样式、使用transform替代top/left等改变元素位置的操作、避免在循环中操作样式属性等方式来优化性能。