我想使用 AJAX 将 htmlfile 加载到 <div> 中，然后我需要在此运行 jsMath。到目前为止，我对 innerHTML 所做的一切都是一两个段落，可能是表格和/或图像。没什么太花哨的。
当我将 innerHTML 设置为具有各种复杂 css 格式的外部 25k 文件时，可能会出现哪些潜在问题？ （感谢 jsMath）我想不出任何其他方法可以做到这一点，但需要知道是否有任何限制。
提前致谢。
--戴夫
【问题讨论】：
标签： javascript ajax innerhtml
我不知道任何浏览器特定的大小限制，但如果您分配的字符串长度超过 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 错误。
【讨论】：
技术上没有什么可以阻止您这样做。最大的问题是页面加载时间。请务必包含某种指示，表明数据正在加载，否则看起来好像什么都没有发生。
【讨论】：
在我目前正在处理的应用程序中，我在任何浏览器将 innerHTML 设置为 30k 或更多的字符串时都没有遇到任何问题。 （不知道限制是多少）
【讨论】：
这种类型的唯一限制纯粹是带宽和处理器相关。你应该确保你的 ajax 请求没有设置低超时。您还应该在一些速度较低的计算机上进行测试，看看是否存在内存问题。一些旧的浏览器可能对内存中的大对象非常不宽容。
【讨论】：
您可能希望使用dynatrace ajax 或speed tracer 之类的工具对此进行分析，以了解将innerHTML 设置为非常大的值如何影响性能。您可能希望将其与另一种方法进行比较，例如将新内容放入 iframe 或对内容进行分页。
【讨论】：
您的限制很可能是从您的网络服务器设置的下载限制。通常是几个 MB。一些 web 框架允许增加这个大小，但你不能这样做，因为这意味着增加缓冲区大小，这不是一件好事。
【讨论】：