【问题标题】:What's the difference between live and not live collection in Javascript selectors?Javascript 选择器中的 live 和 not live 集合有什么区别?
【发布时间】:2015-09-09 17:50:48
【问题描述】:

我如何知道实时收藏和非实时收藏之间的区别。

根据我的研究:

live 是:当 DOM 中的更改反映在集合中时。修改节点时,内容会发生变化。

Not Live 是:当 DOM 中的任何更改都不会影响集合的内容时。

document.getElementsByClassName() 是一个 HTMLCollection,并且是实时的。

document.getElementsByTagName() 是一个 HTMLCollection,并且是实时的。

document.getElementsByName() 是一个 NodeList 并且是实时的。

document.querySelectorAll() 是一个 NodeList 并且不是实时的。

为什么 document.querySelectorAll 没有上线?

我知道:

HTMLCollection 只包含 Elements 节点 NodeList 包含元素节点和文本节点。

【问题讨论】:

标签: javascript


【解决方案1】:

这些

document.getElementsByClassName()
document.getElementsByTagName()
document.getElementsByName()

之所以存在,是因为它们是引擎维护的内部集合的观察者。这种维护不是严格要求的,但很容易实现。

document.querySelectorAll() 

不存在,因为每次请求时都会计算结果。 实时集合的维护成本太高,因为在这种情况下,DOM 的每次修改(内容、属性、类)都需要重新评估集合中的每个元素 - O(N*M) 任务,其中 N 是 DOM 中所有元素的数量(最坏情况)和 M 个活跃的querySelectorAll() 集合。

【讨论】:

  • 我也是这么想的,但是 CSS 怎么这么快就应用了这样的选择器呢?
  • 不幸的是它没那么快。要找出 DOM 中所有元素的所有样式是 O(N*S) 任务,其中 N 是 DOM 元素的数量,S 是样式规则的数量(准确地说是选择器)。你可以在这里阅读我的文章:terrainformatica.com/2008/07/…
【解决方案2】:

来自DOM spec

collection 是一个表示 DOM 节点列表的对象。一种 collection 可以是 livestatic。除非另有 声明,collection 必须是 live

如果collectionlive,那么属性和方法就在 该对象必须对实际的底层数据进行操作,而不是快照 数据。

创建collection 时,过滤器和根关联 用它。

collection 然后代表一个以子树为根的视图 collection 的根,仅包含与给定匹配的节点 筛选。视图是线性的。在没有具体要求的情况下 相反,collection 内的节点必须在 tree order.

使querySelectorAll 返回静态NodeList 的原因可能是能够允许更复杂的选择器。

例如,选择器 L4 可能会引入诸如 :has() 伪类之类的东西。可能,由于它不能以合理的性能实现,它只能在querySelectorAll 中可用,而不能在样式表中。

如果querySelectorAll 返回的集合是实时的,那么那些复杂的选择器将需要重新计算很多次,而且成本会很高。

【讨论】:

  • 如果应用样式足够快,无论快/慢,为什么还不够快来维护集合?
  • @dandavis 查找匹配复杂选择器的元素如果你只做一次就可以了,但是每次修改 DOM 时重新计算它们太昂贵了。
  • CSS 设法在每次修改 DOM 时保持更新。我同意你的回答,这是有道理的,但它引出了一个问题,即样式表如何能够足够快地应用并保持应用......
  • @dandavis 是的,样式表就像实时集合。这就是为什么像:has() 这样昂贵的选择器将被允许在querySelectorAll 中使用,但可能不会在样式表中。
  • 今天的样式表已经足够好了。我不是要挑剔你,这似乎是对 JS 的抄袭……
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-12-02
相关资源
最近更新 更多