Проблема производительности со страницей ASP.NET со многими (сотнями) CollapsiblePanelExtenders - PullRequest
Новая
       44

Проблема производительности со страницей ASP.NET со многими (сотнями) CollapsiblePanelExtenders

0 голосов
/ 23 апреля 2010

Я поддерживаю сайт 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 CollapsiblePanelExtenders. Как я уже сказал, по умолчанию все они свернуты, но вот проблема:

Когда страница загружается, все они кажутся развернутыми, и затем браузер «начинает их сворачивать». Однако это занимает очень долгое время (в Firefox я даже получаю предупреждение о не отвечающем скрипте, IE и Chrome работают только вечно, но без предупреждения). Когда все «свертывания» завершены, можно плавно открывать и закрывать отдельные панели, но пользователи жалуются на чрезвычайно медленную начальную загрузку.

Так что мой вопрос прост: есть ли способ оптимизировать это так, чтобы загрузка прошла более гладко? Например, возможно ли изначально загружать только панели заголовков в каждом CollapsiblePanelExtender, а затем каким-то образом асинхронно загружать панель содержимого?

Одно окончательное уточнение:
Я знаю, что я мог бы просто изменить дизайн страницы, включив в нее только одну единицу, и, таким образом, значительно сократить размер содержимого, но я надеюсь избежать этого (пользователи предпочитают, чтобы все было на одной странице). Это также означало бы довольно большие изменения в логике страницы (да, я знаю - это плохая кодовая база на тот момент)

1 Ответ

2 голосов
/ 29 апреля 2010

Спросив еще около в других местах , мне наконец удалось решить эту проблему. Решение состояло в том, чтобы вообще пропустить 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, и страница загружается очень быстро:

...