使用Javascript呈现HTML的策略

Question

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

Chrome在我的测试中超过了FF，但浏览器渲染~300条记录仍需要5-8秒。

我考虑过懒惰加载，例如在谷歌阅读器中实现的，但这与我的其他用例相反，例如能够获得即时搜索结果（在客户端进行简单搜索，而不是我们在JSON数组）和多个过滤器。

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

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

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

Answer 1

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

Answer 2

尝试：

• 将行推入数组，然后只需

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

• 使用document fragments

  var frag = document.createDocumentFragment();
  for ( loop ) {
      frag.appendChild( el );
  }
  parent.appendChild( frag );
  

Answer 3

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

Answer 4

300并不是很多。 我设法使用jQuery创建一个包含来自JSON的数据的500多个元素的树，在Chrome上只需几分之一秒。 300不是一个大数字。

如果渲染得这么慢，可能是因为这样做的方法不对。你能说明你是怎么做的吗？

最慢的方法是在Javascript中将HTML写入字符串，然后使用innerHtml成员分配它。但那仍然很快就像300行一样。

Answer 5

Google Web Toolkit有BulkTableRenderers，旨在快速呈现大型表格。即使您选择不使用GWT，也可以通过浏览Apache License 2.0版下提供的source code来获取一些技术。