页面重绘和回流以及优化
这篇讲的是前端性能优化中的关键概念：页面重绘与回流。作者从浏览器渲染页面的流程切入，清晰解释了DOM树、样式结构与渲染树（Render Tree）的构建关系，并指出渲染树不包含 `display:none` 等隐藏节点这一重要细节。 文章的核心是区分回流与重绘：当元素的几何属性（如尺寸、位置）改变时触发回流，浏览器需要重新构建部分渲染树；而仅改变外观属性（如背景色）则只触发重绘。作者强调“回流必将引起重绘”，并列举了六种常见触发回流的场景，如DOM增删、窗口尺寸变化等。 为说明性能影响，文章通过一段JS代码演示了连续样式修改如何导致多次不必要的回流。同时，作者揭示了浏览器内部的优化机制——通过维护操作队列来合并回流操作，并提醒开发者某些属性访问（如 `offsetWidth`）会强制刷新该队列。 最后，文章给出了具体的优化策略：批量修改样式（如使用 `className` 或 `cssText`）、采用离线操作（如 `DocumentFragment`）、缓存布局信息，以及让动画元素脱离文档流。这些方法能有效减少渲染树的重构规模，提升页面性能。