能否静态快照网站并本地复现，以开展Web应用TTI性能测试？

方法一：Chrome DevTools HAR文件抓取+本地HAR服务 #

这是最直接的方案，能完整捕获包括动态加载JS在内的所有资源和请求响应：

• 打开Chrome DevTools（F12），切换到「Network」面板
• 勾选「Preserve log」，刷新页面，等待首页TTI完成、所有资源加载完毕
• 右键Network列表任意请求，选择「Save all as HAR with content」，保存为HAR文件
• 安装本地HAR服务工具（npm包har-server）：

  npm install -g har-server
  

• 启动服务：

  har-server path/to/your/file.har -p 8080
  

• 访问http://localhost:8080即可完整复现原页面，所有请求都会使用HAR里缓存的响应，完全脱离预发布环境。如果要Mock特定请求，直接修改HAR文件里对应请求的response内容即可。

方法二：Puppeteer自定义抓取+本地Mock #

适合需要更灵活控制抓取逻辑和Mock规则的场景：

• 写一个简单的Puppeteer脚本，自动爬取页面并缓存所有资源：

  const puppeteer = require('puppeteer');
  const fs = require('fs');
  
  (async () => {
    const browser = await puppeteer.launch({ headless: false, args: ['--proxy-server=你的VPN代理地址'] }); // 需走VPN时配置
    const page = await browser.newPage();
    
    // 拦截并缓存所有请求
    const cache = {};
    await page.setRequestInterception(true);
    page.on('request', async (req) => {
      if (cache[req.url()]) {
        await req.respond(cache[req.url()]);
      } else {
        const res = await req.continue();
        const responseBody = await res.buffer();
        cache[req.url()] = {
          status: res.status(),
          headers: res.headers(),
          body: responseBody
        };
      }
    });
  
    // 等待页面加载完成（以TTI为目标）
    await page.goto('你的预发布首页地址', { waitUntil: 'networkidle0' });
    // 保存页面HTML和缓存数据
    const pageHtml = await page.content();
    fs.writeFileSync('./local-index.html', pageHtml);
    fs.writeFileSync('./request-cache.json', JSON.stringify(cache));
  
    await browser.close();
  })();
  

• 之后可以写一个简单的Node静态服务，读取缓存的响应，同时修改特定请求的响应内容实现Mock，比如替换某个API的返回值。

方法三：wget高级参数抓取+本地服务Mock #

适合快速获取静态资源副本，再配合简单Mock：

• 使用wget命令抓取完整站点（需确保终端走VPN）：

  wget --mirror --convert-links --adjust-extension --page-requisites --no-parent --wait=2 https://你的预发布首页地址
  

  参数说明：
  • --mirror：镜像站点结构
  • --convert-links：把页面里的绝对链接转为本地相对链接
  • --wait=2：等待2秒，确保动态JS加载完成
• 抓取完成后，用本地静态服务启动：

  python -m http.server 8080
  

• Mock请求的话，可以在本地服务里加路由规则，比如用Node写个简单的Express服务拦截特定API请求返回自定义响应，或者用Chrome DevTools的「Override」功能直接替换本地文件。

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