Chrome Puppeteer :如何加载html只没有CSS/JS/字体/图像?

s5a0g9ez  于 2022-12-06  发布在  Go
关注(0)|答案(2)|浏览(340)

我正在使用Puppeteer抓取一些数据,需要在相对较短的时间内访问许多页面。经过观察,我注意到这是相当低效的,因为我只对标记文件中的数据感兴趣,而整个页面都是图像,字体之类的内容是相当慢的。所以如果有一种方法可以跳过其他内容类型,让Puppeteer只返回HTML文件内容,那就太好了。下面是我的代码:

const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();

const helperFile = fs.readFileSync("dist/app/scripts/helpers.js", "utf8");
await page.evaluateOnNewDocument(helperFile);

await login(page);
await postLogin(page);
await crawl(page); // this function is gonna call a lot of page.goTo(...)

await browser.close();
mpbci0fu

mpbci0fu1#

您可以拦截来自Puppeteer的所有请求,只允许将文档返回到continue()的请求,并丢弃其余请求。
我还决定包含script类型,因为JS代码可能会修改初始DOM树(类似于appendChild(node)),如果您将SPA与React这样的现代FW/库一起使用,其中服务器只返回几个JS包来在客户机中生成HTML,则情况尤其如此。scriptfetch类型是在JS代码向服务器发出额外请求以获取更多数据和更新DOM树时使用的。
第一个

bvuwiixz

bvuwiixz2#

我认为这个图书馆也提供了一个很好的方法来做这件事。它对我来说很有效。
https://www.npmjs.com/package/puppeteer-extra-plugin-block-resources
这里我告诉它阻止获取图像,脚本和样式表。还要注意,我没有使用plain puppeteer,而是puppeteer-extra,这是另一个需要的库。

const puppeteer = require('puppeteer-extra');
const blockResourcesPlugin = require('puppeteer-extra-plugin-block-resources')();
puppeteer.use(blockResourcesPlugin);

...
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();

blockResourcesPlugin.blockedTypes.add('image');
blockResourcesPlugin.blockedTypes.add('stylesheet');
blockResourcesPlugin.blockedTypes.add('script');

await page.goto('http://www.msn.com/', {waitUntil: 'domcontentloaded'});

相关问题