- The DOM and CSSOM trees are combined to form the render tree.
- Render tree contains only the nodes required to render the page.
- Layout computes the exact position and size of each object.
- Paint is the last step that takes in the final render tree and renders the pixels to the screen.
Render blocking CSS
- CSS is treated as a render blocking resource, which means that the browser will hold rendering of any processed content until the CSSOM is constructed
DOM blocking scripts
- Executing an synchronous inline/external script blocks DOM construction.
Analyzing critical rendering path performance
Navigation Timing API
- domInteractive - The moment just after the browser finished parsing the document including scripts inserted in "traditional" blocking way i.e. without defer or async attribute.
- domContentLoaded - The time just before DOMContentLoaded event is fired, which is just after browser has finished downloading and parsing all the scripts that had defer set and no async attribute.
- domComplete - The point when all resources (e.g. images) required by the page have been downloaded and processed - this is the point when the loading spinner can stop spinning in the browser
"The document is marked as “interactive” when the user agent stops parsing the document. Meaning, the DOM tree is ready."
"The user agent fires the DOMContentLoaded (DCL) event once any scripts marked with "defer" have been executed, and there are no stylesheets that are blocking scripts. Meaning, the CSSOM is ready"
"DCL does not have to wait for execution of async scripts"
"The DCL event is also a critical milestone. Many popular libraries, such as JQuery, will begin executing their code once it fires."
Notes about DomInteractive
Fonts: Chrome and Firefox use a three second timeout when waiting for fonts; if the font doesn’t arrive within three seconds then a default font is used. IE11 displays the critical content immediately using a default font. In Chrome, Firefox and IE11, the content is re-rendered when the font file finishes downloading.
Optimizing the Critical Rendering Path