I did a post before on how browser rendering works previously though, but I feel it was not enough.
There are certainly gaps in my head I wanted to fill, and I came across this conference talk which I find really informative. Not the best presentation but it's decent.
Check your self right here:
There are several key points I'd like to make about this video if you prefer not to watch it.
When HTML parser reaches
<script>tag, it will halt parsing, fetch the script and execute it before continuing to parse.
<script>tag is found and parsing is halted, the browser will create a new thread in a new process with the browser to search for external images and CSS to fetch in parallel. It probably will also look for another
<script>tag to download, but I'm not sure about executing it.
On initial render, it needs all the Parse Tree to finished before it proceeds to making a DOM, and it needs all DOM nodes and CSSOM to be completed before being combined into a Render Tree, and so on.
For subsequent rendering, it will set at a regular interval when it will reflow and repaint. Every time we mutate the DOM, it will still be immediately alter the Render Tree, but then it will not immediately proceed to the next stage (layout). Altered nodes in Render Tree will be marked dirty, the batch will traverse the tree and find all dirty trees at a regular interval, so multiple dirty nodes can be reflow and repaint on a single flow.
Immediate reflow occur on several actions, such as doing a font size change, resizing the browser, and accessing several properties like
Some Performance Insights
- Do all reading in one go, writing in one go.