Puppeteer页面长时间加载卡住时page.evaluate无法生效如何解决

网页自动化操作中，点击下一页按钮后存在极低概率触发页面长时间加载挂死：

• 挂死状态下所有通过page.evaluate下发的JS操作都无法传到浏览器执行，调用会一直无响应
• 尝试通过page.evaluate注入location.reload(true)重载页面的代码，同样会直接卡住
• 切换到非无头模式手动在浏览器控制台执行location.reload(true)，可以正常刷新页面恢复操作

核心原因是页面卡在待完成导航状态时，自动化框架（Puppeteer/Playwright）和页面JS执行上下文的通信链路会被阻塞：框架默认会等待页面触发加载完成的生命周期事件，这期间所有发往页面执行上下文的指令都会排队挂起。如果页面因为静态资源加载失败、接口无响应、第三方脚本卡死等原因永远触发不了加载完成事件，所有page.evaluate调用就会一直挂死。
手动在控制台执行刷新生效，是因为该操作直接在浏览器渲染进程内执行，不经过自动化框架的协议通信链路，自然不会被阻塞。

按落地优先级从高到低排列：

方案1：放弃evaluate注入刷新逻辑，用框架原生重载API加超时兜底 #

不要通过page.evaluate调用location.reload，直接使用框架自带的页面重载方法，同时缩短等待条件，超时后主动终止页面加载：

// Puppeteer 示例，Playwright 逻辑基本一致
try {
  await page.reload({
    waitUntil: 'domcontentloaded', // 仅等待DOM树加载完成就返回，不要等所有资源加载完
    timeout: 5000 // 重载操作最多等待5秒
  });
} catch (err) {
  // 超时后主动终止页面所有加载中的请求，解除上下文阻塞
  await page.evaluate(() => window.stop());
}

注意：window.stop()必须放在reload的超时catch块中调用，此时reload动作已经触发了执行上下文切换，evaluate不会被之前的待导航状态阻塞。

方案2：提前配置全局导航规则，从源头避免无限等待 #

在初始化页面、触发翻页点击之前就配置好超时和等待规则，不要给页面无限加载的机会：

// 全局配置所有导航操作最多等待8秒，超时直接抛错
page.setDefaultNavigationTimeout(8000);
// 点击下一页按钮时，仅等待DOM加载完成就继续后续逻辑
await page.click('.next-page-btn', {
  waitUntil: 'domcontentloaded'
});

方案3：挂死时通过底层CDP协议下发刷新指令，绕开阻塞队列 #

如果已经出现evaluate完全无响应的情况，可以直接通过底层Chrome DevTools Protocol发指令，不需要走page.evaluate的通信队列：

// 创建临时CDP会话
const cdpSession = await page.target().createCDPSession();
// 直接触发页面重载，绕过evaluate的阻塞链路
await cdpSession.send('Page.reload', {
  ignoreCache: true
});
// 等待DOM加载完成后释放临时会话
await page.waitForNavigation({ waitUntil: 'domcontentloaded' });
await cdpSession.detach();

• 日常开发不要把networkidle0/networkidle2作为默认的导航等待条件，页面上的长轮询接口、埋点上报、第三方统计脚本很容易导致永远等不到网络空闲状态，大幅提高这类挂死问题的出现概率
• 这类极低概率触发的加载挂死本质是目标网页本身的资源加载异常，不需要追求100%避免触发，只要做好超时兜底、终止加载+重试的逻辑，就不会影响整体自动化流程的稳定性

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