javascript - innerHTML 大小限制

Question

我想使用 AJAX 将 html 文件加载到 <div> 中然后我需要对此运行 jsMath。到目前为止，我对 innerHTML 所做的一切都是一两段，也许是表格和/或图像。没什么特别的。

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

提前致谢。

--戴夫

Answer 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 中，我可以通过循环到上面的 innerHTML-childNodes[0] 创建一个长度为 167 772 160 的 i < 24。但在超过这个长度的某处，会出现 InternalError: allocation size overflow 错误。