Parsing & Page Rendering
Explore how browsers parse HTML, build the DOM and render tree, calculate layouts, and paint pixels to optimize rendering performance. Learn the impact of JavaScript and CSS on smooth animations and frame rates to reduce jank and create fast, responsive webpages.
What a browser is made of
The browser is made of a few different components, many of which play a critical role in rendering.
-
User interface: All the interactive elements, including buttons on a browser, except for the window where the page is displayed.
-
Browser engine: The go-between for the UI and the rendering engine.
-
Rendering engine: Renders the requested content.
-
Networking: Handles network calls, such as HTTP requests, which we studied previously.
-
UI backend: Used for drawing basic widgets, such as list boxes and windows. It exposes a generic interface that uses OS methods underneath.
-
JavaScript engine: Parses and executes JavaScript code.
-
Data storage: The browser has some persistent memory available to store information like cookies, passwords, and history.
The importance of rendering performance
Web user’s today expect that ...