通过打开浏览器的开发者工具，利用Performance面板进行页面性能录制，可以分析页面从打开到完全加载的过程。在录制期间，关注Summary中的指标，如DOM加载和整体Load时间，有助于理解页面渲染效率和资源加载情况。同时，Network面板提供了网络请求的详细信息，包括Finish、DOMContentLoaded和Load事件，帮助优化白屏时间和资源管理。
1 Performance
1.1 打开开发者工具（cmd+shift+c）
1.2 打开Performance面板，点击录制按钮（开始录制）
1.3 刷新页面，再次点击录制按钮（结束录制）
录制按钮高亮，表示录制中，再次点击即可结束录制（也可点击Stop按钮，效果相同）
1.4 打开Summary，查看页面渲染过程属性
2 Network
2.1 打开Network面板，刷新页面
面板底部会有与页面加载相关的属性
Finish：表示页面中最后一个请求的截止时间。
DOMContentLoaded：表示dom内容加载并解析完成的时间，即白屏时间。
Load：表示页面中所有资源（图片、音/视频等）加载完成的时间。
扫一扫
440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
