What's a Preload Scanner?
A preloader is like a parser that scans the HTML file while the main parser is processing the HTML code. Its role is to look for resources like stylesheets, scripts or images (that also need to be retrieved from a server) and request them. Hopefully, by the time the HTML is parsed, those resources are already downloaded and ready to be processed.
Every browser has a primary HTML parser that tokenizes raw markup and processes it into an object model. The parser will pause when it finds a blocking resource, such as a stylesheet loaded with a <link>
element, or <script>
without an async
or defer
attribute.
Why does browsers block parsing and rendering of the page?
Ans: The reason for this is that the browser can't know for sure if any given script will modify the DOM while the primary HTML parser is still doing its job.
A preload scanner's role is to examine raw markup in order to find resources to fetch before the primary HTML parser discover them.
CSS files block both rendering and parsing.