How Browsers Work
What the browser does between a URL and pixels on screen.
Backend Engineer track
Junior
Write correct code, ship small changes safely, ask good questions.
Core: start here
- What Happens When You Type a URLDNS, TCP, TLS, HTTP, parsing, rendering: the classic end-to-end question.
2 more junior concepts
- CookieA small piece of data the server asks the browser to store and send back automatically on later requests.
- Web BrowserThe program that fetches, renders and runs web pages.
Mid-level
Own a feature end to end without hand-holding.
- Browser CacheThe browser storing responses so it doesn't download them again.
- Browser StorageCookies, localStorage, sessionStorage and IndexedDB.
- Critical Rendering PathThe steps from HTML bytes to pixels on screen.
- JavaScript EngineThe component that runs JavaScript, like V8 or SpiderMonkey.
Senior
Own a system, its failure modes, and its trade-offs.
Nothing here yet.
Staff
Shape how many teams build, across systems.
Nothing here yet.
Principal
Set technical direction for the organization.
Nothing here yet.
Frontend Engineer track
Junior
Build UI that works, ship small changes safely, ask good questions.
Core: start here
- CookieA small piece of data the server asks the browser to store and send back automatically on later requests.
- DOMThe browser's tree of objects representing the page.
- localStorageSimple, persistent key-value storage in the browser.
- What Happens When You Type a URLDNS, TCP, TLS, HTTP, parsing, rendering: the classic end-to-end question.
6 more junior concepts
- Browser CacheThe browser storing responses so it doesn't download them again.
- Browser CompatibilityMaking sure features work across browsers, e.g. by checking caniuse.
- Browser StorageCookies, localStorage, sessionStorage and IndexedDB.
- PolyfillCode that adds a missing feature to older browsers.
- sessionStorageKey-value storage that's cleared when the tab closes.
- Web BrowserThe program that fetches, renders and runs web pages.
Mid-level
Own a feature end to end without hand-holding.
- Browser ExtensionsAdd-ons that change browser behavior, and how they can break your site.
- Critical Rendering PathThe steps from HTML bytes to pixels on screen.
- CSSOMThe browser's tree of parsed styles.
- Feature Detection vs Browser SniffingChecking whether a feature exists instead of guessing from the browser's name.
- IndexedDBAn asynchronous database built into browsers.
- JavaScript EngineThe component that runs JavaScript, like V8 or SpiderMonkey.
- Layout / ReflowComputing the position and size of every element.
- Render TreeThe combination of DOM and CSSOM that actually gets drawn.
- Service WorkerA script between the page and the network, for offline support and caching.
Senior
Own an app's architecture, performance, and failure modes.
- Paint and CompositeFilling in pixels and assembling layers on the GPU.
Staff
Shape how many teams build, across apps.
Nothing here yet.
Principal
Set technical direction for the organization.
Nothing here yet.