jquery - 向 DOM 添加大量元素

Question

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

为了访问大量数据，我使用网络工作者进行 ajax 调用。
因为，我们不能从 web worker 操作 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");

并检查此链接的性能

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

Answer 2

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

Answer 3

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

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

假设您的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-25ms。不错，不是吗？

演示