Hi @saralin10co! I had a look at this page, and the way it was is a little confusing; I updated it to hopefully make things better. Also read the section before " async and defer", to give more context as to how you’d use defer. You’ll probably use defer a lot more than async.
To give you some answers:
-
asyncanddefercan only be used on scripts loaded form external script files, e.g.<script src="myscript.js">. They can’t be used on scripts inside the page, e.g.<script> ...some script ... </script>. -
The way I understand it,
asyncanddeferboth instruct the browser to download the script(s) in a separate thread, while the rest of the page (the DOM, etc.) is downloading…so the page loading is not blocked by the scripts. The difference is that the async scripts will run as soon as they are available, in whatever order they download, whereas the defer scripts will not run until the page has finished loading, and will run in the order they appear on the page.
So the use case for async scripts is that you just want the scripts to load and run as soon as possible, but not block the page loading, and the scripts don’t depend on the content of the page (they might be data files for a game, for example - you want them to load in the background while the UI is also loading and the player is being given information, but they don’t rely on the DOM being available)
The use case for defer scripts is that you want the script to load efficiently, but you want it to not run until the DOM has loaded because it relies on the DOM content being there (and will error if it is not there yet when it runs).
Does that make sense? Do I need to rewrite that bit further to make it less confusing?