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

Question

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

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

是否有可能以编程方式查询 DOM 以了解 DOM 的大小 - 可以是等效 HTML 文本的字节数(即文件大小)，或者理想情况下是 DOM 占用的内存量？

Answer 1

我会尝试这样的事情:

window.document.documentElement.innerHTML.length

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

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

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

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

无论出于何种原因，这都是一件大事。您可以看看 XPCOM，也可以构建自己的 API 来返回 DOM 中使用的内存量。

但你应该跳出框框思考

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

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