向 DOM 添加大量元素答案

【问题标题】：adding large amount of elements to DOM向 DOM 添加大量元素
【发布时间】：2012-09-15 15:44:53
【问题描述】：

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

为了访问海量数据，我使用网络工作者进行 ajax 调用。
因为，我们无法从 web worker 操作 DOM，我该怎么办？？
谢谢:)

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

【问题讨论】：

如果数据是什么格式？ JSON？在这种情况下，我建议使用 JavaScript 模板引擎（例如 Handlebars）来创建整个 HTML 字符串，然后立即将该字符串附加到 DOM。
查看link
您可以尝试使用 DocumentFragment 准备节点，然后附加一次。我认为浏览器在片段创建期间不需要阻止。
另外，Ajax 调用不需要工作人员。制作和接收 Ajax 的处理要求极低。
您希望hide() 做什么以解决您的问题？

标签： jquery dom

【解决方案1】：

您可以使用一些 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-25ms。还不错吧？

DEMO

【讨论】：

【解决方案2】：

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

【讨论】：

你能解释一下如何惰性插入 Dom 元素吗？谢谢 :)

【解决方案3】：

注意：使用 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

【讨论】：