Caching Selectors
In this page:
What is Selector Caching?
Selector caching means running a jQuery selector once, storing the resulting jQuery object in a variable, and reusing that variable instead of re-running the same selector every time you need that element again. Each time a selector runs, jQuery has to search the DOM again, which adds up if it happens repeatedly.
Example: What is Selector Caching?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="text">Text</p>
<script>
const $text = $("#text");
$text.css("color", "red");
$text.css("font-size", "18px");
</script>
</body>
</html>Why Cache Selectors?
Caching is especially helpful when the same element or set of elements gets used many times within the same function or event handler, since it avoids repeating an identical, potentially expensive DOM lookup on every use. It also tends to make the code shorter and easier to read.
Example: Why Cache Selectors?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Click</button>
<script>
const $btn = $("#btn");
$btn.on("click", function() {
$btn.css("background", "yellow");
});
</script>
</body>
</html>Cache Before Repeated Work
If a loop or a frequently-triggered event handler uses the same selector on every iteration or every call, store the resulting jQuery object in a variable before the loop or handler runs, rather than re-selecting it each time. This keeps repeated work out of code paths that execute often.
Example: Cache Before Repeated Work
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"><li>One</li><li>Two</li></ul>
<script>
const $items = $("#list li");
$items.each(function() {
$(this).css("color", "blue");
});
</script>
</body>
</html>Cache Inside Functions
A cached selector is often created once at the top of a function that works with the same element or elements several times within its body, so the selection only happens once no matter how many times that function is called or how it branches internally.
Example: Cache Inside Functions
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box">Box</div>
<script>
function styleBox() {
const $box = $("#box");
$box.css("color", "red");
$box.css("padding", "10px");
}
styleBox();
</script>
</body>
</html>Small Caching Project
Caching is a simple, low-risk optimization — reach for it whenever you notice the exact same selector string appearing more than once in code that runs repeatedly, such as inside an event handler or a loop.
Example: Small Caching Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Click</button>
<script>
const $btn = $("#btn");
$btn.on("click", function() {
$btn.text("Clicked!");
});
</script>
</body>
</html>Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: