用Javascript呈现HTML的策略

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

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

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

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

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

---

我在这里寻找任何提示和提示

尝试在分离的DOM节点或文档片段中创建元素，如果你不需要一次显示全部300条记录，你可以尝试一次为它们分页30或50条记录，并且只展开JSON数组，因为这些子部分需要通过寻呼机或本地搜索框显示。转换后，您可以缓存内容，以便用户在页面上下导航时进行后续显示。

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

如果渲染速度如此之慢，可能是因为错误的渲染方式。你能具体说明你是怎么做的吗

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

有一个专门设计用于快速渲染大型表的。即使您选择不使用GWT，也可以通过查看Apache许可证2.0版下提供的来学习一些技术。

尝试：

• 将行推入数组，然后

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

• 使用

---

渲染300多个DOM节点需要时间。我建议您查看dojo grid（），它实现了延迟渲染，但您仍然可以保留客户端上的所有数据。最好不要将每个元素单独插入DOM。构建一个容器元素，并将其保留在DOM之外，直到填充完毕。（300张唱片对我来说并不是那么多，而且你肯定能够让它以5到8秒的速度运行。）。。。或者在一个文件碎片有趣！我就是这么做的，它把Chrome的渲染时间缩短到了1秒。然而，Firefox3.6仍然需要5秒钟。我想我必须优化渲染算法本身。

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