jQuery is a popular Javascript library that developers often use for client-side development. Improving performance when working with jQuery involves understanding its best practices and optimizing your code for efficiency. Here are some tips along with sample code snippets to illustrate:
- Cache jQuery Objects:
Instead of repeatedly querying the DOM for the same elements, cache them in variables.
For example:
$('.myElement').css('color', 'red');
Should be changed to:$('.myElement').addClass('highlight');
var $myElements = $('.myElement');
$myElements.css('color', 'red');
$myElements.addClass('highlight');
-
Using Chaining
When a DOM element undergoes a change, it allows for the chaining of similar object references into groups for execution. This enables the reuse of existing jQuery objects, eliminating the need for repetitive creation, improve performance.
For example:
$('#myContents').addClass('active');
$('#myContents').css('border', '1px solid');
$('#myContents').css('background-color', 'red');
Should be changed to:
$('#myContents').addClass('active').css('border', '1px solid').('background-color', 'red');
-
Use Efficient Selectors
jQuery selectors can be slow, especially complex ones. Use efficient selectors like IDs or classes with a tag name.
For example:
$('ul li[data-category="books"]:first-child');
Should be changed to:
$('#books-list li:first-child');
-
Event Delegation
Use event delegation for handling events on dynamically added elements. Attach event listeners to a parent container rather than individual elements.
For example:
$('.list-item').click(function() {
// Handle click event
});
Should be changed to:
$('.list-container').on('click', '.list-item', function() {
// Handle click event
});
- Use .on() instead of Shortcut Methods
$.on() is more versatile and performs better than shortcut methods like .click(), .hover(), etc., especially when binding multiple events.
For example:
$('.button').click(function() {
// Click handler
});Should be changed to:
$('.button').on('click', function() {
// Click handler
}); -
Use .prop() for Boolean Attributes
When dealing with boolean attributes like checked, use .prop() instead of .attr() for better performance.
For example:
$('input[type="checkbox"]').attr('checked', true);
Should be changed to:
$('input[type="checkbox"]').prop('checked', true);
-
Minimize DOM Access in Loops
If you're iterating over a collection of elements, cache your selections outside the loop to avoid repeated DOM queries.
For example:
$('.list-item').each(function() {
$(this).addClass('processed');
});Should be changed to:
var $listItems = $('.list-item');
$listItems.each(function() {
$(this).addClass('processed');
});By following these tips, you can significantly improve the performance of your jQuery code, making it faster and more efficient. Hope this helps!
References:
https://jquery.com/https://stackoverflow.com/questions/30672695/how-to-optimize-jquery-performance-in-general
https://stackoverflow.com/questions/30672695/how-to-optimize-jquery-performance-in-general
Image source: https://www.freepik.com/free-photo/html-css-collage-concept-with-person_36295465.htm