What are the fastest/slowest selectors in jQuery ?
Last Updated :
27 Jul, 2021
jQuery Selectors are used for selecting and manipulating HTML elements.
In jQuery, there are mainly three selectors.
- ID selector
- Class selector
- Element selector
Before moving forward, first, let’s briefly see how these selectors are used.
Element Selector: jQuery element selector selects the element on the basis of their name.
Syntax:
$(''element")
Example:
HTML
<!DOCTYPE html>
<head>
<script src=
</script>
<style>
p {
font-size: 25px;
}
</style>
</head>
<body>
<p>GeeksForGeeks</p>
<script>
// Element selector
$("p").css("color", "red");
</script>
</body>
</html>
|
Output:
ID Selector: The jQuery #id selector selects the element on the basis of the ID attribute of the HTML tag.
This selector is basically used when we have to work on a single element because an ID should be unique within a web page.
Syntax:
$("#ID")
Example:
HTML
<!DOCTYPE html>
<head>
<script src=
</script>
<style>
p {
font-size: 25px;
}
</style>
</head>
<body>
<p>GeeksForGeeks</p>
<p id="first">Hello Geeks</p>
<script>
// ID selector
$("#first").css("color", "red");
</script>
</body>
</html>
|
Output:
ID selector
Class Selector: The jQuery .class selector selects the element or the set of elements whose class matched. The same class name is allowed for different HTML elements.
Syntax:
$(".class")
Example:
HTML
<!DOCTYPE html>
<head>
<script
</script>
</head>
<body>
<p class="first">GeeksForGeeks</p>
<p class="first">Hello Geeks</p>
<script>
// Class selector
$(".first").css("color","blue")
</script>
</body>
</html>
|
Output:
class selector
Let’s write some code to see how actually fast these selectors are?
Example: We will write a program that will perform the same task using different selectors, let’s see how much time they are taking.
HTML
<!DOCTYPE html>
<head>
<script src=
</script>
</head>
<body>
<p id="test">Hello</p>
<p class="test">Hello</p>
<h3>Hello</h3>
<script>
// ID Selector
let id_time = Date.now();
let id_t = 0;
for (let i = 0; i < 100000; i++) {
if ($("#test").css('background-color') == 'yellow')
$("#test").css('background-color', 'red');
else
$("#test").css("background-color", "yellow");
}
id_t = Date.now() - id_time;
console.log(' ID Selector : ' + id_t + ' milliseconds');
/*-------------------------------------------------------*/
// Class Selector
let cl_time = Date.now();
let cl_t = 0;
for (i = 0; i < 100000; i++) {
if ($(".test").css('background-color') == 'yellow')
$(".test").css('background-color', 'red');
else
$(".test").css("background-color", "yellow");
}
cl_t = Date.now() - cl_time;
console.log(' Class Selector :' + cl_t + ' milliseconds');
/*----------------------------------------------------------*/
// Element Selector
let el_time = Date.now();
let el_t = 0;
for (i = 0; i < 100000; i++) {
if ($("h3").css('background-color') == 'yellow')
$("h3").css('background-color', 'red');
else
$("h3").css("background-color", "yellow");
}
el_t = Date.now() - el_time;
console.log('Element Selector : ' + el_t + ' milliseconds');
</script>
</body>
</html>
|
Output:
ID Selector : 597 milliseconds
Class Selector :751 milliseconds
Element Selector : 741 milliseconds
After seeing the result of the above code, it is crystal clear that the ID selector is the fastest. The class and element selector is taking almost the same time.
What are the fastest/slowest selectors in jQuery?
Among all three selectors, the ID selector is the fastest selector because an ID of any HTML element will be unique within the web page and when a web page loaded, the browser will start searching for the element with a specified ID and an ID is unique, so the moment the browser finds the element with the specified ID, it will stop searching.
But in the case of a class selector, multiple elements can have the same class name and due to this, the browser has to traverse the whole DOM to find out each element having a specified class name. Due to this, the class selector is considered the slowest selector.
If you have a lot to perform on the web page, and it’s not possible to use an ID selector every time, then the best way is caching. Fetch the selectors once and store them for further use.
Note: If we consider today’s modern browsers, then these selectors are equally fast because in modern browsers class names are hashed internally, and we have .getElementsByClassName() whereas in older browsers there is no function similar to .getElementsByClassName() and that’s the reason .class name is parsed internally to jQuery and then every element of DOM is traversed and checked for the class name.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...