Question

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

从服务器获取id列表（没有实际数据，只有id和一些元数据）。
循环遍历项目列表（平均有90-10个项目）和使用panel.items.add添加项目（{html：'某个占位符div与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, ...);
   });
}

这有两个问题，第一个在屏幕上渲染90个div需要一分多钟，第二个，它不会递增渲染，它会等到它完成并立即显示所有div。

我使用Chrome。我究竟做错了什么？如何让这些div渲染更快？

Answer 1

听起来你从javascript单线程中获得了一些奇怪的感觉。添加90个项目可能不是问题，但是来自ajax请求的回调对线程的持续锁定会让事情变得有些奇怪。我会做两件事之一。

最好在您的服务器上创建一个函数，您也可以发送所有这些ID，并获得这些90个div所需的所有信息数组！这样，你可以添加一个包含所有div的Ext.container.Container。我认为这将是最好的。我总是为我的Web服务提供一个可选的“IN”参数，您可以传递一个对象，该对象的字段名称与在SQL中转换为“IN”语句的值数组配对。它在这种情况下非常有用。
如果这绝对不可能，那么要么在渲染之前将所有信息构建到数组中，要么暂停其进入的容器上的布局，然后在完成后调用doLayout。请参阅配置和文档here

Answer 2

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

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

现在，widget呈现得非常快。

ExtJS需要很长时间才能渲染项目

2 个答案: