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