在我的Web应用程序中,我必须检索大量数据并创建一个包含数据的表(表大约有800行,10列)
当我通过append()方法直接添加元素时,浏览器暂时不响应.
为了访问庞大的数据,我使用web worker进行ajax调用.
因为,我们无法操纵网络工作者的DOM,我该怎么办？
谢谢 ：)
当我通过append()方法直接添加元素时,浏览器暂时不响应.
为了访问庞大的数据,我使用web worker进行ajax调用.
因为,我们无法操纵网络工作者的DOM,我该怎么办？
谢谢 ：)
解决方法
您可以使用一些
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.不错,不是吗？
