如何用浏览器证据链区分首屏缓慢的网络瓶颈与主线程瓶颈

# 核心结论

区分首屏缓慢是网络瓶颈还是主线程瓶颈，必须把资源瀑布、关键渲染路径、主线程任务和最终绘制结果放到同一时间线上。先明确首屏口径：主体内容出现可关注 LCP，业务按钮可用需要结合实际可操作时间、长任务和 INP 观察。若关键资源迟迟未返回或甚至很晚才被发现，优先分析网络和依赖链；若资源早已可用但页面迟迟未绘制，则重点检查脚本执行、样式计算、布局和绘制。实际项目也可能两类瓶颈同时存在，不能强行二选一。

# 网络证据链

在浏览器 Network 面板中，应把请求耗时拆为 DNS、连接建立、TLS、排队、服务器处理、首字节和内容下载。关键文档或接口的 TTFB 高，通常需要继续验证服务端处理