<head>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<main></main>
</body>
- Begin constructing the DOM by parsing HTML
- Request CSS and JS resources
- This is synchronous: wait for CSS resources
- Parse CSS and construct CSSOM tree
- Wait for JS to load, parse it
- Execute JS
- Merge DOM and CSSOM into the Render tree
- Run Layout and Paint
graph TD;
linkStyle default interpolate basis;
HTML --> DOM:::blue;
DOM --> CSSOM:::magenta;
JavaScript -.-> DOM;
DOM -.-> JavaScript:::yellow;
JavaScript -.->CSSOM;
CSSOM --> RenderTree:::violet;
RenderTree --> Layout:::violet;
Layout --> Paint:::green;