3

我通过 AJAX 调用从服务器获取一个胖 JSON 数组，然后处理它并使用 Javascript 呈现 HTML。我想要的是让它尽可能快。

Chrome 在我的测试中领先于 FF，但浏览器仍需要 5-8 秒才能呈现约 300 条记录。

我考虑过延迟加载，例如在 Google Reader 中实现的，但这与我的其他用例背道而驰，例如能够获得即时搜索结果（在客户端对我们在 JSON 数组中获得的所有记录进行简单搜索）和多个过滤器。

我注意到的一件事是，FF 和 Chrome 在遍历 JSON 数组中的所有项目之前都不会渲染任何内容，即使我在每个循环之后将新创建的元素显式插入到 DOM 中（只要我有 HTML）。我想要实现的只是：强制浏览器尽快呈现。

我尝试推迟调用（数组中的每个项目都将由延迟函数处理）但在那里遇到了其他问题，因为似乎不再保证执行顺序（数组更下方的一些项目将在其他项目之前处理之前的项目）。

我在这里寻找任何提示和技巧。

4

5 回答 5

1

如果您不需要一次显示所有 300 条记录，您可以尝试一次将它们分页 30 或 50 条记录，并且只展开 JSON 数组，因为这些子部分需要通过分页器或本地搜索框显示. 转换后，您可以缓存内容以供用户在页面上下导航时进行后续显示。

于 2010-06-29T13:58:01.100 回答
1

尝试：

  • 将行推入数组，然后简单地

     el.innerHTML = array.join("");

  • 使用文档片段 

    var frag = document.createDocumentFragment();
for ( loop ) {
    frag.appendChild( el );
}
parent.appendChild( frag );
于 2010-06-29T17:13:28.133 回答
0

尝试在分离的 DOM 节点或文档片段中创建元素，然后一次性附加整个内容。

于 2010-06-29T13:51:57.440 回答
0

300不是很多。我设法在 Chrome 上用 jQuery 不到一秒的时间创建了一个包含 500 多个元素的树，其中包含来自 JSON 的数据。300不是一个大数字。

如果它们渲染得如此缓慢，则可能是由于错误的处理方式。你能具体说明你是怎么做的吗？

最慢的方法是将 HTML 写入 Javascript 中的字符串，然后将其分配给 innerHtml 成员。但是对于 300 行来说，这仍然会很快。

于 2010-06-29T13:58:23.540 回答
0

Google Web Toolkit具有BulkTableRenderer，旨在快速呈现大型表格。即使您选择不使用 GWT，您也可以通过查看Apache 许可证 2.0 版下提供的源代码来掌握一些技术。

于 2010-06-29T17:08:14.387 回答