使用 Javascript 渲染 HTML 的策略答案

【问题标题】：Strategies for rendering HTML with Javascript使用 Javascript 渲染 HTML 的策略
【发布时间】：2010-06-29 13:47:42
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

渲染 300 多个 DOM 节点需要时间。我建议您查看 dojo 网格 (dojotoolkit.org)，它实现了延迟渲染，但您仍然可以将所有数据保留在客户端上。
最好不将每个元素分别插入到 DOM 中。构建一个容器元素并将其保留在 DOM 之外，直到您将其填满。（在我看来 300 条记录并不多，您绝对应该能够让它运行速度快于 5 到 8 秒。）

【解决方案1】：

尝试：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

Google Web Toolkit 具有 BulkTableRenderers，旨在快速呈现大型表。即使您选择不使用 GWT，您也可以通过查看 source code 来掌握一些技术，这些技术在 Apache 许可证 2.0 版下可用。

【讨论】：