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

我使用sencha touch 2.2.1创建了sencha web应用程序。在我的应用程序中，我有一个包含一个容器的屏幕，其中添加了多个面板。单个面板由两个面板，顶部面板和内部面板组成。sencha应用程序在UI线程上渲染速度变慢

在初始化页面时，我调用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调用并从服务器获取数据不会花费更多时间，但处理和呈现需要更多时间。

这个

感谢

来源

2013-12-18 nleshjinde

我们在这里总共讨论了多少项目或API调用？项目模板有多复杂？ – OhmzTech

最少10个，最大14个电话我们在这里制作。项目模板是复杂的结构，一个面板与vbox布局和两个面板， 1.面板（layout = hbox），因为我们有5个面板和两个列表 2.面板（layout = hbox），因为我们有6个列表和两个面板 – nleshjinde

我已经解决了这个渲染问题。至于每个煎茶成分，sencha都是通过它自己创造出额外的结构。在我的应用程序中，我使用了更多的sencha组件以及更多的内部组件。所以现在我已经使用了单个面板，并且我创建了单个html而不是更多的sencha组件，并直接将这个最终的HTML文本设置为面板为setHtml。所以在这种情况下，我们正在重写sencha结构并且简单的渲染正在发生。 – nleshjinde

任何suggessions，我会考虑从数据中分离人口的面板创作。也就是说，当您的应用程序加载时创建面板，然后当您制作XHR时，您可以将数据推送到面板并显示它们，而不是同时调用AJAX调用，面板创建和小部件渲染的开销。

您可以尝试通过与Chrome开发者工具或与类似Compuware的探查外部工具的配置文件选项卡剖析你的JavaScript敲定的问题（我用它时，它是的dynaTrace）：

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

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

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

来源

2014-01-07 12:58:24 pherris

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

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

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

来源

2014-01-10 14:54:02

由于他使用Sencha Touch，这听起来像是一个跨平台的移动应用程序。出于上述原因，我认为Sencha Touch在移动性能方面的表现不如广告。在可能的情况下用简单的HTML代替繁琐的Sencha组件是绝对要走的路。 – ashack

通常情况下，移动屏幕上的表现还可以。但是，如果您的应用使用增加的平板电脑屏幕尺寸，则会出现此问题。较大的屏幕 - >更多控件 - >性能很差。 :) –

我建议不要使用面板，除非你也有。随着大量的项目，你会更好与dataview list与infinite checked to true。这会使得渲染速度更快，您可以将相互作用与列表上的每个项目相关联。如果你只是做标记，它应该渲染得更快。否则，每个添加都需要布局。

来源

2014-01-23 22:56:47

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

回答

相关问题