![]() Here’s how a page loads a script with defer, put in the head tag: The script is fetched asynchronously, and when it’s ready the HTML parsing is paused to execute the script, then it’s resumed. ![]() The script is fetched asynchronously, and it’s executed only after the HTML parsing is done. Parsing finishes just like when we put the script at the end of the body tag, but overall the script execution finishes well before, because the script has been downloaded in parallel with the HTML parsing. So this is the winning solution in terms of speed □ Blocking parsingĪsync blocks the parsing of the page while defer does not. Neither async nor defer guarantee anything on blocking rendering. ![]() This is up to you and your script (for example, making sure your scripts run after the onLoad) event. Scripts marked defer are executed right after the domInteractive event, which happens after the HTML is loaded, parsed and the DOM is built.ĬSS and images at this point are still to be parsed and loaded. Once this is done, the browser will emit the domComplete event, and then onLoad.ĭomInteractive is important because its timing is recognized as a measure of perceived loading speed. Keeping things in orderĪnother case pro defer: scripts marked async are executed in casual order, when they become available.
0 Comments
Leave a Reply. |