16

我正在使用 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 调用和从服务器获取数据不需要更多时间，但处理和渲染需要更多时间。

对此有任何建议，

谢谢

4

3 回答 3

2

我建议不要使用面板，除非你也有。对于大量项目，使用无限检查为 true的数据视图列表会更好。这将渲染得更快，您可以将您的交互与列表中的每个项目联系起来。如果你只是在做标记，它应该渲染得更快。否则，每次添加都需要布局。

于 2014-01-23T22:56:47.577 回答
1

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

您可以尝试通过使用 Chrome 开发人员工具的 Profiles 选项卡或 Compuware 的分析器（我在它是 dynaTrace 时使用它）等外部工具分析您的 JavaScript 来确定问题：

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

但是，根据我的经验，您可能会看到 Sencha 方法花费了很多时间，这使得很难看出需要进行哪些更改。

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

于 2014-01-07T12:58:24.560 回答
1

首先，我会按照上面的建议进行分析。您需要了解 API 调用或布局渲染是否缓慢。

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

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

于 2014-01-10T14:54:02.937 回答