一、渲染流程与性能优化 副本
来源：https://my.feishu.cn/docx/OIQHduhiKofVz8xlXQmcdKVJneK
采集状态：已完成正文采集；已滚动到底部并复查

主题

	

核心知识点

	

概要

	

1.从URL到完整页面的流程

	

• 从输入URL到页面呈现的全过程

• 关键渲染路径

	

高度概括整个流程（网络请求、构建DOM/CSSOM、渲染、布局、绘制），建立宏观认知

了解关键渲染路径的几大阶段。

	

2.构建DOM与CSSOM

	

• DOM树与CSSOM树的构建过程

• CSSOM的渲染阻塞特性

	

解释为何DOM是渐进式的，而CSSOM是阻塞性的，为后续的优化打下基础。

	

3.JS的加载与阻塞

	

• <script> 对解析的影响

• async vs defer

	

讨论JavaScript在渲染流程中的角色。

解释默认脚本如何阻塞DOM构建

引出async和defer作为优化手段。

	

4.渲染树、布局与绘制

	

• 什么是渲染树 (Render Tree)

• 什么是布局(Layout/Reflow)与绘制(Paint)

	

将DOM和CSSOM结合，生成渲染树。

详细解释布局（计算位置大小）和绘制（填充像素）这两个核心步骤。

	

5.高性能的秘密：图层与合成

	

• 图层(Layer)与合成(Compositing)

• transform 高性能的秘密

	

了解渲染的最后一步：合成。

解释为何transform和opacity能跳过布局和绘制，实现GPU加速（现代前端动画优化的关键）

	

6.性能优化实战：减少回流与重绘

	

• 常见触发回流/重绘的操作

• 批量修改DOM、读写分离

	

聚焦于如何通过具体的编码技巧（如DocumentFragment、批量修改样式）来避免不必要的渲染开销。

	

7.性能优化实战：合成层的妙用

	

• will-change 的使用

• 合成层的利与弊

	

深入讲解如何通过will-change等CSS属性手动或自动创建合成层，并讨论过度使用可能带来的问题。

	

8.度量与分析：核心Web指标

	

• LCP, INP, CLS

• 使用 DevTools 进行性能分析

	

用数据说话。介绍核心Web指标，并实战演示如何使用Lighthouse和Performance面板来发现、度量和验证渲染性能问题。

​

原文链接与附件索引
1.从URL到完整页面的流程
https://w0hog67yl81.feishu.cn/wiki/CSfCw7nEaiPvGuki38KcQFNOnog
2.构建DOM与CSSOM
https://w0hog67yl81.feishu.cn/wiki/KBxwwj9RAi5Swmk8jQVcQyR9nvc
3.JS的加载与阻塞
https://w0hog67yl81.feishu.cn/wiki/XkI0w9UMUijr1HkK0PBctpjNnbe
4.渲染树、布局与绘制
https://w0hog67yl81.feishu.cn/wiki/OBguw6PWwimnjtkSnAYcHnLHnDl
5.高性能的秘密：图层与合成
https://w0hog67yl81.feishu.cn/wiki/QApVwZbq0iPctdkBEl3cKaybn3g
6.性能优化实战：减少回流与重绘
https://w0hog67yl81.feishu.cn/wiki/IRM4wK4Jgieak3kNFEqc2cuCnFb
7.性能优化实战：合成层的妙用
https://w0hog67yl81.feishu.cn/wiki/RRXXwc7gmiim0YkgKyHc7xZ3nmd
8.度量与分析：核心Web指标
https://w0hog67yl81.feishu.cn/wiki/WwDkwQ3qPiKklGk5mHAcc1onnyw