一、渲染流程与性能优化 副本
查看飞书原文 ↗984 字符
主题 | 核心知识点 | 概要 |
| • 从输入URL到页面呈现的全过程 • 关键渲染路径 | 高度概括整个流程（网络请求、构建DOM/CSSOM、渲染、布局、绘制），建立宏观认知 了解关键渲染路径的几大阶段。 |
| • DOM树与CSSOM树的构建过程 • CSSOM的渲染阻塞特性 | 解释为何DOM是渐进式的，而CSSOM是阻塞性的，为后续的优化打下基础。 |
| • <script> 对解析的影响 • async vs defer | 讨论JavaScript在渲染流程中的角色。 解释默认脚本如何阻塞DOM构建 引出async和defer作为优化手段。 |
| • 什么是渲染树 (Render Tree) • 什么是布局(Layout/Reflow)与绘制(Paint) | 将DOM和CSSOM结合，生成渲染树。 详细解释布局（计算位置大小）和绘制（填充像素）这两个核心步骤。 |
| • 图层(Layer)与合成(Compositing) • transform 高性能的秘密 | 了解渲染的最后一步：合成。 解释为何transform和opacity能跳过布局和绘制，实现GPU加速（现代前端动画优化的关键） |
| • 常见触发回流/重绘的操作 • 批量修改DOM、读写分离 | 聚焦于如何通过具体的编码技巧（如DocumentFragment、批量修改样式）来避免不必要的渲染开销。 |
| • will-change 的使用 • 合成层的利与弊 | 深入讲解如何通过will-change等CSS属性手动或自动创建合成层，并讨论过度使用可能带来的问题。 |
| • LCP, INP, CLS • 使用 DevTools 进行性能分析 | 用数据说话。介绍核心Web指标，并实战演示如何使用Lighthouse和Performance面板来发现、度量和验证渲染性能问题。 |