Search code examples
javascripthtmlasynchronousw3cdeferred

Trying to understand the W3C specifications about defer and async?


See: https://www.w3.org/TR/html5/scripting-1.html#attr-script-async

That link will give you the W3C specifications about "defer" and "async". They are saying about it:

If neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.

If you have for example "script.js", then you can do the following things with it:

  • Downloading the file
  • Taking the file from cache
  • "Reading" it, because before actually execution of the code, all the code in the file has to be read (otherwise hoisting could not exist)
  • Executing the code

My English is not that well, so i am thinking about the word "is fetched" now.

If neither attribute is present, then the script is fetched and executed immediately

I see "is fetched" as:

  • The browser can take script.js from cache
  • The browser can download script.js

Is that right? So they are using "fetched", because if you would say "downloaded" then is does not include caching?

I want to discuss the non caching case, so in a case like that:

If neither attribute is present, then the script is downloaded and executed immediately

Can i say that? And if yes, then i have one last question about it.

Modern browsers have pre-load scanners, scanning for javascript files to download in advance. So i thought: Maybe a pre-load scanner will already finish downloading the js file, before the "HTML parser" will arrive at the script tag. So the "HTML parser" can be busy with some other html preceding the script tag, while the browser is already finishing the download.

Is that true until now? I am not sure by myself. But if that's true, then i don't understand the W3C specs, because they are saying (if everything before is true):

If neither attribute is present, then the script is downloaded and executed immediately

So "executed immediately" after the download? If you are in a synchronous environment, then all the html before that script tag must be in the DOM before executing the JavaScript.

So if all of this is true, then i don't understand why they can say: "executed immediately"? Or is a pre-load scanner something unofficial, so W3C is ignoring that in their documentation. So then in this case the W3C specification is actually only correct for older browsers? Or can can a browser fetch the script from a pre-load scanner and that will happen on the moment that the "HTML parser" is at the script tag, maybe i have to see it like that?

Or how i have to see this?


Solution

  • There's an entire standard that describes precisely what "fetching" means. Fetch Standard.

    As well as caching and download, the behaviour of service workers must be factored in. In essence, by "executed immediately", it means if the async and defer attributes are missing, then the script must be executed on the DOM as it exists when the </script> end tag is encountered by the parser. The parser is paused while the script is run, and only resumes once the script has completed running.

    A preload scanner can cause a script to be downloaded, but not run. It means the script will be available in the cache (or on its way) if and when the parser actually processes the script element and runs its script.