从DOM中有效地删除文本节点

Question

没有太多细节,我正在使用javascript清理表内的空白.我需要删除大量的文本节点.对于IE9来说,这似乎是我脚本的瓶颈.

以下所有方法都可以完成这项工作,但它们会导致极大的减速.

domNode.removeNode(true);
domNode.nodeValue = "";
domNode.parentNode.removeChild(domNode);

有没有办法进行批量删除或隐藏它们在dom等中的方法.只是更快的东西.

我也在textnodes上试过这个:

domNode.innerHTML = '';

虽然它执行得很快,但文本节点似乎没有被它删除.

此外,我需要保留事件绑定,因此整个表上的.innerHTML替换看起来不是一个选项.虽然它的运行速度提高了约5倍.

更新: 建议解决方案的粗略基准:

//around 480ms
stripWhitespaceTextNodes(domNode);

//around 640ms
parent.removeChild(domNode);
stripWhitespaceTextNodes(domNode);
parent.insertBefore(domNode, nextNode);

//around 700ms
tables[i].style.visibility = 'hidden';
stripWhitespaceTextNodes(domNode);
tables[i].style.visibility = 'visible';

//around 1140ms
tables[i].style.display = 'none';
stripWhitespaceTextNodes(domNode);
tables[i].style.display = 'block';

这是在4个表上完成的,其中一个表有1500行.

stripWhitespaceTextNodes()函数的关键是删除文本节点,这似乎是瓶颈,这是我对它的各种尝试.

domNode.parentNode.removeChild(domNode);
domNode.removeNode(true);
domNode.nodeValue = ""; // <-- CURRENTLY THIS ONE IS THE TOP RUNNER
domNode.replaceWholeText('');
domNode.deleteData(0, domNode.length);

var txtNode = document.createTextNode("");
domNode.parentNode.replaceChild(txtNode, domNode);
parent.insertBefore(domNode, nextNode);

//fast but doesn't work
domNode.innerHTML = '';

Answer 1

通常的做法是在进行大的更改之前从DOM中删除正在执行这些操作的容器,然后在完成后将其放回原处.

所以在你的情况下,那可能是:

var table = /* ...get a reference to the table...*/;
var nextNode = table.nextSibling; // May be null, that's fine
var parent = table.parentNode;
parent.removeChild(table);
/* ...clean up the text nodes... */
parent.insertBefore(table, nextNode);

即使树与页面的DOM分离,事件处理程序仍保持连接状态,因此当树被放回时它们将存在.

Answer 2

一种方法是克隆整个表并进行“异地”操作。这意味着对不在 DOM 上的克隆进行操作。然后，用修改后的克隆对整个表进行一次替换。这样，运营就不会陷入困境。

这里的答案提到了“克隆”DOM 和为 DOM 外部操作创建“容器元素”的几种方法。