javascript - 查找并打印网页大小(以字节为单位)以及所有 <a> 标签的数量

Question

我正在开发一个 CLI 工具，它将 URL 参数作为输入。我正在使用jsdom package在node.js中创建一个伪DOM来解决这个问题。我正在使用以下 vanilla-js 脚本:

console.log('Page Size (in bytes): ', (document.getElementsByTagName('HTML')[0].outerHTML.length) / 1024);
console.log('Count of <a> tags: ', document.getElementsByTagName('a').length);

<a href="">
<a href="">
<a href="">
<a href="">
<a href="">

在我的node.js环境中如下:

'use strict';

const jsdom = require("jsdom");
const { JSDOM } = jsdom;

// run loop for first argument till last
process.argv.slice(2, process.argv.length).forEach(function () {

// getting the url as argument
var pgurl = "" + process.argv[2];
console.log('For ', pgurl);

const document = (new JSDOM(``, {
    url: pgurl,
    pretendToBeVisual: true
})).window.document;

console.log('Page Size (in bytes): ', (document.getElementsByTagName('HTML')[0].outerHTML.length) / 1024);
console.log('Count of <a> tags: ', document.getElementsByTagName('a').length);

});

现在，由于最初的浏览器内解决方案对我有用，我尝试在 node.js 和 https://facebook.com 上实现作为参数传递，它显示以下输出:

For  https://facebook.com
Page Size (in bytes):  0.0380859375
Count of <a> tags:  0

无论内容如何，​​所有输入都保持不变。

是否还有其他解决方案，因为基本上我想要的是在 node.js 中实现浏览器 DOM，同时传递我的 URL 作为要处理的输入参数，如上面的代码片段所示。

Answer 1

您遇到了多个问题。

最简单的是，您正在计算“页面大小(以字节为单位)”(添加了强调)，但将字符串长度除以 1024，这就是您计算千字节的方法。请注意，字符串长度仅在有限的情况下才等于字节长度。

一个更大的问题是您没有定义“页面大小”的含义。例如，人们经常将“页面大小”称为服务器发送到浏览器的初始有效负载的大小。使用 outerHTML 对此并不可靠，因为有效负载可能已被压缩。如果您想要的是为浏览器提供的用于制作页面的 HTML 的大小，则 outerHTML 仍然不可靠，因为它会向您显示已清理的内容 HTML，而不是浏览器收到的原始 HTML。

还有一个问题是，像 Facebook 这样的网站使用 JavaScript 构建页面，因此 JavaScript 代码必须首先运行。 JSDOM 默认情况下不执行 JavaScript。原因是 JSDOM 无法保证在 JSDOM 处理的页面上执行的 JavaScript 不会执行恶意操作。请参阅this explanation .

还有一个问题是，当使用 JavaScript 构建页面时，没有通用信号可以让您知道该页面已“完成”构建。您需要决定什么事件与您相关。例如我认为显示“登录”按钮时构建的页面。您必须等待该事件。我在这里宽松地使用“事件”一词。可能有一个实际的 DOM 事件与您想要的或不想要的相对应。 (但请注意，DOM load 事件不会等待 JavaScript 代码完成其工作。它会在页面的 HTML 处理完毕后以及任何之前发出。异步 JavaScript 可能会进一步修改页面。)