有没有办法在 JavaScript 中以编程方式测量页面重量？

Question

我正在开发一个通过 JavaScript 操作 HTML DOM 来动态构建 UI 的 Web 应用程序。

如果正在构建的文档的大小变得太大（假设某个任意数字），我想采取行动 - 例如清除旧信息。

是否可以通过编程方式查询 DOM 以了解 DOM 的大小 - 以等效 HTML 文本的字节数（即文件大小）或理想情况下 DOM 占用的内存量？

Answer 1

我会尝试这样的：

window.document.documentElement.innerHTML.length

但老实说，它比这复杂得多。它将返回字符的数量。要获取文档的大小，您必须实际检查文档使用的字符集/编码。

UTF-8 对于每个 ASCII 字符都有 1 个字节。任何不是 ascii 的东西都可能有 2 到 6 个字节大。如果文档采用不同的编码，每个字符的大小将不同。 UTF-16 每个字符有 2 个字节，而 UTF-32 -> 4 个字节。

“猜测”文档大小的一种方法是扫描上述 sn-p 结果中包含的每个字符。任何不是 ascii 的东西都至少有 2 个字节用于 utf-8（除非您在文档中有中文或非常奇怪的语言，否则它不太可能超过 2 个字节）。即使这样也不能说明它在内存中占用了多少空间，因为文本可能比 DOM 对象占用更多空间。将整个树解析为字符串将使用内存 2，但如果操作正确且文档有多大，它应该不会那么重。

如果您想知道页面在 DOM 中的“内存”中占用了多少空间，这是不可能的，因为每个 DOM 元素都是依赖特定的，并且没有 API 可以让您在内部访问。

如果出于某种原因，这很重要。你可以看看 XPCOM，你可以构建自己的 API 来返回 DOM 中使用的内存量。

但你应该跳出框框思考

您遇到的问题不太可能，因为页面很大。但是因为一些 JS 正在创建大量的 dom 对象。使用分析器来观察页面是如何构建的，您可能会考虑这一点：我们是否必须保留所有附加到文档的对象？如果页面在某个地方变大，您可以限制块中显示的元素数量并将数据保留在内存中。在需要时重建 DOM 对象。将数据保存在您的 js 代码中。如果某些数据未被使用，您可以忘记它或将它们存储在 indexeddb 中。需要时从那里重新加载。

不要使用“display: none”隐藏 dom 对象。仅在需要时构建 DOM 对象。如果您到处都有隐藏的 DOM 对象。

Answer 2

可能无法计算可用内存，因为 Javascript（浏览器环境）在沙箱中运行，它无法访问系统资源，因此您无法检测内存使用情况，但您绝对可以计算页面大小和可用元素数量等：

( document ).ready(function() {
        var pageSize = $('html').html().length;
        var kbytes = pageSize / 1024;
    }
);

或者您可以根据页面上的元素数量采取一些措施：

$( "*" ).length