Explore the intricate process of browser rendering in this JSConf EU 2015 talk by Ryan Seddon. Delve into the magic behind entering a URL and seeing a fully rendered website. Uncover the journey from HTML string to data structure, examining concepts like render trees, style recalculations, paints, and reflows. Gain insights into performance techniques such as placing script tags at the bottom of documents and inlining critical CSS. Follow the high-level flow of browser rendering, including HTML parsing, DOM and CSSOM creation, render tree construction, and painting. Learn about speculative parsing, reentrant parsing, and the relationship between DOM nodes and render objects. Understand the importance of batching layouts for optimal performance and explore the complexities of the modern browser's rendering process.
Overview
Syllabus
Intro
What we'll cover
High level flow
Parsing HTML
Remember xhtml strict
Valid HTML5
Would output
Parsing flow
Tokenizer
Parse Tree
DOM Tree
Speculative parsing
Reentrant
at the bottom
DOM + CSSOM
Multiple trees
Not in the render tree
In the render tree, not in the DOM
DOM Node to Render Object
Calculating visual properties
Recursive process
Will batch layouts
Immediate layout
Take note from the browser and batch
Bad
Good
Real world
Paint setup
Render Layers
Painting
inline critical CSS
Recap
The browser is complicated
Taught by
JSConf
