The DOM, Event Delegation, Browser Storage & Web APIs
Master browser internals: DOM manipulation without layout thrashing, high-performance event delegation, client-side persistence, and hands-on component engineering.
Solid understanding of JavaScript events, asynchronous execution, and objects.
Manipulate the DOM without layout thrashing, implement high-performance event delegation, and persist data across storage APIs.
Read in order, or jump to what you need.
Every lesson builds on the one before it. Open any lesson to read the explanation, run the examples, and try the practice challenges.
- 08.01DOM Architecture: The Render Tree, Reflows & Layout Thrashing4 min
Explore the browser rendering engine. Understand the DOM and CSSOM, contrast Reflows and Repaints, and eliminate forced synchronous layout thrashing.
- 08.02Event Architecture: Capturing, Bubbling, Delegation & CustomEvents4 min
Deconstruct the DOM Event model. Master capturing and bubbling phases, prevent default actions, stop propagation safely, and implement high-performance event delegation.
- 08.03Client Storage Architecture: LocalStorage, SessionStorage & IndexedDB4 min
Compare browser persistence layers. Contrast synchronous string key-value storage (LocalStorage) with asynchronous transactional object storage (IndexedDB).
- 08.04Guided Project: Production Interactive Kanban Board with Event DelegationProject4 min
Build an interactive, high-performance Kanban board from scratch. Implement event delegation, drag-and-drop state transitions, keyboard navigation, and localStorage persistence.
Ready to move on?
Complete the Virtual Kanban Board project with persistent drag-and-drop mechanics.
Open the module self-check