Browser Internals for JS Devs
summary
Shows concrete things that change code: browsers run on two main threads so layout and heavy JS block rendering, CSS transforms run on the compositor so translate/scale animations stay smooth while changing height triggers repeated reflow and jank, v8 compiles functions on first call and uses Turbofan optimizations that break on try/catch, eval or changing object shapes, profiling with Chrome DevTools and node --prof finds leaks, aim for JS payload <500KB and under 5,000 DOM nodes for good mobile performance.
AI-written summary · about
chapters (23)
- 0:00Intro
- 1:01A Browsers Job
- 4:47DOM Tree
- 5:46Render Tree
- 6:23WebCore Representations
- 6:50Parsing HTML is Hard
- 8:37Execution stops at Script Tags
- 10:51Paint Order
- 11:41Tokenization Example
- 14:18What causes Reflow?
- 21:58Best Practices for avoiding Reflow
- 22:56Animation Frames
- 25:08Profiling
- 28:22Memory Leaks
- 31:35node / command line
- 33:52Compilers
- 34:52Leaking or re-assigning arguments
- 35:54Safe arguments
- 36:06Isolate non optimizable code into small functions
- 36:23Hidden Classes
- 37:22Class Chain
- 39:18Monomorphic vs Polymorphic
- 40:03Optimize Mobile
