带有许多（数百个）CollapsiblePanelExtenders 的 ASP.NET 页面的性能问题答案

【问题标题】：Performance issue with ASP.NET page with many (hundreds of) CollapsiblePanelExtenders带有许多（数百个）CollapsiblePanelExtenders 的 ASP.NET 页面的性能问题
【发布时间】：2010-04-23 16:17:57
【问题描述】：

我正在维护一个 ASP.NET 站点，用户可以在其中登录以注册一组数据（用于统计目的）。一个用户为一组单位注册数据，并且为每个单位填写一组表格（每个表格中有几个字段，但这并不重要）。一种情况是，用户有 12 个单元，每个单元中有 25 个表单要填写，也就是说总共有 300 个表单。

用于注册这些数据的 ASP.NET 页面的制作方式如下：每个表单都位于一个可以使用 AjaxControlToolkit CollapsiblePanelExtender 折叠的面板中，并且一个单元中的所有表单都位于另一个也可以折叠的面板中。结果是您有一个类似树视图的结构，单元在顶部，在每个单元下您可以展开一组表单，并且可以进一步展开每个表单以填充数据（页面加载时所有面板都折叠默认）。

页面是完全动态生成的（因为可以在数据库中添加表单），并且为了生成 CollapsiblePanelExtenders，我有以下代码：

private CollapsiblePanelExtender GenerateCollapsiblePanelExtender(string id, Panel headerPanel, Panel contentPanel)
{
    CollapsiblePanelExtender collapsiblePanel = new CollapsiblePanelExtender();

    collapsiblePanel.ID = id + ID_COLLAPSIBLE_PANEL_POSTFIX;
    collapsiblePanel.TargetControlID = contentPanel.ID;
    collapsiblePanel.CollapseControlID = headerPanel.ID;
    collapsiblePanel.ExpandControlID = headerPanel.ID;
    collapsiblePanel.Collapsed = true;
    collapsiblePanel.BehaviorID = collapsiblePanel.ID + ID_BEHAVIOUR_POSTFIX;

    return collapsiblePanel;
}

一个用户有 12 个单元，每个单元有 25 个表单，这意味着总共有 312 个 CollapsiblePanelExtender。正如我所说，默认情况下它们都设置为折叠，但问题是：

当页面加载时，它们似乎都被展开了，然后浏览器“开始折叠它们”。然而，这需要非常很长时间（在 Firefox 中，我什至收到关于无响应脚本的警告，IE 和 Chrome 只需要很长时间，但没有警告）。当所有“折叠”完成后，它可以顺利打开和关闭单个面板，但用户抱怨初始加载极其缓慢。

所以我的问题很简单：有没有办法对此进行优化以使加载更顺畅？例如，是否可以最初只加载每个 CollapsiblePanelExtender 中的标题面板，然后以某种方式异步加载内容面板？

最后的澄清：
我知道我可以简单地将页面的设计更改为仅包含一个单元，从而大大减少内容的大小，但我希望避免这种情况（用户更喜欢将所有内容放在一页中的方式）。这也意味着对页面逻辑的相当大的改变（是的，我知道 - 那时它的代码库很差）

【问题讨论】：

PS：我现在要下班了，所以我可能暂时无法对任何回复发表评论。
我一直试图在这个问题上进行更多研究，但运气不佳。只是为了验证 large 页面（大约 1MB 和 maaany 输入字段）根本不是问题，我尝试完全禁用所有 CollapsiblePanelExtenders（直接显示所有内容和标题面板），然后在合理的时间内加载页面，所以这不是问题。如果有人对此有某种意见，我将不胜感激:)

标签： asp.net jquery performance ajaxcontroltoolkit collapsiblepanelextender

【解决方案1】：

在other places 周围询问了更多信息后，我终于设法解决了这个问题。解决方案是完全跳过 CollapsiblePanelExtenders，而是使用 jQuery 来处理折叠/扩展。

在我的结构中，所有标题面板都使用 css 类 HeaderPanel，所有内容面板都使用 css 类 ContentPanel（所有这些都默认隐藏）。然后我可以使用以下脚本来处理所有折叠/展开逻辑：

<script language="javascript">
    $(document).ready(function() {
        $("div.HeaderPanel").toggle(
        function() {
            $(this).next("div.ContentPanel").show("slow");
        },
        function() {
            $(this).next("div.ContentPanel").hide("slow");
        });
    });
</script>

解决方案真的很简单，而且效果很好！折叠/扩展比我使用 CollapsiblePanelExtenders 时看起来更平滑和更好，并且页面加载速度也非常快:)

【讨论】：