Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Performance] Fast path to resolve body selector #1545

Merged
merged 1 commit into from
Aug 1, 2023

Conversation

Telroshan
Copy link
Collaborator

It's a pretty common pattern to define trigger events using the from:body syntax.

The issue: this "body" selector currently results in a call to document.querySelectorAll inside querySelectorAllExt

While this may seem a negligible thing, it turns out that on large HTML pages, this makes the initial page load & parsing way slower.

  • In this JSFiddle, using the current state of the lib (open the developer console to see the logged execution times), I get in average the following:
    querySelectorAllExt called 5000 times with 'body', took 180 ms
  • In this JSFiddle, using the suggested change, I get in average the following:
    querySelectorAllExt called 5000 times with 'body', took 3.5 ms

The example code here is simply letting htmx initialize 5 000 divs, that have the exact same hx-trigger specified, which is in this example hx-trigger="customEvent from:body"

While it is negligible on a typical HTML page where you wouldn't have thousands of divs, this example isn't taken out of nowhere, it's actually a real use case I have on Zorro, where a board could totally have thousands of tasks at once.
I'm using a similar hx-trigger specifier for every task to trigger individual refreshes on some actions, such as hx-trigger="refreshTask{{ .ID }} from:body".

The suggested change here helps cutting down initial page load times, which contributes to user experience.
The cost is simply 2 more lines of code in the core.

@alexpetros alexpetros added the enhancement New feature or request label Jul 17, 2023
@alexpetros alexpetros added the ready for review Issues that are ready to be considered for merging label Jul 30, 2023
@alexpetros
Copy link
Collaborator

Great 👍

@1cg 1cg merged commit efb42e0 into bigskysoftware:dev Aug 1, 2023
5 checks passed
@Telroshan Telroshan deleted the body-selector-fast-path branch September 22, 2023 05:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request ready for review Issues that are ready to be considered for merging
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants