async vs defer script loading JavaScript

There are quite a lot of discussions on async and defer for loading script into DOM. Both have strong use cases.

When to use async?

When we want to load the script and execute it right away and do not want to wait for the DOM to be loaded, we should use async. It blocks HTML parsing when it executes.

When to use defer?

When we want to load the script and execute it when the DOM is loaded, we should use defer. It does not block HTML parsing when it executes.

Both async and defer?

When a script has both async and defer, then the browser (Chrome) ignores the defer attribute.

Following is the visual diagram for regular, async and defer: