是否可以在不阻塞浏览器的情况下添加大量的DOM节点?

我的网站上有一个网页,它显示一个表,每10秒重新加载一次XML源数据(使用xmlhttprequest),然后更新该表以向用户显示数据的任何添加或删除。为此,javascript函数首先清除表中的所有元素,然后为每个数据单元添加新行。

最近,我在Internet Explorer中解决了由于这个DOM破坏和创建代码而导致的大量内存泄漏问题(其中大多数都与JavaScript对象和DOM对象之间的循环引用有关,而我们使用的JavaScript库会悄悄地保留对用它创建的每个JS对象的引用。 new Element(...) 直到卸载页面)。

随着内存问题的解决,我们现在发现了一个基于CPU的问题:当用户有大量数据要查看时(100+个数据单元,等于100 <tr> 要创建的节点,加上每列的所有表单元格,该进程将连接CPU,直到Internet Explorer提示用户:

停止运行此脚本?
此页上的脚本导致Internet Explorer运行缓慢。 如果它继续运行,您的计算机可能会 反应迟钝。

似乎运行行和单元创建代码乘以100+个数据块是导致CPU使用率激增的原因,函数运行“太长”(从IE的角度看),从而导致IE为用户生成此警告。我还注意到,当“update screen”函数为100行运行时,即在函数完成之前不会重新呈现表内容(因为JS解释器在这段时间内使用了100%的CPU,我假设)。

所以我的问题是:在javascript中,有没有什么方法可以让浏览器暂停JS的执行并重新呈现DOM?如果没有,是否有处理创建大量DOM节点和 不 让浏览器窒息?

我能想到的一种方法是异步处理“更新表”逻辑;也就是说,一旦用于重新加载XML数据的Ajax方法完成后,将数据放入某种数组中,然后设置函数(使用 setInterval() )运行它一次处理数组的一个元素。然而,这看起来有点像在javascript环境中重新创建线程,这看起来可能会变得非常复杂(例如,如果在我仍在重新创建表的DOM节点时触发另一个Ajax数据请求会怎么样?等)

更新 我只是想解释一下为什么我要接受罗堡的回答。在做一些测试时,我发现 new Element() 我的框架中的方法(我正在使用 mootools )比传统的慢2倍 document.createElement() 在IE7中。我运行了一个测试来创建1000个 <spans> 并将它们添加到 <div> 使用 新元素() 在IE7(在虚拟PC上运行)上大约需要1800ms,而传统的方法大约需要800ms。

我的测试还显示了一种更快的方法,至少对于像我这样的简单测试来说是这样的:使用 DocumentFragments as described by John Resig . 用IE7在同一台机器上运行相同的测试需要247毫秒, 9X 改进了我原来的方法!