我想使用 AJAX 将一个 htmlfile 加载到一个文件<div> 中，然后我需要在这个文件上运行 jsMath。到目前为止，我对 innerHTML 所做的一切都是一两个段落，可能是表格和/或图像。没什么太花哨的。
当我将 innerHTML 设置为具有各种复杂 css 格式的外部 25k 文件时，可能会出现哪些潜在问题？（感谢 jsMath）我想不出任何其他方法来做到这一点，但需要知道是否有任何限制。
提前致谢。
——戴夫
问问题
8005 次
6 回答
4
我不知道任何浏览器特定的大小限制，但是如果您分配的字符串长于 65536，Chrome 会将其拆分为 many 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方式不同，并且可能会遍历所有子节点并进行连接。（我注意到了这一点，因为我试图使用innerHTMLunescape > 100k HTML 编码的字符串。）
事实上，在 Firefox 中，我可以通过循环到上面来创建innerHTML-childNodes[0]长度为 167 772 160 的长度。i < 24但是在这个长度之上的某个地方，有一个InternalError: allocation size overflow错误。
于 2014-12-18T11:33:55.773 回答
1
没有什么可以阻止您在技术上执行此操作。最大的问题是页面加载时间。一定要包含某种指示数据正在加载，否则看起来好像什么都没有发生。
于 2009-12-24T01:04:36.807 回答
1
在我目前正在处理的应用程序中，在任何浏览器将 innerHTML 设置为 30k 或更多的字符串时，我都没有遇到任何问题。（不知道限制是多少）
于 2009-12-24T01:05:13.273 回答
0
这种类型的唯一限制纯粹是带宽和处理器相关。你应该确保你的 ajax 请求没有设置低超时。您还应该在一些速度较低的计算机上进行测试，看看是否存在内存问题。一些旧的浏览器可能对内存中的大对象非常不宽容。
于 2009-12-24T01:06:18.063 回答
0
您的限制很可能是从您的网络服务器设置的下载限制。通常是几个 MB。几个 web 框架允许增加这个大小，但你不能这样做，因为这意味着增加缓冲区大小，这不是一件好事。
于 2009-12-24T01:40:52.280 回答
0
您可能希望使用dynatrace ajax或速度跟踪器之类的工具对此进行分析，以了解将 innerHTML 设置为非常大的值如何影响性能。您可能希望将其与另一种方法进行比较，例如将新内容放入 iframe 或对内容进行分页。
于 2009-12-24T01:13:26.397 回答