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对其进行了测试），因此使用了伪造者。

我面临的问题是，每当我按下'/'时，都需要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浏览器。
创建一个新标签。
加载目标网址。
等待一些事件触发。
评估您的代码。
关闭浏览器。
发送数据。

基本上按照指示执行。创建新的chrome标签的速度取决于您的计算机资源，导航到该网站取决于您的计算机和目标网站。如果它是动态网站，则各种页面加载事件会增加成本。 UI的开销也很大。

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

木偶戏需要太多时间来加载数据

1 个答案: