向DOM添加大量元素

Question

在我的Web应用程序中,我必须检索大量数据并创建一个包含数据的表(表大约有800行,10列)
当我通过append()方法直接添加元素时,浏览器不会响应一段时间.

为了访问庞大的数据,我使用web worker进行ajax调用.
因为,我们无法操纵网络工作者的DOM,我该怎么办？
谢谢 :)

编辑:
如果我想要一些像hide()(jQuery hide)这样的函数,那么innerHtml会工作吗？

Answer 1

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

\n\n

例如http://ejohn.org/blog/javascript-micro-templated。

\n\n

假设您的HTML中有一个模板：

\n\n

<script type="text/html" id="user_rows_tpl">\n    <% for(var y = 0, l = users.length; l > y; y++) { %>\n        <tr id="user-row-<%=y%>">\n            <td><%=users[y].name%></td>\n            <td><%=users[y].surname%></td>\n            <td><%=users[y].age%></td>       \n        </tr>\n    <% } %>\n</script>\xe2\x80\x8b\n

\n\n

然后你在JavaScript中使用这个模板来渲染你的对象：

\n\n

<script type="text/javascript">\n    var table = document.getElementById("userTable");\n    table.innerHTML = tmpl("user_rows_tpl", {\n        users: getUsers()\n    });\n</script>\n

\n\n

为了进行测试，我创建了 1000 个用户对象并将它们呈现在表中。
\nGoogle Chrome 中的平均渲染时间约为 20-25 毫秒。还不错，不是吗？

\n\n

演示版

\n