Question

我想使用AJAX将htmlfile加载到<div>我将需要在此运行jsMath。到目前为止，我使用innerHTML完成的所有内容都是一段或两段，可能是表格和/或图像。没什么太花哨的。

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

提前致谢。

- 戴夫

Answer 1

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

在Chrome开发者工具中运行以下剪辑。它构造一个160 k的字符串，但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中并没有将内容拆分成多个节点：（FF 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取消了一个＆gt; 100k HTML编码的字符串。）

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

Answer 2

没有什么可以阻止你在技术上这样做。最大的问题是页面加载时间。请确保包含某些数据正在加载的指示，或者看起来似乎没有发生任何事情。

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

innerHTML大小限制

6 个答案: