Working with the DOM and Living to Tell
Before React. Before Vue. Before every abstraction layer. There was the DOM. And understanding it is still the most important skill a frontend developer can have.
Why this talk matters
By 2016, frameworks like Angular and React were abstracting away the DOM. Developers were writing components without understanding what happened underneath. This talk was a deliberate push back against that trend.
It covered DOM traversal, manipulation performance (batch reads/writes to avoid layout thrashing), event delegation, the rendering pipeline (style > layout > paint > composite), and when to fight the framework vs work with it.
The title was deliberately provocative. The DOM has a reputation for being painful, but it's painful because people misunderstand it, not because it's inherently bad.
Key takeaways
- Layout thrashing is the #1 DOM performance killer. Batch your reads, then batch your writes. Never interleave them.
- Event delegation isn't just a pattern. It's a philosophy. Let events bubble and handle them at the right level.
- Understanding the rendering pipeline (style, layout, paint, composite) is what separates a developer who writes fast UIs from one who just writes UIs.
- Frameworks abstract the DOM but they can't fix your misunderstanding of it. Know what's underneath.
I gave this at tim.js, the JavaScript meetup I co-organized with Andrei Pfeiffer. The audience was a mix of juniors and seniors, and the seniors were the ones asking the most questions.