page.waitForResponse 执行环境:页面还是 Node.js?

直击答案

Puppeteer 中的 page.waitForResponse 方法虽然监听的是页面中的网络请求,但是它的执行上下文环境是 Node.js 环境

底层原理剖析

从 Node.js 层设置 page.waitForResponse 监听开始,到最后获取到符合条件的 HttpResponse 经历了以下几个流程:

  1. puppeteer 在 launch 浏览器时即创建了与 Chromium 之间的 WebSocket 通信通道;

  2. 当 Node.js 层设置 page.waitForResponse() 方法时,即从 Puppeteer 通过 WebSocket 向 Chromium 发送一条 Network.enable 消息以启用网络监控,并返回 等待获取到合适 HttpResponse 的 Promise;

    • Network.enableCDP (Chrome DevTools Protocol) 中的一个命令;
    • 实际上,为了避免不必要的 CDP 命令调用,并不是每次设置 page.waitForResponse() 时都会发送 Network.enable 消息,而是先由 Puppeteer 确认是否已经开启网络监控,只有在确认未开启时,才会发送消息,否则就不发送了;
  3. 当 Chromium 内核接收到原始的网络数据(包括 HTTP 状态码、头部、响应体等)后,通过 WebSocket 向 Puppeteer 发送"携带了原始网络数据的 Network.responseReceived CDP 事件";

  4. 接下去,Puppeteer 将接收到的网络原始数据封装成一个统一的、易于使用的 HttpResponse 对象,这个对象包含了像 status()、url()、ok() 等方便开发者使用的方法;

  5. 然后,再由 Puppeteer 将这个对象作为参数,传递给在 Node.js 层运行的 predicate 函数进行判断。当某一个 HttpResponse 对象通过了 waitForResponse 的 predicate 函数的判断时,page.waitForResponse 的 Promise 就会被 resolve,Puppeteer 就将符合条件的这个 HttpResponse 对象直接返回给 Nodejs 层。同时,一旦 Promise 被 resolve,Puppeteer 会自动停止监听相关的网络事件,并清理内部的消息处理程序 (handler),以避免资源泄露或不必要的监听。

  6. Nodejs 层拿到 HttpResponse 对象 就可以进行后续操作;

综上流程所述,page.waitForResponse 的执行上下文环境是在 Node.js 层,而未涉及到页面环境。如果以上文字流程难以理解的,请结合下图慢慢理解哦~

markdown 复制代码
Network.enable 是 CDP (Chrome DevTools Protocol) 中的一个命令,它的主要作用是:

1. 启用网络域监控:告诉 Chromium 开始收集和发送网络相关的所有事件;
2. 开启网络流量追踪:激活浏览器内部的网络监控功能;

写在最后

又是深挖细微技术点的一篇文章,看似不起眼,但我始终坚信"细节决定成败"。

另外,我要为看到这里的你鼓掌,让我们:今日迈出一小步,明日也迈出一小步,最终,每一步,都算数。

相关推荐
JNU freshman几秒前
vue 之 import 的语法
前端·javascript·vue.js
剑亦未配妥1 分钟前
Vue 2 响应式系统常见问题与解决方案(包含_demo以下划线开头命名的变量导致响应式丢失问题)
前端·javascript·vue.js
凉柚ˇ4 分钟前
Vue图片压缩方案
前端·javascript·vue.js
慧一居士4 分钟前
vue 中 directive 作用,使用场景和使用示例
前端
慧一居士6 分钟前
vue 中 file-saver 功能介绍,使用场景,使用示例
前端
文心快码BaiduComate1 小时前
文心快码3.5S实测插件开发,Architect模式令人惊艳
前端·后端·架构
Kimser1 小时前
基于 VxeTable 的高级表格选择组件
前端·vue.js
摸着石头过河的石头1 小时前
JavaScript 防抖与节流:提升应用性能的两大利器
前端·javascript
酸菜土狗1 小时前
让 ECharts 图表跟随容器自动放大缩小
前端
_大学牲1 小时前
FuncAvatar: 你的头像氛围感神器 🤥🤥🤥
前端·javascript·程序员