在无头浏览器中加载 url 以使用节点 js 获取其动态内容答案

【问题标题】：Load url in headless browser to get its dynamic content using node js在无头浏览器中加载 url 以使用节点 js 获取其动态内容
【发布时间】：2020-09-17 02:38:16
【问题描述】：

我有一个带有单个主页的节点 js 应用程序。此主页将使用 API 动态呈现内容。

为了提高性能，我不想在用户每次启动 url 并进行 API 调用以呈现内容时调用。相反，我想创建带有 HTML 内容的静态文件并存储在文件夹中并在用户启动 url 时呈现。

为了实现这一点，首先我需要无头浏览器加载 url 并获取 HTML 内容并将内容放入文件并使用节点 JS 存储为文件夹下的唯一 HTML 文件（Fi2FEt1gM.html）

我正在尝试获取如下所示的动态 HTML 内容

方法一：

            var http = require("http");

                http.get('http://localhost:3001/Fi2FEt1gM', function(res){
                    res.setEncoding('utf8');
                    res.on('data', function(chunk){
                        console.log(chunk);
                    });
                });

方法二：

            const puppeteer = require('puppeteer');

              (async () => {
                try {
                  const browser = await puppeteer.launch();
                  const page = await browser.newPage();
                  await page.goto('http://localhost:3001/Fi2FEt1gM');
                  await page.waitForSelector('html', { timeout: 3000 });

                  const body = await page.evaluate(() => {
                    return document.querySelector('body').innerHTML;
                  });
                  console.log(body);

                  await browser.close();
                } catch (error) {
                  console.log(error);
                }
              })();

从所有方法中，我总是得到静态 HTML 而不是动态内容。我的抓取内容如下所示

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="author" content="">
    ....
</head>
<body>
    <div class='wrapper'>
        <div class="container">
            Loading...
            <-- DYNAMIC CONTENT --->
        </div>
    </div>
</body>
</html>

请告知我的方法

【问题讨论】：

动态内容是从您的服务器还是从远程服务器提供的？
由同一台服务器提供的不可靠的动态内容！
所以你需要一个固定的端点，它提供动态内容。在您的 puppeteer 调用中，您需要调用提供动态内容的固定端点、获取内容、写入新文件。现在是这样吗？
我的页面将有超过百万访问者的访问量变化。为了避免频繁调用并提高性能，我曾考虑在一个文件夹下生成 HTML 文件，并在用户启动页面时使用该生成的文件进行渲染。这将有助于提高性能。是的，你的理解是正确的
好吧，如果内容确实不会根据谁在什么时间访问它而改变，并且你可以接受切换发生的小时间，这应该会很好。希望您不会开始使用多台服务器进行扩展，在这种情况下，这会有点困难。

标签： javascript html node.js http puppeteer

【解决方案1】：

这样的东西不适合你吗？

wget -q --mirror -p --adjust-extension -e robots=off --base=./ -k -P ./ [yoururl]

这应该会产生静态页面，然后您可以按照您想要的方式解析。

【讨论】：