.closest(Array) in jQuery 1.4

A new method signature is slated for jQuery 1.4: .closest(Array). It builds upon the previous .closest() method and hyper-optimizes the logic needed for handling event delegation (and live events).

closest() (and by extension, is()) has become a critical function in jQuery. With more people using live events reducing any overhead has become of the utmost importance. Every time an event fires that live is bound to (such as click or mousemove) jQuery uses the closest() method to go from the target element and find the nearest element that matches the specific selector. The more handlers that are bound, though, the more computationally expensive it becomes.

In jQuery 1.4 we’ve added closest(Array) which gives us the ability to batch these selector checks together and reduce the amount of time that we spend traversing the DOM.

Example

<html>
  <body>
    <div id="main">
      <div id="test">
        <div id="mouseme"></div>
      </div>
    </div>
  </body>
</html>

And the following handlers are bound:

$("#mouseme").live("mousemove", ...)
$("#main").live("mousemove", ...)
$("body").live("mousemove", ...) // (plugin A)
$("body").live("mousemove", ...) // (plugin B)

Let’s pretend that a ‘mousemove’ event occurs on #mouseme.

In jQuery 1.3.2:

  1. #mouseme check on #mouseme (load Sizzle)
  2. Return.
  3. #main check on #mouseme (load Sizzle)
  4. Walk up tree.
  5. #main check on #test (load Sizzle)
  6. Walk up tree.
  7. #main check on #main (load Sizzle)
  8. Return.
  9. body check on #mouseme (load Sizzle)
  10. Walk up tree.
  11. body check on #test (load Sizzle)
  12. Walk up tree.
  13. body check on #main(load Sizzle)
  14. Walk up tree.
  15. body check on body (load Sizzle)
  16. Return.
  17. body check on #mouseme (load Sizzle)
  18. Walk up tree.
  19. body check on #test (load Sizzle)
  20. Walk up tree.
  21. body check on #main(load Sizzle)
  22. Walk up tree.
  23. body check on body (load Sizzle)
  24. Return.
  25. Sort all element results.
  26. Loop through the results to trigger.

In jQuery 1.4:

  1. #mouseme check on #mouseme (load Sizzle)
  2. #main check on #mouseme (load Sizzle)
  3. body check on #mouseme (load Sizzle)
  4. Walk up tree.
  5. #main check on #test (load Sizzle)
  6. body check on #test (load Sizzle)
  7. Walk up tree.
  8. #main check on #main (load Sizzle)
  9. body check on #main (load Sizzle)
  10. Walk up tree.
  11. body check on body (load Sizzle)
  12. Return.
  13. Loop through the results to trigger.

In summary: There is less walking up the tree, no running of duplicate selectors, and no sorting of element results.

We’re still on track to push out a new alpha very soon and the final release on January 14th.

Posted: December 18th, 2009

Subscribe for email updates

29 Comments (Show Comments)


Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.

Secrets of the JavaScript Ninja

Secrets of the JS Ninja

Secret techniques of top JavaScript programmers. Published by Manning.

Subscribe for email updates

John Resig Twitter Updates

@jeresig / Mastodon

Infrequent, short, updates and links.