Cache DOM Queries

Cache DOM Queries: free step-by-step lesson with examples, common mistakes, and interview tips — part of jQuery Tutorial on Toolliyo Academy.

8 min read Updated 8/23/2026

On this page

jQuery Tutorial · Lesson 61 of 100

Cache DOM Queries

Setup & DOM ✓ → Events Effects AJAX ✓ → Perf & Integrate → Ship & Projects

Perf & Integrate · 3 — Harden · ~10 min · Performance and Security

What is this?

Every $("selector") walks the DOM. Cache stable collections in variables and reuse them inside handlers and loops. Refresh the cache only after structural changes.

Why should you care?

QueryVerse polling widgets that re-query huge tables every few seconds waste main-thread time on shared ops PCs.

See it live — copy this example

Examples include the jQuery 3.7 CDN. Paste into an HTML file or use Run Example to preview.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>QueryVerse</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 1.25rem; }
    .box { padding: .75rem; border: 1px solid #ccc; border-radius: 8px; margin: .5rem 0; }
    .muted { color: #666; }
    button { margin-right: .35rem; margin-top: .35rem; }
    input, select, textarea { margin: .25rem 0; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: .4rem .55rem; text-align: left; }
    .hidden { display: none; }
    .row-odd { background: #f7f7f7; }
    .active { font-weight: 700; }
    .toast { background: #111; color: #fff; padding: .5rem .75rem; border-radius: 6px; }
  </style>
</head>
<body>
  <ul id="ticks" class="box"><li>Nifty</li><li>BankNifty</li><li>Sensex</li></ul>
  <button type="button" id="poll">Poll labels ×5</button>
  <p id="out" class="muted"></p>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  var $ticks = $('#ticks');
  var $items = $ticks.children('li');
  $('#poll').on('click', function () {
    var i;
    for (i = 0; i < 5; i += 1) {
      $items.eq(i % $items.length).text(function (idx, old) {
        return old.replace(/ \d+$/, '') + ' ' + (i + 1);
      });
    }
    $('#out').text('Reused cached $items; count=' + $items.length);
  });
});
</script>
</body>
</html>

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>QueryVerse</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 1.25rem; }
    .box { padding: .75rem; border: 1px solid #ccc; border-radius: 8px; margin: .5rem 0; }
    .muted { color: #666; }
    button { margin-right: .35rem; margin-top: .35rem; }
    input, select, textarea { margin: .25rem 0; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: .4rem .55rem; text-align: left; }
    .hidden { display: none; }
    .row-odd { background: #f7f7f7; }
    .active { font-weight: 700; }
    .toast { background: #111; color: #fff; padding: .5rem .75rem; border-radius: 6px; }
  </style>
</head>
<body>
  <ul id="ticks" class="box"><li>Nifty</li><li>BankNifty</li><li>Sensex</li></ul>
  <button type="button" id="poll">Poll labels ×5</button>
  <p id="out" class="muted"></p>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  var $ticks = $('#ticks');
  var $items = $ticks.children('li');
  $('#poll').on('click', function () {
    var i;
    for (i = 0; i < 5; i += 1) {
      $items.eq(i % $items.length).text(function (idx, old) {
        return old.replace(/ \d+$/, '') + ' ' + (i + 1);
      });
    }
    $('#out').text('Reused cached $items; count=' + $items.length);
  });
});
</script>
</body>
</html>

Result