向DOM添加大量元素

Question

在我的 Web 应用程序中，我需要检索大量的数据，并使用这些数据创建一个表格（大约 800 行，10 列）。
当我直接通过 append() 方法添加元素时，浏览器会停止响应一段时间。

为了访问这些大量数据，我正在使用 Web Workers 进行 AJAX 调用。
由于我们无法从 Web Workers 操作 DOM，那么我该怎么做呢？
谢谢 :)
编辑:
如果我想要一些类似于 hide()（jQuery hide）的函数，innerHtml 是否适用？

- Navaneeth

---

数据是什么格式？JSON吗？如果是的话，我建议使用JavaScript模板引擎（例如Handlebars）创建整个HTML字符串，然后一次性将该字符串附加到DOM中。 - Šime Vidas

你可以尝试使用DocumentFragment准备节点，然后一次性附加它。我认为浏览器在片段创建期间不需要阻塞。 - jimp

此外，Ajax 调用不需要工作人员。制作和接收 Ajax 的处理要求是最少的。 - Šime Vidas

你希望 hide() 做什么，以解决你的问题？ - David Thomas

我们需要实现某个功能，因此我们需要 hide() 方法。 - Navaneeth

Answer 1

注意：使用JavaScript访问DOM元素速度较慢，因此为了使页面更具响应性。

您可以通过以下方式实现：

var buffer = [];
setInterval(function(){ $("#div").html(buffer.join(""); buffer = []; }, 1000);

buffer.push("html");
buffer.push("html");

请检查此链接性能链接

还要检查此链接加速网站的最佳实践

- user1280616

Answer 2

您可以使用一些JavaScript模板引擎来避免手动逐步添加元素或构建innerHTML字符串。

例如http://ejohn.org/blog/javascript-micro-templating。

假设您在HTML中有一个模板：

<script type="text/html" id="user_rows_tpl">
    <% for(var y = 0, l = users.length; l > y; y++) { %>
        <tr id="user-row-<%=y%>">
            <td><%=users[y].name%></td>
            <td><%=users[y].surname%></td>
            <td><%=users[y].age%></td>       
        </tr>
    <% } %>
</script>​

然后你可以在你的JavaScript中使用这个模板来渲染你的对象：

<script type="text/javascript">
    var table = document.getElementById("userTable");
    table.innerHTML = tmpl("user_rows_tpl", {
        users: getUsers()
    });
</script>

为了测试，我创建了1000个用户对象并在表格中呈现它们。
在Google Chrome中，平均呈现时间约为20-25毫秒。不错，是吧？

演示

- Eugene Naydenov

Answer 3

您可能想使用支持DOM元素的延迟插入（即按需）的表格插件。DataTables提供了丰富的功能，包括此功能。它还将帮助您减少需要编写的代码量。

- Jon

---

你能解释一下如何进行DOM元素的惰性插入吗？ 谢谢 :) - Navaneeth