jquery - 向 DOM 添加大量元素

Question

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

为了访问海量数据，我使用 Web Worker 进行 Ajax 调用。
由于我们无法从 Web Workers 操作 DOM，我该怎么办？
谢谢:)

编辑:
如果我想要一些像 hide() (jQuery hide)这样的函数，innerHtml 可以工作吗？

Answer 1

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

例如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