首先使用Chrome开发者工具的Performance面板录制页面加载过程，获取资源加载、脚本执行与渲染效率等详细数据；接着通过Lighthouse进行自动化评估，获得性能评分及优化建议；再利用Network面板分析各资源的请求耗时与加载顺序，重点关注DOMContentLoaded和Load事件时间点；最后通过模拟Slow 3G网络和CPU降速环境，对比不同条件下页面表现，识别性能瓶颈。
如果您想了解某个网页在加载过程中的性能表现，例如资源加载耗时、脚本执行时间或渲染效率，可以通过Chrome开发者工具进行深度分析。以下是具体的操作步骤和分析方法。
本文运行环境：MacBook Pro，macOS Sonoma
一、打开并启动Performance面板
Performance面板是Chrome开发者工具中用于记录和分析页面性能的核心工具，能够捕获页面加载期间的详细性能数据，帮助定位瓶颈。
1、按 F12 或 Cmd+Option+I 打开Chrome开发者工具。
2、点击顶部标签栏中的 Performance 选项卡。
3、确保勾选 Screenshots、Memory 和 Network 复选框，以获取更全面的数据。
4、点击左上角的灰色圆形按钮开始录制，然后立即刷新页面或执行目标操作。
5、操作完成后再次点击该按钮停止录制，系统将自动生成性能报告。
二、使用Lighthouse进行综合评估
Lighthouse是一个自动化工具，集成在Chrome开发者工具中，可对网页的性能、可访问性、SEO等方面进行评分，并提供优化建议。
1、切换到开发者工具中的 Lighthouse 面板（部分版本显示为“Audits”）。
2、在“设备”选项中选择 Desktop 或 Mobile 模拟不同环境。
3、确保“类别”中勾选了 Performance。
4、点击 Generate report 按钮，等待系统完成扫描。
5、查看生成的性能得分及具体指标，如First Contentful Paint、Speed Index、Time to Interactive等。
三、通过Network面板快速查看加载详情
Network面板专注于网络请求层面的分析，适合快速查看各资源的加载顺序、大小和耗时情况。
1、进入开发者工具后点击 Network 标签页。
2、刷新页面，所有请求将按时间线排列显示。
3、关注关键时间标记：DOMContentLoaded 表示DOM解析完成，Load 表示所有资源加载完毕。
4、点击任意资源条目，可在下方查看其请求头、响应头、预览等内容。
5、利用过滤器筛选JS、CSS、Img等资源类型，结合“Waterfall”列分析各阶段耗时。
四、模拟弱网与低性能设备环境
通过模拟真实用户可能遇到的低速网络和低端设备，可以更准确地评估网页在实际场景中的表现。
1、在Performance面板点击右上角的设置图标（⚙️）。
2、在“Network”下拉菜单中选择 Slow 3G 或 Fast 3G 模拟慢速网络。
3、在“CPU”选项中选择 4x slowdown 来模拟低性能处理器。
4、开启录制并刷新页面，观察在受限条件下的加载行为。
5、对比正常环境与模拟环境的性能差异，识别潜在问题。
