为何PhantomJS 2.1.1渲染页面仅显背景无内容，Foxshot 1.2.0却可正常渲染

问题成因 #

1. PhantomJS早已停止维护，最后一次更新为2018年，内置的老旧WebKit内核不支持现代站点普遍使用的ES6+语法、新Web API、现代CSS特性，访问目标站点时页面JS执行报错，无法完成动态内容的渲染。而你使用的foxshot基于Firefox现代内核，兼容性符合站点要求，所以可以正常渲染页面。
2. 你的PhantomJS代码触发操作的时机过早，page.open的回调仅在基础HTML加载完成时就被触发，此时开奖数据还未通过异步请求拉取、也没有渲染到DOM中，自然拿不到对应元素，截图也只能看到空白背景。
3. PhantomJS的请求特征（UA、浏览器指纹等）辨识度极高，很容易被站点反爬策略拦截，仅返回空白的框架页面，没有实际内容。

可行解决方案 #

方案1：替换为现代无头浏览器工具（最推荐） #

放弃PhantomJS，改用当前主流的无头浏览器方案，既具备和普通浏览器一致的渲染兼容性，也支持DOM提取能力：

• Node.js生态可选择Puppeteer，它基于Chromium内核，完全支持现代Web特性，可自定义等待异步内容加载完成后再执行操作，参考逻辑如下：

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // 跳转页面时设置等待网络空闲，确保异步数据加载完成
  await page.goto('https://www.masslottery.com/tools/past-results/mega-millions?start_date=2021-09-03&end_date=2021-09-28', {
    waitUntil: 'networkidle2'
  });
  // 等待开奖结果表格元素渲染完成，超时时间设为10秒
  await page.waitForSelector('.past-results-table', {timeout: 10000});
  // 进入页面上下文提取DOM内容，替换为实际页面对应的选择器即可
  const lotteryData = await page.evaluate(() => {
    let res = [];
    document.querySelectorAll('.result-item').forEach(item => {
      res.push({
        date: item.querySelector('.date-field').innerText,
        numbers: item.querySelector('.number-group').innerText
      });
    });
    return res;
  });
  // 输出提取到的开奖数据
  console.log(lotteryData);
  await browser.close();
})();

• 也可选择Playwright，支持多内核适配，用法和Puppeteer接近。如果偏好PHP、Python等其他语言，可使用Selenium驱动无头Chrome/Firefox完成操作，效果和真实浏览器访问完全一致。

方案2：直接请求数据接口（效率最高） #

目标站点的开奖数据是通过异步接口拉取的JSON格式数据，你可以直接抓包获取对应接口地址，直接发起HTTP请求拿到结构化数据，不需要解析DOM，也不需要依赖浏览器渲染，实现成本更低、效率更高。

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