加载大页面时，Internet Explorer无响应

Question

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

Answer 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

Answer 2

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

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

Answer 3

我要看的第一件事是客户端收到的疯狂大小的HTML大小。 Internet Explorer并不以快速处理大量HTML而闻名，尤其是在您之后进行大量DOM遍历时。这种大树的DOM处理解释了CPU峰值。

是否真的有必要向客户端发送如此大量的HTML？

Answer 4

这可能会有所帮助，也可能没有帮助，但我唯一一次看到html页面甚至远远接近这个大小的时候，就是有人将大量数据写入js数组进行查找。

也许考虑将一些数据（甚至是html，如果它可以很好地分区）移动到web服务/ ajax调用中？无论如何，查找通常会更有效率。

如果它只是原始html，请考虑对其进行分区，并在用户向下滚动/单击选项卡等时仅通过ajax加载下一部分。