向DOM添加大量元素
在我的Web应用程序中，我必须检索大量数据并创建一个包含数据的表（大约800行，10列的表）
当我通过append()方法直接添加元素时，浏览器在一段时间内没有响应。
为了访问庞大的数据，我正在使用Web工作人员进行Ajax调用。
因为我们不能从网络工作者操纵DOM，我该怎么做？
谢谢 ：）
编辑 ：
如果我想要一些像hide（）（jQuery隐藏）的函数，innerHtml会工作吗？
您可以使用一些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元素（即按需）的表插件。 DataTables提供了丰富的功能，包括这一功能。 它还将帮助您减少必须编写的代码的大小。
注意 ：使用JavaScript访问DOM元素的速度很慢，所以才能有更响应的页面。
你可以这样做
var buffer = [];
setInterval(function(){ $("#div").html(buffer.join(""); buffer = []; }, 1000);
buffer.push("html");
buffer.push("html");
并检查此链接的性能
也请查看此链接加快您的网站的最佳实践
链接地址: http://www.djcxy.com/p/11193.html