async-vs-defer-vs-preload-vs-server-push

Normal Website LoadingWeb browsers load website contents synchronously by default. And synchronous loading means that web browsers can do only one thing at a time. This is why the loading (downloading and execution) of something blocks the loading of something else.

But there are a few methods we can use to load website files asynchronously. Asynchronous loading allows browsers to do multiple things at the same time. That is, the browser can download multiple files at the same time, and execute a file and download other files at the same time.

However, with asynchronous loading, browsers can still execute only one file at a time even though multiple files can be downloaded alongside the execution of the file. That is to say, asynchronous loading allows browsers to download multiple files as well as execute a single file all at the same time but not the simultaneous execution of multiple files. So, the execution of one file will still block the execution of other files even though the downloading itself of the asynchronous files will block neither the downloading nor the execution of other files.

There are four main ways to asynchronously load files on a website. Those ways are called, async, defer, preload, and server push. They are discussed below:

Async

async allows downloading of specified JS resources while the browser is doing something else and then execution of those resources immediately after the download is completed. The async keyword is used as an attribute inside the