Skip to content
Hallway
0:00 / 0:00

#browserrendering#criticalrenderingpath#reflow

Ryan Seddon: So how does the browser actually render a website | JSConf EU 2015

JSConf

286K subscribers • 33 videos on Hallway

YouTube
  • Recommended by 2 people: 1 on Lobsters and 1 in engineering communities.
  • A classic. People kept recommending it from 2015 to 2024.
  • Presented by Ryan Seddon
  • May be out of date. Uploaded 11 years ago, in an area where tools change fast.

Intermediate. Assumes working knowledge.

157K views11 years ago2 recommendations

Web developmentSystems programmingHow browsers workWeb performance

Ryan Seddon explains the internal mechanics of how web browsers parse HTML, apply CSS, execute JavaScript, and render pages.

We all take for granted that when we push enter in the browsers address bar, magic happens. The browser gets our HTML, that intern requests all the dependencies, insert magic, other things happen and then we have our site rendered. Simple, right, right… Like many people as I’ve progressed in my career, building for the web, I’ve become curious as to how the browser does what it does. What makes it tick, how it turns a string of HTML into a data structure, how CSS & JavaScript come into play. Things like render tree, style recalculation, paints, reflows, all alien words will start to make sense by the end of this talk. Suddenly you’ll understand why people recommend you place script tags at the bottom of the document, inlining critical CSS & all sorts of other performance techniques. Intro music by @halfbyte

Why it's here

2 people recommend this

What people say. Recommended for understanding the lower-level mechanics of browser rendering, reflows, and paints.

u/ikevinwin r/Frontend • Recommends

On “Help improving as a software engineer”

The cherno c++ youtube playlist if you want to learn about lower level stuff. MIT 6.006 for algorithms (prereq: discrete math but probably can learn as you go). Learned more from this than the same course from my university. Then re-enforce with leetcode or neetcode. Most of these are useless in the frontend, but it is good to know. For example, knowing about data structures and algorithms has helped me understand how things like regex and autocomplete work under the hood. Frontend under the hood: Event loop link to this video Browser link to this video link to this video
5View on Reddit

pushcxon Lobsters • Recommends

So how does the browser actually render a website?
2View on Lobsters