Should HTMX use getElementById or querySelector instead of querySelectorAll when replacing based on id?

[CaliViking]

I may be on thin ice here, as I am not sure that there is an actual performance difference. However, I have noticed that HTMX becomes slower when there are many html elements in the DOM.

In the function oobSwap(oobValue, oobElement, settleInfo)

htmx/src/htmx.js

Line 817 in 8e26d12

function oobSwap(oobValue, oobElement, settleInfo) {

we specifically look for an id, but we are using querySelectorAll instead of getElementById or querySelector.

According to https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id - every id in the document should be unique, hence there should be no reason to use querySelectorAll, as only one element can be returned.

Would it be faster to use getElementById or querySelector than querySelectorAll? There seem to be different opinions on this on the internet, but it seems logical that getElementById should be faster as it is more specific. It should be a simple lookup.

Is there a reason that the code is using querySelectorAll today? It seems to be in conflict with the HTML specification.

Thanks in advance,
Niels

[Telroshan]

Hey, according to hx-swap-oob's documentation

If a selector is given, all elements matched by that selector will be swapped. If not, the element with an ID matching the new content will be swapped.

If you look at this line in oobSwap

htmx/src/htmx.js

Line 824 in 8e26d12

selector = oobValue.substr(oobValue.indexOf(":") + 1, oobValue.length);

You can see that place where the selector is no longer necessarily a unique ID selector, but can be any valid CSS selector

As for the performance aspect, never trust the random opinions on the internet ; measure it, it's the only way to know for sure!