Boost jQuery Performance: 6 Proven Techniques to Speed Up Your UI

jQuery’s official site lists six performance recommendations that can noticeably speed up DOM manipulation and rendering.

1. Append Outside the Loop

Appending in each iteration is costly. Build a fragment or a string first, then append once.

$.each(myArray, function(i, item) {
    var newListItem = "<li>" + item + "</li>";
    $("#ballers").append(newListItem);
});

Improved version using a document fragment:

var frag = document.createDocumentFragment();
$.each(myArray, function(i, item) {
    var li = document.createElement("li");
    li.textContent = item;
    frag.appendChild(li);
});
$("#ballers")[0].appendChild(frag);

2. Cache Length in Loops

Do not read array.length on every iteration; store it beforehand.

var myLength = myArray.length;
for (var i = 0; i < myLength; i++) {
    // ...
}

3. Detach Child Nodes Before Manipulation

Remove a node from the DOM, perform changes, then re‑attach it to avoid repeated reflows.

var $table = $("#myTable");
var $parent = $table.parent();
$table.detach();
// perform operations on $table
$parent.append($table);

4. Avoid Operations on Empty Selections

jQuery does not warn when a selector matches nothing, so check the length first.

// Bad
$("#nosuchthing").slideUp();

// Good
var $elem = $("#nosuchthing");
if ($elem.length) {
    $elem.slideUp();
}

5. Selector Optimization

Use ID selectors : $("#container div.robotarm") is fast; $("#container").find("div.robotarm") is faster because it leverages getElementById.

Make the right side specific, left side simple : $(".data td.gonzalez") is faster than $("div.data .gonzalez") because selectors are evaluated from right to left.

Avoid redundancy : $(".data td.gonzalez") is preferred over $(".data table.attendees td.gonzalez").

Avoid universal selectors : $(".buttons > *") is slow; use $(".buttons").children() instead. Similarly, replace implicit universal selectors like $(".category :radio") with explicit ones such as $(".category input:radio").

6. Use Stylesheets for Bulk CSS Changes

Calling .css() on many elements is slow. Inject a style rule instead.

// Slow
$("a.swedberg").css("color", "#0769ad");

// Fast
$("<style>a.swedberg { color: #0769ad; }</style>").appendTo("head");

Applying these six tips can reduce DOM‑related overhead and make jQuery‑driven interfaces noticeably faster.