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: input[name=input1];
  • by classname: .input1;
  • by ID: #input1.

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.

Related Post

Post Not Found.