标签: 重排重绘

本文深入解析浏览器渲染机制，涵盖DOM/CSSOM构建、布局、绘制、合成等关键流程。重点剖析重排重绘原理及优化策略，如异步布局、合成层加速和读写分离。同时探讨前沿技术Houdini、容器查询，并提供Chrome DevTools等性能分析工具使用指南。

浏览器渲染页面涉及回流(reflow)和重绘(repaint)。回流是节点大小、边距变化导致重计算，重绘是节点样式变化不影响布局。频繁的回流影响性能。优化方法包括合并样式修改、批量操作元素、缓存HTMLCollection结果。DOM操作慢主要因部分读操作导致lazy reflow失效。