具有大页面的 IE7 中的页面性能答案

【问题标题】：Page Performance in IE7 with a large page具有大页面的 IE7 中的页面性能
【发布时间】：2010-11-17 14:14:34
【问题描述】：

好的，所以我正在编写一个失败的复杂 ASP.NET 页面，其中包含很多与之相关的 javascript。问题是页面有很多事情要做，但是浏览器只是在很多时候没有响应并且滞后，而 javascript 似乎执行得很好。

在这个页面中，我发送了一个可用项目的数组列表供用户选择。好吧，当这个列表增长到喜欢列表中的 1000 多个项目时，页面就会因为缺少更好的词而变得糟糕。如果我没有那么多项目可以从页面中选择，那效果很好。我的意思是 javascript 性能还可以，但页面只是滞后。页面上的滚动条只是滞后，感觉就像可怕。当然，这一切都不会在 Chrome 或 Firefox 中发生。

为了让您对这个问题有更多的了解，该网站有大约 15 万个未压缩的未压缩 css 样式用于此页面，大约 10,000 行 js 代码，包括特定于页面的框架、控件和业务规则，以及保存到文本文档的数组对象文本约为 200kb。

任何关于此事的帮助都会受到极大的欢迎，因为这是我第 5 个月努力加快速度...

【问题讨论】：

页面到底是做什么的？除了您明确需要简化之外，我无法想象在没有更多信息的情况下给您任何相关建议。
您是否进行了任何测试以确保它绝对是导致问题的 javascript？即，您是否尝试过完全删除 CSS 引用？另外，页面上有表格吗？

标签： asp.net javascript css performance internet-explorer-7

【解决方案1】：

Yahoo performance rules 之一是“减少 DOM 元素的数量”。他们这样说是有原因的。

当您开始进入“数千”个 DOM 元素的范围时，IE 会很快陷入困境。与页面的每次交互都会变慢。唯一的“解决方案”是使用更少的 DOM 元素。

例如，我最近制作了一个 Web 应用程序，其中包含 4 个网格，每个网格有 100 行，大约 10 列，所有这些网格同时可见。那些 4000 个单元使 IE 变得非常慢。我通过使用缓冲视图网格解决了这个问题，它只呈现可见行，并从 DOM 中删除可见滚动区域之外的行（如果您感兴趣，可以使用 ExtJS 网格）。

【讨论】：

【解决方案2】：

当然，这在 Chrome 或 Firefox 中都不会发生。

一旦事情变得很棒，我的小 Web 应用程序开发人员的存在就是祸根。除了简化页面之外，通常没有其他答案。

分页背后的概念适用于其他应用程序部分。一旦它很大，Active Directory 就不会在单个列表中显示每条记录——而且它是一个桌面应用程序。

把它切回去，然后使用接口逐步获取东西（通常通过 JSON 请求对我来说）。

【讨论】：