为何我的页面在PageSpeed中总阻塞时间过长？React项目求解决方法

一、排查阶段 #

1. 网络请求链路分析 #

• 打开浏览器DevTools的Network面板，定位到这个3KB的chunk请求，查看请求时序详情：重点关注DNS解析、TCP连接、SSL握手、TTFB（服务器响应时间）这几个阶段的耗时。3KB资源的下载本身耗时应在几十ms内，4000ms的耗时大概率出现在连接建立或服务器响应环节。
• 检查是否存在请求排队：查看同一域名下的并发请求数是否达到浏览器上限（通常为6个），导致该chunk被阻塞在队列中等待连接释放。
• 验证缓存策略：查看该请求的响应头，确认是否设置了有效缓存规则。如果没有强缓存，每次请求都需和服务器协商甚至重新下载，会大幅增加耗时。

2. 浏览器端加载/执行验证 #

• 切换到DevTools的Performance面板，录制完整的页面加载流程，确认是加载阶段耗时还是执行阶段耗时：有时会把脚本执行的长任务时间误判为加载耗时。如果是执行阶段，检查该chunk的代码是否包含同步计算、大量DOM操作等长任务。
• 检查脚本加载方式：确认该chunk是否为同步加载的关键脚本，同步脚本会阻塞DOM解析和后续资源加载，但如果是加载耗时久，核心问题仍在网络层面。

二、解决步骤 #

1. 网络层面优化 #

• 启用HTTP/2或HTTP/3：替代HTTP/1.1，打破同一域名的并发请求限制，复用TCP连接，减少连接建立的开销。
• 配置强缓存规则：给静态资源设置Cache-Control: max-age=31536000, immutable，让浏览器直接从本地缓存读取资源，避免重复请求。同时配合webpack的contenthash，确保资源更新时浏览器能获取最新版本。
• 优化服务器响应：
  • 启用gzip或Brotli压缩：虽3KB资源压缩空间有限，但能进一步降低传输体积。
  • 将静态资源部署到CDN：缩短用户与服务器的物理距离，降低TTFB。
  • 检查服务器静态资源服务配置：避免动态生成静态chunk（如不必要的服务器端处理逻辑），确保资源能被快速返回。
• 缓解请求排队：若同一域名请求过多，可将静态资源拆分到1-2个不同子域名（避免过多子域名增加DNS解析开销），分散连接压力。

2. 浏览器端执行优化（若涉及执行阻塞） #

• 异步加载非关键chunk：如果该chunk不是首屏必需的，使用React的React.lazy + Suspense或动态import()实现按需加载，避免阻塞首屏渲染。
• 拆分长任务：若脚本执行耗时久，将chunk中的同步计算、DOM操作等逻辑拆分为多个小任务，用requestIdleCallback或setTimeout分块执行，降低单个任务的阻塞时间。

内容的提问来源于stack exchange，提问作者Netanel Vaknin