Javascript removeChild()和appendChild()VS display=none和display=block | inline

element.appendChild(childRef); 和 element.removeChild(childRef); 两者都使浏览器在更改CSS时操纵DOM树,而只更改其中一个属性。

因此,更改CSS更快。

Dev Opera 说

当一个元素的显示样式设置为“无”时,它将不需要重新绘制,即使其内容已更改,因为它不会被显示。这可以作为一种优势。如果需要对一个元素或其内容进行多次更改,并且无法将这些更改合并到一个重绘中,则可以将该元素设置为显示:无,可以进行更改,然后将该元素设置回其正常显示。

这将触发两个额外的回流,一次是在隐藏元素时,另一次是在使其再次出现时,但总体效果可以快得多

Another relevant article 解释关于 reflow repaint

一定要继续使用显示属性。 它们比删除/附加子对象快得多,但最重要的是,它们在所有浏览器中都工作得很好。

element.style.display = 'none'; //for hiding an element
element.style.display = ''; //for showing that element again using its default way of displaying

使用display='inline'显示元素是错误的 因为元素在默认情况下可能具有类似DIV标记的显示块方式,并且您正在将其显示方式更改为inline,这是不正确的,可能会导致页面中的元素从您期望的位置移出。

我怀疑这其中有多少,即使有,我敢打赌它的不同实现(IE与Chrome与Firefox与……)。两者都将导致树中的回流事件。

显示和隐藏是简单而直接的。添加和删除也有它的用途,但在很大程度上可能是过度使用。首先,您必须保留对它的引用,以便以后可以将其添加回去,并且您必须记住需要将其添加回去的位置。

1. 使用示例代码,事情只能 inline ,不是 inline-block 或 block ,这会有点…限制。

2. 您的代码还完全替换了元素上的样式信息(可能不适用于IE;请参阅David对您的问题的评论),因此直接应用于元素的所有其他样式都将被吹走;考虑使用 style 元素的属性: childRef.style.display = 'none"; 和 childRef.style.display = "inline"; (或 ,或。这样,就不会在元素上使用任何其他样式。

不过,完全从树中删除子级(同时保留对它的引用,以便以后可以放回去)肯定有它的用处。例如,当它不在树中时,当你在树上行走时,用选择器来做这个,那个,和其他,它就不会被找到;这可能会有帮助。

一个小旁白:如果你碰巧在IE中处理用户可编辑的元素(即在一个有 designMode “on”或在具有 contenteditable display 属性到 none 不会有任何效果,您需要从DOM中移除元素来隐藏它们。

我认为,性能更好只是更新的风格。

而不是 element.setAttribute("style", "display:none"); 你可以用 element.style.display= "none"; 如果使用第一种方法,将删除元素上的任何其他样式设置。

可能你不需要用户看到元素,但是你需要对它做一些js逻辑,所以隐藏在这里是最好的。