2

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

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

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

4

2 回答 2

3

我会尝试这样的事情：

window.document.documentElement.innerHTML.length

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

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

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

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

如果出于某种原因，这是一件大事。你可以看看 XPCOM，你可以构建自己的 API，返回 DOM 中使用的内存量。

但你应该跳出框框思考

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

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

于 2013-10-08T10:18:05.760 回答
1

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

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

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

$( "*" ).length
于 2013-10-08T10:19:20.217 回答