0

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

  1. 从服务器获取 id 列表（没有实际数据，只有 id 和一些元数据）。
  2. 遍历项目列表（平均有 90-10 个项目）并使用 panel.items.add({html: 'some placeholder div with id'}) 添加项目
  3. 遍历 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。

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

4

2 回答 2

1

听起来你从 javascript 单线程中得到了一些奇怪的东西。添加 90 个项目可能不是问题，但是来自 ajax 请求的回调不断锁定线程会使事情变得有点奇怪。我会做两件事之一。

  1. 最好在您的服务器上创建一个函数，您也可以发送所有这些 id，并获取这 90 个 div 所需的所有信息的数组！这样，您只需添加一个包含所有 div 的 Ext.container.Container 即可。我认为这将是最好的。我总是为我的 Web 服务提供一个可选的“IN”参数，您可以通过该参数传递一个对象，该对象的字段名称与一组值配对，该数组被翻译成 SQL 中的“IN”语句。它在这种情况下非常有用。

  2. 如果这绝对不可能，那么要么在渲染之前将所有信息构建到一个数组中，要么暂停它要进入的容器上的布局，然后在完成后调用 doLayout。在此处查看配置和文档

于 2013-11-12T19:22:49.413 回答
0

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

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

现在小部件呈现得非常快。

于 2013-11-13T22:35:42.210 回答