网站移动端页面无限加载 PageSpeed Insights报Lighthouse PROTOCOL_TIMEOUT错误

你遇到的PROTOCOL_TIMEOUT是Lighthouse调用Chrome DevTools协议执行Network.emulateNetworkConditions（模拟移动端网络环境）指令时，页面主线程长时间阻塞/资源加载无法完成，导致指令等待响应超时，和你观测到的移动端页面无限加载问题直接相关。

• 移动端专属JS逻辑异常：仅在移动端触发的滚动监听、视口适配、触屏事件（touchstart/touchmove）等逻辑存在边界问题，进入无限循环/递归，完全阻塞主线程，DevTools的指令无法被响应
• 资源加载死锁：移动端才触发的懒加载逻辑有Bug，无限制重复触发同个资源的请求；或是Service Worker的移动端缓存规则配置错误，循环请求同个资源无法终止
• 重定向循环：服务端针对移动端UA的请求配置了特殊跳转规则，逻辑出错导致请求在多个地址间无限跳转，页面永远无法完成加载
• 重绘死循环：移动端适配的rem/vw动态计算脚本逻辑错误，持续触发页面重排重绘，占用全部主线程资源

• 本地复现验证：打开Chrome DevTools切换到移动端模拟模式，勾选模拟慢速3G网络，访问故障页面，观察Performance面板记录的主线程任务，定位是否有长时间运行的阻塞任务，同时查看Console面板是否有循环报错
• 移动端逻辑隔离验证：逐次注释/禁用仅移动端生效的JS逻辑、懒加载规则、触屏事件监听、Service Worker，每次修改后重新访问页面，确认哪个逻辑触发了无限加载
• 重定向规则校验：执行curl命令模拟移动端UA请求，检查跳转链路是否存在循环：

  curl -A "Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1" -L -I 你的故障页面地址
  

  如果返回的301/302状态码重复出现同一个地址，即可判定存在重定向循环

• 修复JS阻塞逻辑：给移动端专属的循环、递归逻辑加边界校验和超时熔断，滚动、触屏类高频触发的事件统一加节流/防抖处理，避免阻塞主线程
• 修正资源加载规则：给懒加载逻辑加资源加载状态标记，同一个资源仅触发一次加载请求；调整Service Worker缓存规则，排除动态接口、实时数据类请求的缓存匹配
• 调整重定向配置：修正服务端UA判断逻辑，取消不必要的移动端跳转，确保跳转链路最多不超过2次即可到达目标页面
• 优化首屏任务优先级：把非首屏必须的移动端逻辑放到requestIdleCallback中延迟执行，避免首屏加载阶段占用主线程资源，导致DevTools协议调用超时

内容的提问来源于stack exchange，提问作者Bhagyesh Joshi