Learn JavaScript

Lesson 5 of 9 · The DOM and Events: JavaScript Touches the Page

Module 14 · The DOM and Events: JavaScript Touches the Page

Under the Hood: Reflow, Repaint, Live Lists and Batching

ProReading

Tania's dashboard shows 500 bars. When the data changes, a loop resizes each bar to match its value. On her laptop it is fine. On her phone the page freezes for a moment each time. The loop is short, the maths is trivial, and the profiler blames something called "Layout".

Checking what this lesson needs for you…

What is inside Under the Hood: Reflow, Repaint, Live Lists and Batching

  1. From tree to pixels
  2. What forces a layout
  3. The lab: read after write, measured
  4. Repaint, and the cheap properties
  5. requestAnimationFrame
  6. Live and static lists
  7. Events and the event loop
  8. How a framework batches