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

Question

在不涉及太多细节的情况下，我正在使用 javascript 清理表格内的空白。我需要删除大量的文本节点。当涉及到 IE9 时，这似乎是我的脚本中的瓶颈。

以下所有方法都可以完成这项工作，但它们会导致速度大幅下降。

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

有没有办法进行批量删除或将它们隐藏在 dom 等中。只是更快一些。

我也在文本节点上试过这个:

domNode.innerHTML = '';

虽然它执行得很快，但文本节点似乎没有被它定相。

此外，我需要保留事件绑定(bind)，因此对整个表进行 .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 分离，事件处理程序仍保持附加状态，因此当树放回原处时它们会在那里。