Avoid Layout Thrash

Avoid Layout Thrash: 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 64 of 100

Avoid Layout Thrash

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

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

What is this?

Layout thrash happens when you interleave reads of geometry (width, offset, height) with writes that invalidate layout. Batch reads, then batch writes.

Why should you care?

QueryVerse sticky headers and equal-height cards can stutter if each row reads offsetHeight mid-loop.

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>
  <div id="a" class="box">Card A</div>
  <div id="b" class="box">Card B</div>
  <button type="button" id="thrash">Thrashy equalize</button>
  <button type="button" id="batch">Batched equalize</button>
  <p id="out" class="muted"></p>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $('#thrash').on('click', function () {
    $('#a').height('auto'); $('#b').height('auto');
    $('#a').height($('#b').height());
    $('#b').height($('#a').height());
    $('#out').text('Thrashy pattern ran (read/write interleaved)');
  });
  $('#batch').on('click', function () {
    $('#a').height('auto'); $('#b').height('auto');
    var ha = $('#a').height();
    var hb = $('#b').height();
    var max = Math.max(ha, hb);
    $('#a').height(max);
    $('#b').height(max);
    $('#out').text('Batched: max=' + max);
  });
});
</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>
  <div id="a" class="box">Card A</div>
  <div id="b" class="box">Card B</div>
  <button type="button" id="thrash">Thrashy equalize</button>
  <button type="button" id="batch">Batched equalize</button>
  <p id="out" class="muted"></p>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $('#thrash').on('click', function () {
    $('#a').height('auto'); $('#b').height('auto');
    $('#a').height($('#b').height());
    $('#b').height($('#a').height());
    $('#out').text('Thrashy pattern ran (read/write interleaved)');
  });
  $('#batch').on('click', function () {
    $('#a').height('auto'); $('#b').height('auto');
    var ha = $('#a').height();
    var hb = $('#b').height();
    var max = Math.max(ha, hb);
    $('#a').height(max);
    $('#b').height(max);
    $('#out').text('Batched: max=' + max);
  });
});
</script>
</body>
</html>

Result