Caching jQuery objects seems especially beneficial on UXP browsers

[UCyborg]

I've been messing with the web app at work recently, which uses jQuery library a lot, on one page, there is a table with records on the left and records' settings on the right, settings are on a form with numerous checkboxes, some text fields and select dropdowns. Devs don't seem to cache jQuery objects, even chaining jQuery function calls to manipulate the same object doesn't seem like a common appearance at first glance. I changed the code on that page, stored objects referring to frequently used elements on the page in a variable (plain JavaScript object) on page load, previously, the function that updates the form eg. when you select the entry in the table, needed anywhere from 140 ms to 220 ms to execute on Pale Moon. Now it's done in 46 ms to 78 ms. The function was also needlessly removing and adding event listeners on form elements, these could be just added once when the page is loaded. I timed it with console.time() and console.timeEnd() functions.

The improved responsiveness is noticeable without measuring. For reference, Firefox got from about 30 ms to 15 ms while Chromium got from about 60 ms to 30 ms.

[Moonchild]

This is what happens when someone with just a little bit more understanding of the underlying language has a look at code and spots bottlenecks
Maybe let the devs know they are leaving a ton of performance on the table by constantly pulling from the lib.

[UCyborg]

That's what I intend.

Wrapping code doing a lot of DOM updates in requestAnimationFrame() is also helpful, now the elapsed time no longer shoots up to 70s and it can get as low as 30 ms on Pale Moon. Clicking the entry in a table, which populates the form, there's still a small delay on Pale Moon, but it got from delayed (before caching was added) to practically instant on Chromium/Firefox, at least that's how it feels. I don't know if it can be improved further.