大家好，今天我们来聊聊现代Web爬虫中一个非常典型且让人头疼的场景——
动态网页抓取
。
很多刚接触爬虫的同学可能会遇到这种情况：用传统的HTTP请求库（如axios或node-fetch）去请求一个网站，满心欢喜地想要解析DOM，结果打印出来一看，只有一个孤零零的
<div id="app"></div>
。
这是因为现代Web开发大量使用了React、Vue、Angular等前端框架。传统的HTTP请求直接抓取返回的只是空壳HTML，真正的页面内容全靠JavaScript在客户端执行后才会注入渲染。
为了解决这个问题，很多开发者转向了
Playwright
。它能够驱动真实的浏览器去执行JS，最终返回渲染完成后的完整DOM树。
但是，
能拿到DOM不代表你能持续拿到DOM
。
Playwright虽然解决了渲染问题，但目标网站的防爬机制（如浏览器指纹、请求频率检测、单IP访问次数限制）并不会因此消失。如果你的服务器IP在短时间内大量请求同一个站点，轻则让你疯狂点验证码，重则直接封禁IP。
这时候，
代理IP
就成了我们的刚需。今天，我就以爬虫代理为例，带大家手把手实现一套基于 Node.js + Playwright 的高可用动态网页抓取方案。
核心武器：代理IP的选择与模式
在自动化浏览器抓取场景中，代理IP轮换是把单IP请求频率压低的标准手段。 以我们今天使用的爬虫代理为例，它提供了几个非常适合Playwright场景的特性：- 协议支持：全面支持HTTP/HTTPS协议。
- 认证方式：支持用户名和密码认证。
- 庞大IP池：拥有30万+起步的IP池规模（加强版甚至达到80万+），覆盖面极广。
- 动态转发：每次请求都会自动切换为一个全新的IP，极大地分散了高频请求的风险，适合大规模数据的离散抓取。
- 固定转发：IP会在固定的一段时间内保持不变，随后再进行切换。如果你抓取的站点需要保持登录会话（Session）的一致性，这种模式是必选项。
环境准备与基础配置
在开干之前，请确保你的开发环境满足以下要求：- Node.js: 16.x及以上版本。
- Playwright: 1.40及以上版本。
- 操作系统: macOS / Linux / Windows 均可完美运行。
npm install playwright
npx playwright install chromium
Playwright代理配置的“两派之争”
在Playwright中接入代理，通常有两种姿势。第一种：全局配置（简单粗暴） 直接在启动浏览器实例 chromium.launch() 时挂载代理。这种方式的缺点是，所有由该浏览器实例衍生出的页面，都只能死死绑定这同一个IP，完全无法针对单个页面进行灵活的代理切换。
第二种：BrowserContext 级别配置（知乎高赞推荐） 这是业界最为推崇的最佳实践。我们在创建 BrowserContext 时为其单独配置代理：
const {
chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
// 核心：在Context级别配置亿牛云代理
const context = await browser.newContext({
proxy: {
server: 'http://t.16yun.cn:31111',
username: 'username',
password: 'password'
}
});
const page = await context.newPage();
await page.goto('https://httpbin.org/ip');
await browser.close();
})();
进阶实战：打造工业级爬虫脚本
真实的抓取环境是极其恶劣的：网络波动、代理偶发失效、目标站点反爬等。一个优秀的爬虫脚本必须具备 验证机制 与 重试机制 。1. 代理有效性验证先行
很多新手写完代码直接跑业务逻辑，报错了才开始排查。正确做法是：上线前或者在初始化阶段，先请求 https://httpbin.org/ip 验证代理是否已经生效。// 验证代理IP的片段代码
const response = await page.goto('https://httpbin.org/ip', {
timeout: 30000,
waitUntil: 'networkidle'
});
const ipInfo = await page.evaluate(() => {
const pre = document.querySelector('pre');
return pre ? JSON.parse(pre.textContent) : null;
});
console.log('代理IP验证成功, 出口IP为:', ipInfo.origin);
2. 构建健壮的异常重试机制
网络请求存在失败概率，重试机制是企业级爬虫必不可少的一环。我们需要对错误类型进行精准分类：- 值得重试的错误：连接超时（timeout）、连接错误（connect）、429限流提示、连接重置（econnreset）等。
- 不值得重试的错误：407代理认证错误（说明账号密码配错了）、403禁止访问等，遇到这些应该立刻中断程序并报警。
const {
chromium } = require('playwright');
class ProxyScraper {
constructor(proxyConfig) {
this.proxyConfig = proxyConfig;
this.maxRetries = 3;
this.retryDelay = 2000; // ms
}
// 错误类型判断
isRetryableError(error) {
const message = error.message.toLowerCase();
return (
message.includes('timeout') ||
message.includes('connect') ||
message.includes('429') ||
message.includes('econnreset')
);
}
async scrape(url) {
const browser = await chromium.launch();
let context;
try {
context = await browser.newContext({
proxy: {
server: this.proxyConfig.server,
username: this.proxyConfig.username,
password: this.proxyConfig.password
}
});
const page = await context.newPage();
// 执行重试逻辑
// ... (此处省略重试封装代码，具体逻辑为循环捕获并判断 isRetryableError) ...
} finally {
// 避坑：一定要在finally中显式关闭Context，否则连续创建会导致内存泄漏和连接数爆满
if (context) await context.close();
if (browser) await browser.close();
}
}
}
注：一定记得在代码的 finally 块中调用 context.close()。如果不正确关闭Context，连续创建后不仅内存会飞速增长，还会导致代理连接数达到上限。
老司机避坑指南：常见报错及应对
在实际接入中，你大概率会遇到以下几种经典错误：1. 报 407 Proxy Authentication Required 错误
- 诊断：代理需要认证但你没提供，或者提供的用户名/密码错误。
- 解法：检查配置代码中是否有敲错字符或多余空格；如果有特殊字符，必须进行URL编码；另外，也要去代理产品控制台确认你的实际出口IP是否在安全白名单中。
2. 报 429 Too Many Requests 错误
- 诊断：这是目标站点在警告你：单IP请求频率过高，触发了反爬限流。
- 解法：增加页面请求间隔（例如使用 page.waitForTimeout(2000)），降低并发度；如果使用的是固定转发模式，可以尝试将IP切换时间设置得更长一些。
3. 彻底封禁（全部请求报 403 或拒绝连接）
- 诊断：目标站点的风控极严，当前使用的IP段已经被其风控系统识别并拉黑。
- 解法：果断切换到覆盖面更广的IP池（如爬虫代理的加强版80万+IP池），或者联系技术支持进行IP替换。
