sencha应用程序在UI线程上的渲染速度变慢
我正在使用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调用和从服务器获取数据不会花费更多时间，但处理和渲染需要更多时间。
任何关于这方面的建议，
谢谢
回答 3
Stack Overflow用户
发布于 2014-01-24 06:56:48
我建议不要使用面板，除非你也有面板。对于大量的项目，使用带有infinite checked to true的dataview list会更好。这将更快地呈现，并且您可以将您的交互绑定到列表中的每个项目。如果你只是做标记，它的渲染速度应该要快得多。否则，每次添加都需要布局。
Stack Overflow用户
发布于 2014-01-07 20:58:25
我会考虑将您的面板创建与您的数据填充分开。也就是说，在加载应用程序时创建面板，然后在创建XHR时只需将数据推送到面板中并显示它们，而不是同时执行AJAX调用、面板创建和小部件渲染。
你可以尝试通过使用Chrome开发者工具的Profiles标签页或者像Compuware的profiler这样的外部工具来分析你的JavaScript来解决这个问题(我在它是dynaTrace的时候用过它)：
然而，根据我的经验，您可能会看到Sencha方法花费了大量时间，这使得很难看出需要进行哪些更改。
最后，较旧的浏览器执行此呈现将比较新的浏览器慢得多。如果你能避免支持IE 6、7和8--你的Sencha应用程序的响应性会更好！
Stack Overflow用户
发布于 2014-01-10 22:54:03
首先，我将按照上面的建议进行分析。你需要找出是API调用还是布局渲染速度慢。
根据我的经验，大多数性能问题都来自复杂的DOM结构。Sencha为您添加到屏幕上的每个组件添加了大量的DIVs (只需检查生成的源代码)。这对应用程序性能有很大的影响。
如果您发现复杂的布局是导致性能问题的原因，那么您可以重新考虑您的屏幕布局，或者用呈现到容器的tpl中的普通HTML替换一些sencha控件。
https://stackoverflow.com/questions/20658224
复制相似问题