如何在JS执行后递归镜像网页，获取动态渲染后的DOM内容？

这确实是静态抓取工具（像wget）的常见痛点——它们没法处理JS动态生成的内容和依赖脚本。下面给你几个可行的方案，按易用性和灵活性排序：

1. 使用Playwright（推荐，灵活可控） #

Playwright是微软推出的无头浏览器工具，支持Chrome、Firefox、Safari，能完美模拟浏览器加载页面（包括JS执行、DOM渲染），而且你可以通过代码实现递归抓取逻辑。

步骤： #

1. 先初始化Node.js项目并安装Playwright：

   npm init -y && npm install playwright
   

2. 编写递归抓取脚本（比如命名为crawl-site.js）：

   const { chromium } = require('playwright');
   const fs = require('fs');
   const path = require('path');
   
   // 配置参数
   const BASE_URL = 'https://www.example.com/';
   const visitedUrls = new Set();
   const OUTPUT_FOLDER = './mirrored-site';
   const CRAWL_DELAY = 1000; // 每次抓取间隔1秒，避免给服务器施压
   
   // 创建输出目录
   if (!fs.existsSync(OUTPUT_FOLDER)) {
       fs.mkdirSync(OUTPUT_FOLDER, { recursive: true });
   }
   
   async function crawlPage(url) {
       // 跳过已访问或非目标域名的链接
       if (visitedUrls.has(url) || !url.startsWith(BASE_URL)) return;
       visitedUrls.add(url);
   
       const browser = await chromium.launch({ headless: true });
       const page = await browser.newPage();
   
       try {
           // 等待页面完全加载（网络空闲时认为加载完成）
           await page.goto(url, { waitUntil: 'networkidle' });
           // 获取渲染后的完整HTML
           const renderedHtml = await page.content();
   
           // 生成本地保存的路径（把URL转换为合法的文件路径）
           const urlPath = new URL(url).pathname;
           const savePath = path.join(OUTPUT_FOLDER, urlPath || 'index.html');
           // 创建必要的子目录
           fs.mkdirSync(path.dirname(savePath), { recursive: true });
           // 保存HTML文件
           fs.writeFileSync(savePath, renderedHtml);
   
           console.log(`已保存：${url}`);
   
           // 提取页面内所有链接，递归抓取
           const allLinks = await page.$$eval('a', anchors => anchors.map(a => a.href));
           for (const link of allLinks) {
               // 加入抓取间隔
               await new Promise(resolve => setTimeout(resolve, CRAWL_DELAY));
               await crawlPage(link);
           }
       } catch (error) {
           console.error(`抓取失败 ${url}：`, error.message);
       } finally {
           await browser.close();
       }
   }
   
   // 启动抓取任务
   crawlPage(BASE_URL).then(() => {
       console.log('✅ 网站镜像完成！');
   });
   

3. 运行脚本：

   node crawl-site.js
   

这个脚本会自动抓取所有目标域名下的页面，保存JS渲染后的完整HTML，还可以扩展逻辑来保存图片、CSS、JS等静态资源（比如用page.route拦截资源请求并保存）。

2. 使用httrack（命令行工具，无需编码） #

如果你不想写代码，httrack是个不错的选择——它是专门的网站镜像工具，支持解析JS生成的内容，比wget更适合动态网站。

执行命令： #

httrack https://www.example.com/ -O ./mirrored-site --mirror --recursive --depth=inf --js=1 --keep-alive --user-agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36"

参数说明： #

• -O ./mirrored-site：指定镜像文件的输出目录
• --mirror：启用镜像模式（保留网站结构）
• --recursive --depth=inf：无限递归抓取所有子页面
• --js=1：启用JS解析，模拟执行JS来获取动态生成的链接和内容
• --keep-alive：保持HTTP连接，提升抓取效率
• --user-agent：设置浏览器UA，避免被网站拦截

httrack会自动处理JS渲染后的内容，递归保存所有页面和资源，操作起来非常省心。

3. 使用Puppeteer（Chrome生态，类似Playwright） #

Puppeteer是Google推出的无头Chrome工具，和Playwright功能类似，同样可以实现JS渲染+递归抓取。安装和使用逻辑和Playwright差不多，你可以根据自己的技术偏好选择。

快速示例： #

1. 安装Puppeteer：

   npm install puppeteer
   

2. 编写的递归脚本结构和Playwright版本基本一致，只是API略有差异（比如page.goto的等待参数、浏览器启动方式）。

注意事项 #

• 遵守目标网站的robots.txt规则，不要过度抓取给服务器造成压力
• 如果网站有反爬机制，可以尝试添加代理、调整抓取间隔、模拟真实浏览器的行为
• 对于需要登录的网站，Playwright/Puppeteer还可以模拟登录操作，抓取需要权限的页面

内容的提问来源于stack exchange，提问作者A. Dro. ID