加载大页面时 Internet Explorer 无响应

Posted 2023-03-05

技术标签:

【中文标题】加载大页面时 Internet Explorer 无响应【英文标题】：Internet explore is unresponsive while loading a large page 【发布时间】：2011-02-11 10:43:40 【问题描述】：

我们在浏览器 (IE) 中呈现了一个 html 页面，导致浏览器挂起。该页面是通过服务器端脚本生成的（ASP.NET 和视图状态被禁用）。加载页面需要很长时间（它不是黑白问题，因为我们可以在本地机器上重现它）并且有时会导致脚本无响应错误。在调试问题时，我们发现客户端的 html 大小为 4.73 MB。在文档准备好（jquery-document.ready）之后还有很多 DOM 遍历（使用 JQuery）。加载之后，页面也会在任何用户交互（滚动、鼠标悬停）等情况下挂起。在加载期间和任何用户交互时都会看到 CPU 使用率峰值（25-50% 使用率）

【问题讨论】：

不是大文件，而是 javascript。你必须优化它，并理解它永远不会一样，但至少它会“发挥作用” 我不同意。两者肯定是相关的。文件越大，JS 处理 DOM 的时间就越长；仅仅是因为它有更多的节点要处理。如果禁用 jquery 代码会怎样？我可以理解在页面加载时 jquery dom 遍历可能会出现问题。但是即使页面完全加载并“准备好”，页面也会挂起。例如即使这些事件没有 dom 遍历，滚动甚至 document.click 也会导致页面挂起。 “完全加载并准备就绪”是什么意思。你的意思是页面在浏览器中是完全可见的吗？还是只是JS处理完成了？而且，为什么客户端的 HTML 数量如此之多？ 【参考方案1】：

Internet Explorer 的 DOM 非常奇特。它非常脆弱。

我推荐以下内容： http://msdn.microsoft.com/en-us/library/ms533019(VS.85).aspx http://blog.dynatrace.com/2009/12/12/understanding-internet-explorer-rendering-behaviour/ http://blogs.msdn.com/ie/archive/2006/08/28/728654.aspx

最重要的是： http://www.quirksmode.org/dom/innerhtml.html

【讨论】：

【参考方案2】：

如果加载时的“脚本无响应”对话框有问题，至少在较旧的 IE 版本中可能会被欺骗。使用setTimeout 将您正在做的工作分成多个任务。这会导致 IE 无法跟踪使用了多少总执行时间。

您可以在后台工作进行时抛出某种“正在加载”的 div，这至少会带来更好的用户体验。

【讨论】：

【参考方案3】：

我首先要看的是客户端收到的超大 HTML 大小。 Internet Explorer 并不以快速处理大量 HTML 而闻名，尤其是当您在之后进行大量 DOM 遍历时。如此大的树的 DOM 处理解释了 CPU 峰值。

真的有必要向客户端发送这么大量的HTML吗？

【讨论】：

【参考方案4】：

这可能对您有所帮助，也可能无济于事，但我唯一一次看到 html 页面甚至远程接近该大小是当有人将大量数据写入 js 数组以进行查找时。