innerHTML 大小限制

Posted 2023-05-07

【中文标题】innerHTML 大小限制

【英文标题】：innerHTML size limit

【发布时间】：2010-12-29 16:41:15

【问题描述】：

我想使用 AJAX 将 htmlfile 加载到 <div> 中，然后我需要在此运行 jsMath。到目前为止，我对 innerHTML 所做的一切都是一两个段落，可能是表格和/或图像。没什么太花哨的。

当我将 innerHTML 设置为具有各种复杂 css 格式的外部 25k 文件时，可能会出现哪些潜在问题？ （感谢 jsMath）我想不出任何其他方法可以做到这一点，但需要知道是否有任何限制。

提前致谢。

--戴夫

【问题讨论】：

提醒一下，您应该接受问题的答案。就是这样。

【参考方案1】：

我不知道任何浏览器特定的大小限制，但如果您分配的字符串长度超过 65536，Chrome 会将其拆分为多个 elem.childNodes，因此您可能需要遍历这些节点并将它们连接起来。

在 Chrome 开发工具中运行以下片段。它构造了一个 160k 的字符串，但 theDivElement.childNodes[0] 被剪裁为 65536 个字符。

var longString = '1234567890';
for (var i = 0; i < 14; ++i) 
  longString = longString + longString;

console.log('The length of our long string: ' + longString.length);
var elem = document.createElement('div');
elem.innerHTML = longString;
var innerHtmlValue = elem.childNodes[0].nodeValue;
console.log('The length as innerHTML-childNodes[0]: ' + innerHtmlValue.length);
console.log('Num child nodes: ' + elem.childNodes.length);

结果：（Chrome 版本 39.0.2171.95（64 位），Linux Mint 17）

The length of our long string: 163840
The length as innerHTML-childNodes[0]: 65536
Num child nodes: 3

但在 Firefox 中，innerHTML 不会将内容拆分为多个节点：（Firefox 版本 34.0，Linux Mint 17）

"The length of our long string: 163840"
"The length as innerHTML-childNodes[0]: 163840"
"Num child nodes: 1"

因此，您需要考虑到不同的浏览器处理 childNodes 的方式不同，并且可能会遍历所有子节点并进行连接。 （我注意到了这一点，因为我尝试使用 innerHTML 来取消转义 > 100k HTML 编码的字符串。）

事实上，在 Firefox 中，我可以通过循环到上面的 i < 24 来创建长度为 167 772 160 的 innerHTML-childNodes[0]。但是在这个长度之上的某个地方，有一个InternalError: allocation size overflow 错误。

【讨论】：

我们可以调用node.normalize()方法，而不是遍历所有子节点。

【参考方案2】：

技术上没有什么可以阻止您这样做。最大的问题是页面加载时间。请务必包含某种指示，表明数据正在加载，否则看起来好像什么都没有发生。

【参考方案3】：

在我目前正在处理的应用程序中，我在任何浏览器将 innerHTML 设置为 30k 或更多的字符串时都没有遇到任何问题。 （不知道限制是多少）

【参考方案4】：

这种类型的唯一限制纯粹是带宽和处理器相关。你应该确保你的 ajax 请求没有设置低超时。您还应该在一些速度较低的计算机上进行测试，看看是否存在内存问题。一些旧的浏览器可能对内存中的大对象非常不宽容。

【参考方案5】：

您可能希望使用dynatrace ajax 或speed tracer 之类的工具对此进行分析，以了解将innerHTML 设置为非常大的值如何影响性能。您可能希望将其与另一种方法进行比较，例如将新内容放入 iframe 或对内容进行分页。

【讨论】：

我没想到本身我正在使用 AJAX 在第 6 章审查、第 7 章审查等之间做出决定，但我没想过要分开每个复习。谢谢

【参考方案6】：

您的限制很可能是从您的网络服务器设置的下载限制。通常是几个 MB。一些 web 框架允许增加这个大小，但你不能这样做，因为这意味着增加缓冲区大小，这不是一件好事。