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 线程上呈现需要更多时间，并且应用程序会变慢。

此外，在渲染数据时，我必须在每次渲染数据之前在 store 上应用过滤器来过滤数据。

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

对此有任何建议，

谢谢

Answer 1

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

Answer 2

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

Answer 3

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

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

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