Sencha应用程序在UI线程上渲染时变慢

Question

我正在使用 Sencha Touch 2.2.1 创建 Sencha Web 应用程序。在我的应用程序中，我有一个屏幕，其中包含一个容器，我在其中添加了多个面板。单个面板由两个面板组成，一个顶部面板和一个内部面板。

在页面初始化时，我调用ajax API来获取容器中每个项目的顶部面板的数据列表。当点击顶部面板时，我会调用该项目的API来获取内部面板的数据。当API调用完成后，我将数据呈现到内部面板并使该面板可见。这段代码对于单击容器中所有项目的顶部面板都是相同的。

还有一个名为“expandAll”的按钮，它将按顺序循环调用所有项目的API，并呈现每个内部面板的数据。首先我调用一个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调用和从服务器获取数据所需的时间不多，但是处理和呈现所需的时间较长。

有什么建议吗？

谢谢。

- nleshjinde

---

这里总共有多少项或API调用？项目模板有多复杂？ - OhmzTech

我们在这里最少进行了10次，最多进行了14次API调用。而且，项目模板是一个复杂的结构，包括：一个带有vbox布局的面板，其中包含两个面板：

1. 面板（布局为hbox），其中包含5个面板和两个列表
2. 面板（布局为hbox），其中包含6个列表和两个面板。

- nleshjinde

我已经解决了这个渲染问题。对于每个Sencha组件，Sencha都会自行创建额外的结构。在我的应用程序中，我使用了更多复杂视图和更多内部组件的Sencha组件。因此，现在我使用单个面板，并创建单个HTML代替更多的Sencha组件，并将最终的HTML文本直接设置为面板的setHtml。因此，在这种情况下，我们正在覆盖Sencha结构并进行简单的渲染。 - nleshjinde

Answer 1

我建议不要使用面板，除非你必须使用。如果有大量的项目，最好使用数据视图列表和无限选中为真。这样可以更快地呈现，并且您可以将交互绑定到列表上的每个项目。如果只是做标记，它应该会呈现得更快。否则，每次添加都需要布局。

- Vu Nguyen

Answer 2

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

您可以尝试通过使用Chrome开发者工具的“Profiles”选项卡或像Compuware的分析器这样的外部工具来对JavaScript进行分析，以确定问题所在（我曾在使用dynaTrace时使用过它）。

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

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

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

- pherris

Answer 3

首先，我会像上面建议的那样进行分析。您需要找出API调用或布局渲染是否缓慢。

根据我的经验，大多数性能问题来自复杂的DOM结构。Sencha为每个添加到屏幕上的组件添加了大量的DIV（只需检查结果源代码即可）。这对应用程序性能有重要影响。

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

- Zoltan Magyar

---

由于他正在使用Sencha Touch，听起来这将是一个跨平台的移动应用程序。基于你上面描述的原因，我认为当涉及到移动性能时，Sencha Touch并不像宣传的那样好。在可能的情况下，用简单的HTML替换笨重的Sencha组件绝对是正确的选择。 - ashack

通常在移动屏幕上，性能还可以。但是如果您的应用程序利用了平板电脑的增大屏幕尺寸，则会出现此问题。更大的屏幕->更多的控件->性能变差。 :) - Zoltan Magyar