What's the difference between live and not live collection in Javascript selectors?

前端 未结 2 2023
情书的邮戳
情书的邮戳 2021-02-08 09:40

How can I know what is the difference between live and not live collection.

According to my research:

A live is: when the changes in

相关标签:
2条回答
  • 2021-02-08 09:45

    These

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

    are live because they are observers of internal collections maintained by engines. That maintenance is not strictly required but is easy to achieve.

    document.querySelectorAll() 
    

    is not live because result gets computed each time you request it. Maintenance of live collection is too expensive as each modification (content, attributes, classes) of the DOM in this case will require re-evaluation of each element in the collection - O(N*M) task where N is the number of all elements in the DOM (worst case) and M number of active querySelectorAll() collections.

    0 讨论(0)
  • 2021-02-08 10:05

    From the DOM spec

    A collection is an object that represents a lists of DOM nodes. A collection can be either live or static. Unless otherwise stated, a collection must be live.

    If a collection is live, then the attributes and methods on that object must operate on the actual underlying data, not a snapshot of the data.

    When a collection is created, a filter and a root are associated with it.

    The collection then represents a view of the subtree rooted at the collection's root, containing only nodes that match the given filter. The view is linear. In the absence of specific requirements to the contrary, the nodes within the collection must be sorted in tree order.

    The reasoning to make the querySelectorAll return a static NodeList may be to be able to allow more complex selectors.

    For example, Selectors L4 may introduce things like the :has() pseudo-class. Probably, since it can't be implemented in a reasonable performance, it will only be available in querySelectorAll but not in stylesheets.

    If the collection returned by querySelectorAll was live, then those complex selectors would need to be recalculated lots of times, and that would be so expensive.

    0 讨论(0)
提交回复
热议问题