sencha应用程序在ui线程上渲染速度变慢

Question

我正在使用sencha touch 2.2.1创建sencha web应用程序.在我的应用程序中,我有一个屏幕,其中包含一个容器,我添加了多个面板.单个面板由两个面板组成,顶部面板和内部面板.

在初始化页面时,我调用ajax api来获取容器中每个项目的顶部面板的数据列表.并在顶部面板上单击,我正在调用该项目的api来获取内部面板的数据.在api调用完成后,我将数据渲染到内部面板并使该面板可见.此代码对于单击顶部面板上的容器中的所有项目都是相同的.

"expandAll"顶部还有一个按钮,它将逐个调用for循环中所有项目的api,并为每个内部面板渲染数据.首先,我正在调用一个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调用和从服务器获取数据不会花费更多时间,但处理和渲染需要更多时间.

对此有任何建议,

谢谢

Answer 1

我会考虑将面板创建与数据群体分开。也就是说，在加载应用程序时创建面板，然后在创建 XHR 时，您只需将数据推送到面板中并显示它们，而不需要同时进行 AJAX 调用、面板创建和小部件渲染的开销。

您可以尝试使用 Chrome 开发人员工具的“配置文件”选项卡或使用 Compuware 分析器（我在使用 dynaTrace 时使用它）等外部工具来分析您的 JavaScript，从而确定问题：

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

然而，根据我的经验，您可能会发现 Sencha 方法花费了大量时间，这使得很难看出需要进行哪些更改。

最后，较旧的浏览器执行此渲染的速度比较新的浏览器慢得多。如果您可以避免支持 IE 6、7 和 8 - 您的 Sencha 应用程序的响应速度将会更快！