Browser Rendering: How Web Pages Are Displayed
Learn how browser rendering works, including how HTML, CSS, and JavaScript are processed to build the DOM, CSSOM, and render web pages on the screen.
View TutorialBrowser Engine Tutorials
Browser engines, DOM and CSSOM processing, critical rendering paths, and tips for improving web performance.
All Browser Engine Tutorials
Rendering
DOM: Document Object Model
Learn what the DOM is, how browsers create it from HTML, and how JavaScript uses the DOM to dynamically read and change web page content.
View TutorialVirtual DOM: What It Is and How It Works
Learn what the Virtual DOM is, how it works, and how frameworks like React use it to efficiently update the user interface by minimizing direct DOM manipulation.
View TutorialCSSOM: CSS Object Model
Learn what the CSSOM is, how browsers build it from CSS, and how it combines with the DOM to determine the final visual layout of a web page.
View TutorialCritical Rendering Path: How Browsers Show Pages
Learn what the critical rendering path is, which resources block rendering, and how to optimise it to make web pages load and display faster.
View TutorialReflow vs Repaint: Browser Performance
Learn the difference between browser reflow and repaint, what triggers each one, and how to avoid unnecessary layout recalculations for better performance.
View TutorialFundamentals
Web Browser: How Browsers Work
Understand how web browsers work, how they parse HTML, CSS, and JavaScript, and how they render web pages for users to interact with.
View TutorialGraphics
SVG vs Canvas: Key Differences
Learn the difference between SVG and Canvas, how each renders graphics in the browser, and when to use one over the other.
View Tutorial