回流 (Reflow),也称为重排,是指浏览器为了重新计算文档中元素的位置和几何形状(大小),需要重新构建渲染树(Render Tree)的一部分或全部的过程。 回流的成本比重绘(Repaint)高得多,因为它涉及到布局的重新计算。回流必然导致重绘,但重绘不一定导致回流。 以下是触发回流的操作以及减少回流的策略: --- 一、 哪些操作会触发回流? 只要涉及到几何尺寸、布局位置、文档结构的变化,都会触发回流。 1. DOM 结构的变化 添加或删除可见的 DOM 元素。 元素位置改变。 元素尺寸改变(包括外边距 、内边距 、边框厚度 、宽度 、高度 等)。 2. 内容的变化 文本内容改变(例如输入框打字)。 图片加载完成(如果图片大小未固定,加载完会撑开容器)。 字体大小 () 或字体系列 () 改变。 3. 视口(Viewport)的变化 浏览器窗口大小调整(Resize)。 滚动条的出现或消失。 4. CSS 样式的变化 激活 CSS 伪类(例如 )。 设置 属性的值。 关键点: 会触发回流(因为它从渲染树中移除了),而 只触发重绘(因为它占据空间,只是不可见)。 5. 获取某...