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线程上渲染会花费更多时间并且app会变慢。

同样在渲染数据时，我必须在存储上应用过滤器以在每次渲染数据之前过滤数据。

我想知道如何进行此处理和渲染工作。由于ajax api调用和从服务器获取数据不会花费更多时间，但处理和渲染需要更多时间。

对此有任何建议，

感谢

Answer 1

我建议不要使用面板，除非你也有。使用大量项目时，使用dataview list的infinite checked to true会更好。这样可以更快地渲染，您可以将交互绑定到列表中的每个项目上。如果你只是做标记，它应该渲染得更快。否则，每次添加都需要布局。

Answer 2

我会考虑将您的面板创建与数据填充分开。也就是说，在加载应用程序时创建面板，然后在制作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应用程序将更具响应性！

Answer 3

首先，我会按照上面的建议进行分析。您需要找出API调用或布局渲染速度慢。

根据我的经验，大多数性能问题都来自复杂的DOM结构。 Sencha为您添加到屏幕的每个组件添加了大量DIV（只需检查生成的源）。这对应用程序性能有显着影响。

如果您发现复杂的布局是性能问题的原因，那么您可以重新考虑屏幕布局，或者使用呈现在容器的tpl中的纯HTML替换某些sencha控件。

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

3 个答案: