使用Javascript呈现HTML的策略

Question

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

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

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

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

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

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

Answer 1

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

Answer 2

尝试：

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

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

• 使用文档片段

   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版下提供的源代码来获取一些技术。