sencha apps замедляется при рендеринге на линии ui

Question

Я создаю веб-приложение 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 
     } 
    }); 
} 

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

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

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

Любые suggessions на это,

благодаря

Answer 1

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

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

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

Однако, по моему опыту, вы, вероятно, увидите много времени в методах Сенча, из-за чего трудно понять, какие изменения необходимы.

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

Answer 2

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

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

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

Answer 3

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