javascript - 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

我建议不要使用面板，除非你也有。元素数量多的话，dataview list 会更好与 infinite checked to true .这将渲染得更快，并且您可以将您的交互绑定(bind)到列表中的每个项目。如果你只是在做标记，它应该渲染得更快。否则，每次添加都需要布局。