但你应该开箱即用

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 - ＆gt; 4个字节。

“猜测”文档大小的一种方法是扫描上面代码段结果中包含的每个字符。任何不是ascii的东西都会有至少2个字节用于utf-8（除非你在文档中有chineese或非常奇怪的语言，否则它不可能超过2个字节）。即使这样也没有说明它在内存中占用了多少空间，因为文本可能比DOM对象占用更多空间。将整个树解析为String将使用内存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

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

2 个答案:

但你应该开箱即用