Puppeteer 加载数据的时间太长

Question

我有以下内容：

const puppeteer = require('puppeteer');
var express = require('express');
var app  = express();
var port = process.env.PORT || 3001;

app.listen(port);

app.get('/', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    (async () => {
        const browser = await puppeteer.launch();
        const page = await browser.newPage();
        await page.goto(`url`);

        const data = await page.evaluate(() => {
            const imgs = Array.from(document.querySelectorAll('.dp-gallery__list-item img'));
            return imgs.map(td => {
                var txt = td.src;
                return txt;
            });
        });

        res.send({ data });
        await browser.close();
    })();
});

我需要的内容 .dp-gallery__list-item img 由 js 动态加载（我已经通过禁用 js 对其进行了测试）因此使用了 puppeteer.

我面临的问题是，每次我点击“/”时，都需要 3/4 秒才能收到 ui:

中的响应

const About = ({data}) => (
  <div>
    <Header />
    {data &&
        data.map(((img, i) => <img key={`${i} '-' ${img}`} src={img} />))
    }
    <p>Hello Next.js</p>
  </div>
);

About.getInitialProps = async ({query: {id}}) => {
    const res = await fetch('http://localhost:3001/');
    const data = await res.json();
    console.log('id: ', id);
    return data;
}

export default About;

是因为我要查找的内容是动态加载的，还是我缺少 Puppeteer 配置的某些内容？

Answer 1

当您点击“/”时，它会执行很多操作，包括以下内容：

它打开创建一个新的临时 chrome 配置文件。
启动带有特定标志和选项的 chrome。
创建一个新标签。
加载目标 url。
等待一些事件触发。
评估您的代码。
关闭浏览器。
发送您的数据。

基本上是按照指示去做的。创建新 chrome 选项卡的速度取决于您的计算机资源，导航到该网站取决于您的计算机和目标网站。如果它是动态网站，那么各种页面加载事件会增加成本。还有 UI 的开销。

因此完成所有这些步骤需要 3-4 秒。

Puppeteer 加载数据的时间太长

Puppeteer takes too many seconds to load the data

javascript

puppeteer