javascript - 在JavaScript中,html有一种以编程方式度量页面权重的方法?

  显示原文与译文双语对照的内容

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

如果正在构建的文档大小太大,我愿意采取诸如清除旧信息这样的操作。

可以以编程方式查询 DOM,以了解DOM的大小是等效HTML文本( 例如 文件大小)的字节数,还是理想的内存量。

时间: 原作者:

我想试试这样的东西:


window.document.documentElement.innerHTML.length



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

UTF-8 每个ASCII字符将有 1个字节。 任何不是ascii的东西都可以从 2字节到 6字节。 如果文档的编码不同,每个字符的大小将不同。 UTF-16 将每字符 2bytes 和 UTF-32 -> 4字节。

对文档大小的一个方法是扫描snippet结果中包含的每个字符。 对于 UTF-8 ( 除非文档中有chineese或者真奇怪的语言,否则不太可能超过 2字节),任何不是ascii的内容都至少有 2字节。 即使该文本可以能占用的空间比DOM对象要多,这也不会告诉内存占用多少空间。 将整个树解析为字符串将使用内存二,但是如果正确的话,文档的大小将不会太大。

如果你想知道页面在DOM中占用了多少空间,那么每个DOM元素都是不可能的,而且没有API可以让你在内部访问到内部。

不管什么原因,这是个大问题。 你可以查看 XPCOM,你可以构建自己的API来返回DOM中所使用的内存量。

但你应该考虑到

你所遇到的问题不太可能,因为页面是大的。 但是因为一些JS正在创建大量的dom对象。 使用profiler来观察页面的生成方式,你可能会考虑: 我们必须保留所有附加到文档的对象? 如果页面在某处变得大,那么可以限制 block 中显示的元素数量,并将数据保存在内存中。 当需要DOM对象时重建它们。 将数据保存在js代码中。 如果有些数据没有使用,你可以忘记它或者把它们存储为 inside indexeddb 。 需要时从那里重新载入。

不要使用 display: 隐藏dom对象, 无。仅在需要时生成DOM对象。 如果你在整个位置都有隐藏的DOM对象。

...