Add details here
Flow
- Constructing the Document Object Model (DOM) from the HTML.
- Constructing the CSS Object Model (CSSOM) from the CSS.
- Applying any JavaScript that alters the DOM or CSSOM.
- Constructing the render tree from the DOM and CSSOM.
- Perform style and layout operations on the page to see what elements fit where.
- Paint the pixels of the elements in memory.
- Composite the pixels if any of them overlap.
- Physically draw all the resulting pixels to screen.
Resources & CRP
Resources for Initial Render
- Part of the HTML.
- Render-blocking CSS in the
<head>element. - Render-blocking JavaScript in the
<head>element.
Importantly, for the initial render, the browser will not typically wait for:
- All of the HTML.
- Fonts.
- Images.
- Non-render-blocking JavaScript outside of the
<head>element (for example,<script>elements placed at the end of the HTML). - Non-render-blocking CSS outside of the
<head>element, or CSS with a media attribute value that does not apply to the current viewport.
Resource Loading
- CSS is render blocking
- Scripts are parser blocking
- Browsers have a preload scanner, that can continue to download resource, while waiting on blocked resources
References
- MDN
- Understanding the critical path
- Optimizing Resource Loading
- Optimizing the Critical Rendering Path
From ByteByteGo
- Downloaded from Alex Xu Twitter post.
