Javascript ExtJS需要很长时间来渲染项目

将项目呈现到正在构建的小部件时出现问题。这就是我做事的方式：

从服务器获取ID列表（没有实际数据，只有ID和一些元数据）

循环项目列表（平均有90-10个项目）并使用panel.items.add添加项目（{html:'someplaceholder div with id'}）

循环id并对服务器进行异步调用以获取实际数据，并创建一些图形并在适当的占位符id内呈现它

步骤#3出人意料地工作良好，尽管它加载的数据最多

步骤#1非常快，它只使用一个服务器调用从服务器获取ID列表

步骤#2是问题所在，这是一段代码，可以更清楚地说明问题：

for (var i=0; i<meta.length; i++) {
   var item = meta[i];
   var divId = "graph" + meta.id  + ..etc;
   panel.items.add({ 
      html: me.getDivHTML(divId, meta, ...);
   });
}

---

for（var i=0；i听起来javascript是单线程的，这有点奇怪。添加90个项目可能不是问题，但是ajax请求回调对线程的持续锁定会让事情有点奇怪。我会做以下两件事之一

最好在你的服务器上做一个函数，你也可以发送所有的id，并获得90个div所需的所有信息的数组！这样，你就可以添加一个包含所有div的Ext.container.container。我认为这将是最好的。我总是给我的web服务一个可选的“in”参数，您可以传递一个对象，该对象的字段名与在SQL中转换为“IN”语句的值数组成对出现。在这种情况下，该参数非常有用

如果这是绝对不可能的，那么在呈现之前将所有信息构建到一个数组中，或者在容器上挂起它要进入的布局，然后在完成后调用doLayout。请参阅配置和文档

按照注释和答案的建议，首先将面板添加到阵列中，然后立即添加面板，这有助于加快渲染速度

但我有一个不同的问题，调用方多次呈现小部件，因此也增加了不必要的等待时间

现在widget呈现得非常快。
但是你没有呈现90个div，而是呈现了90个面板。另外，你不应该直接修改items集合。发布一个完全工作的测试用例，因为我已经看到你的代码有一些严重错误。Evan是对的，也没有调用items。add（…）在一个循环中，一次传入项配置数组就调用它。感谢您的响应，它们都有助于加快渲染速度。此外，正如Evan Trimboli在对您的问题的评论中提到的，您正在添加许多面板，您的目标是只添加div。您最好添加一个不太复杂的组件，如Ext.component，just构建div并将其添加或附加到html属性，或者构建存储并使用Ext.view.view使用模板创建标记。