One of the reasons of slow web-page loading is jQuery selectors being used inefficiently.
We made a small benchmark to figure out which selector is more effective. We compared 3 selectors:
- by name:
- by classname:
- by ID:
Below you can see and run the benchmark youself (https://jsfiddle.net/xr6xf3h1/):
or download it from GitHub: https://github.com/Eleanorsoft/benchmark-jquery-selectors
The results are:
- the slowest selector is “By Name”
- selector “By Class” is faster by 45%-50% than “By Name”
- the fastest selector is “By ID”. It’s faster by 70%-75% than “By Class” and by 82%-87% than “By Name”.
Note: results in your browser may be different because vary on different devices.
Therefore, ID selectors should be used where it’s possible to avoid inefficient element selection.