jQuery Optimization: Optimize Selector

We can also optimize our selector other than being a bit specific on our selector. The key to optimize our selector is simple. Naive JavaScript provides two method to get id and tag (getElementById and getElementByTagName). Hence, it is always faster to use tag or id on your selector. No matter what algorithm used for classes and attributes selection, the naive built-in JavaScript method will always have the upper hand. Nonetheless, classes and attribute selector have also been improved dramatically through the introduction of ’sizzling’ selector engine. However, it is always advisable to reduce the number of attribute selector as they are the slowest in many cases. On the other hand, making your selector as simple as possible is good for pure tag and id selector but may not be true for attribute and selector.

jQuery('div')
jQuery('#id')
jQuery('.classes')
jQuery('p:last')

is considered as good selectors while the below might not give you very good selector result.

jQuery('body div div')
jQuery('div#id')
jQuery('#id div.classes')
jQuery('.classes p:last')

It is important to treat jQuery as a helper of JavaScript instead of a new language.

How to Search Item in List in JavaScript

Multi Step Form Using HTML and JavaScript

Form is the important part in web design. Form is the primary interface to the user by which user is…

How to Create Custom CSS, jQuery Autocomplete Plugin

Web developers often use autocomplete features in websites as a part of their work. Yet lot of good …

How to Make Sticky Sidebar Using jQuery and CSS

Sticky sidebar is an essential part of web development. Not in all cases but for some cases where ou…

Selectors, Animation, and AJAX – jQuery Tutorial And Examples

By now I’m sure you have grasped at least the basics and simplicity of the jQuery library. Now it’s …

s3Slider jQuery Plugin & Tutorial

The s3Slider jQuery plugin is made by example of jd`s smooth slide show script. Usage: HTML: Sample …