Question

在我的网络应用程序中，我必须检索大量数据并创建一个包含数据的表格（表格大约有800行，10列）
当我通过append()方法直接添加元素时，浏览器暂时不会响应。

为了访问庞大的数据，我正在使用Web worker进行ajax调用因为，我们不能操纵网络工作者的DOM，我该怎么办？谢谢:)）

修改：
如果我想要一些像hide（）（jQuery hide）这样的函数，那么innerHtml会起作用吗？

Answer 1

注意：使用JavaScript访问DOM元素的速度很慢，以便拥有更具响应性的页面。

你可以通过

来做到这一点

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

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

并检查此link for the performance

另请查看此链接Best Practices for Speeding Up Your Web Site

Answer 2

您可能希望使用支持延迟插入DOM元素的表插件（即按需）。 DataTables提供了丰富的功能including this one。它还可以帮助您减少必须编写的代码的大小。

Answer 3

您可以使用一些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毫秒。不错，不是吗？

<强> DEMO

向DOM添加大量元素

3 个答案: