5 
while (div.hasChildNodes()) {
    fragment.appendChild(div.firstChild)
}

while (div.firstChild) {
    fragment.appendChild(div.firstChild)
}

比较上面的两段伪代码，它们都附加了divto的每个子级，fragment直到没有更多子级为止。

  1. 你什么时候喜欢hasChildNodes或者firstChild它们看起来相同。
  2. 如果 API 如此相似，那么为什么它们都存在。hasChildNodes()当我可以强制firstChild从null到时为什么存在false
4

5 回答 5

4

a) 微优化！

b) 尽管这似乎是一种常见的做法，但我不喜欢依赖空/非空值来代替假/真。这是一个节省空间的方法，在启用服务器压缩的情况下是不必要的（有时可以称为细微的错误）。每次都选择清晰，除非它被证明会导致瓶颈。

我会选择第一个选项，因为它完美地解释了你的意图。

于 2012-04-13T01:21:06.693 回答
4

您的两个实现之间没有功能差异。两者在所有情况下都会产生相同的结果。

如果你想追查两者之间是否存在性能差异，则必须在所需的目标浏览器上运行性能测试，看看是否存在有意义的差异。

这是两者的性能测试。它似乎是特定于浏览器的，哪个更快。 hasChildNodes()在 Chrome 中明显更快，但firstChild在 IE9 和 Firefox 中稍快一些。

在此处输入图像描述

于 2012-04-13T01:24:26.153 回答
0

我会建议hasChildNodes()而不是firstChild只是因为return; 如果为空则返回，hasChildNodes()而返回；这允许您在检查数据是否存在时更有效地解析数据。实际上，这取决于您计划如何操作 DOM 以实现您的结果。falsefirstChildnull

于 2012-04-13T01:22:12.970 回答
0

除了一些（可能）可以忽略不计的速度差异之外，您的两个示例通常*表现相同。

偏爱一个优于另一个的唯一原因是清晰，特别是每个构造如何很好地代表其余代码正在实现的想法，并根据其中一个构造是否更容易在您阅读代码时进行可视化解析来调节。我建议尽可能地支持清晰而不是性能或不必要的迂腐正确性。

* 注意：我假设您正在使用现代浏览器的网页上运行此代码。如果您的代码需要在其他上下文中运行，则 .hasChildNodes() 和 .firstChild 之间可能存在显着的速度差异甚至功能（副作用）差异：一个需要设置和执行函数调用，另一个需要如果第一个子节点不可用，则构建一个符合脚本的 DOM 兼容表示。

于 2012-04-13T01:50:04.333 回答
0

假设 DOM 调用很慢，您可以通过使用单个调用来进一步优化（以牺牲可读性为代价）firstChild：

var child;
while ( (child = div.firstChild) ) {
    fragment.appendChild(child);
}

...虽然（奇怪的是，对我来说）这显然没有帮助，而且使事情变得更糟，根据这个 jsPerf：http: //jsperf.com/haschildnodes-vs-firstchild/2

至于为什么这两种方法都存在，请记住 DOM 并不是 JavaScript 独有的。例如，在 Java DOM 实现中，您必须明确比较firstChild（或更可能firstChild()）与null.

于 2012-04-13T08:26:58.353 回答