带有许多（数百个）可折叠PanelExtender的ASP.NET页面的性能问题

我正在维护一个ASP.NET网站，用户可以登录该网站来注册一些数据集（用于统计目的）。一个用户为一组单元注册数据，对于这些单元中的每一个单元，都要填写一组表单（每个表单中都有一些字段，但这并不重要）。一种情况是，一个用户有12个单元，每个单元中有25个表单需要填写，这意味着总共有300个表单

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

页面是完全动态生成的（因为表单可以添加到数据库中），对于生成可折叠PanelExtender，我有以下代码：

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个可折叠PanelExtender。正如我所说，默认情况下，它们都将被折叠，但问题是：

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

所以我的问题很简单：有没有一种方法可以优化它，使加载变得更平滑？例如，是否可以先在每个可折叠PanelExtender中加载标题面板，然后以某种方式异步加载内容面板

最后一项澄清：

---

我知道我可以简单地改变页面的设计，只包含一个单元，从而大幅减少内容的大小，但我希望避免这种情况（用户更喜欢将所有内容都放在一个页面中的方式）。这也意味着对页面的逻辑进行了相当大的更改（是的，我知道-这是一个糟糕的代码库）

在询问了更多信息后，我终于解决了这个问题。解决方案是完全跳过可折叠PanelExtender，而是使用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>

$（文档）.ready（函数（）{
$（“div.HeaderPanel”）。切换(
函数（）{
$（this.next（“div.ContentPanel”）.show（“slow”）；
},
函数（）{
$（this.next（“div.ContentPanel”）.hide（“slow”）；
});
});

---

这个解决方案真的很简单，而且效果很好！折叠/扩展比我使用可折叠PanelExtender时看起来更平滑、更好，页面加载速度也非常快：）

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