Приложения sencha замедляются при рендеринге на нитке ui

Я создаю веб-приложение sencha, используя sencha touch 2.2.1. В моем приложении у меня есть экран, который состоит из контейнера, где я добавил несколько панелей. Одна панель состоит из двух панелей, верхней панели и внутренней панели.

При инициализации страницы я вызываю ajax api для получения списка данных для верхней панели каждого элемента в контейнере. и на верхней панели щелкнули, я вызываю api для этого элемента для извлечения данных для внутренней панели. По завершении api я передаю данные на внутреннюю панель и сделаю панель видимой. Этот код одинаковый для всех элементов в контейнере на верхней панели.

Существует также кнопка вверху, чтобы "expandAll", которая будет вызывать api для всех элементов цикла for один за одним и рендеринг данных для каждой внутренней панели. Сначала я вызываю один api, а затем получаю отклик на то, что я храню в магазине и рендеринг на экране, а затем вызываю следующий api, как это для всех элементов.

getDetailData:function(params){
    var detailStore=Ext.getStore('DetailData');

    detailStore.load({
        callback:function(data,opt,success) {
            detailStore.storeDetailData(data);
            _this.onShowDetailData(data);

            // now call next api from here until all items data fetched and displayed
        }
    });
}

В этом случае выборка всех элементов данных и рендеринга в потоке ui занимает больше времени, и приложение замедляется.

Также при рендеринге данных я должен применять фильтры в хранилище для фильтрации данных перед рендерингом данных за каждый раз.

Я хотел знать, как мне сделать эту обработку и работу рендеринга. Поскольку вызов ajax api и выборка данных с сервера не занимает больше времени, но обработка и рендеринг занимают больше времени.

Любые предложения по этому поводу,

спасибо

Ответ 1

Я предлагаю не использовать панели, если у вас тоже нет. С большим количеством элементов вам будет лучше с списком dataview с бесконечно проверено до истины. Это будет намного быстрее, и вы сможете связать свои взаимодействия с каждым из элементов в списке. Если вы просто делаете разметку, она должна быть намного быстрее. В противном случае для каждого добавления потребуется макет.

Ответ 2

Я бы подумал о том, чтобы отделить ваше создание панели от вашей совокупности данных. То есть, создавайте свои панели, когда ваше приложение загружается, а затем, когда вы делаете свой XHR, вы можете просто вставлять данные в панели и показывать их, а не накладные расходы на вызов AJAX, создание панели и рендеринг виджета одновременно.

Вы можете попытаться устранить проблему, профилировав свой JavaScript на вкладке "Профили" инструментов разработчика Chrome или с помощью внешних инструментов, таких как профилировщик Compuware (я использовал его, когда он был dynaTrace):

http://www.compuware.com/en_us/application-performance-management/products/ajax-free-edition/overview.html

Однако, по моему опыту, вы, вероятно, увидите много времени в методах Sencha, что затрудняет просмотр изменений.

Наконец, старые браузеры будут выполнять этот рендеринг гораздо медленнее, чем более новые браузеры. Если вы можете избежать поддержки IE 6, 7 и 8 - ваше приложение Sencha будет гораздо более отзывчивым!

Ответ 3

Прежде всего, я бы сделал профилирование, как было предложено выше. Вам нужно узнать, как обращаться с API-вызовами, или рендеринг макета медленный.

По моему опыту большинство проблем с производительностью исходит из сложной структуры DOM. Sencha добавляет огромное количество DIV для каждого компонента, который вы добавляете на экран (просто проверьте полученный источник). Это существенно влияет на производительность приложения.

Если вы обнаружите, что ваш сложный макет является причиной проблем с производительностью, вы можете либо пересмотреть свои макеты экрана, либо заменить некоторые элементы управления sencha простым HTML, отображаемым в tpl контейнера.