Today I Learned - Rocky Kev

TIL javascript async vs defer

POSTED ON:

TAGS: javascript performance

The basic tl;dr: (All the sweet ascii graphics were taken from the original source)

Default:

<script src="/path/to/script.js"></script>

Steps:

  1. Parse the document.
  2. Pause document parser
  3. Download Script
  4. Execute Script
  5. Continue parsing

Results:

Visual:

┌───────────────────────┬───────────────────────────────────────┬───────────────────┐
/ Parse the document    / Pause parsing                         / Resume parsing    /
└───────────────────────┼───────────────────┬───────────────────┴───────────────────┘
                        / Download script   /
                        └───────────────────┼───────────────────┐
                                            / Execute script    /
                                            └───────────────────┘

Async:

<script src="/path/to/script.js" async></script>

Steps:

  1. Parse the script.
  2. Download Script during parsing.
  3. Pause Parsing and Execute Script.
  4. Continue parsing

Results:

┌───────────────────────────────────────────┬───────────────────┬───────────────────┐
/ Parse the document                        / Pause parsing     / Resume parsing    /
└───────────────────────┬───────────────────┼───────────────────┴───────────────────┘
                        / Download script   /
                        └───────────────────┼───────────────────┐
                                            / Execute script    /
                                            └───────────────────┘

Defer

<script src="/path/to/script.js" defer></script>

Steps:

  1. During parsing, download the script.
  2. Execute the script after the page is ready.

Result:

Visual:

┌───────────────────────────────────────────────────────────┐
/ Parse the document                                        /
└───────────────────────┬─────────────────┬─────────────────┘
                        / Download script /
                        └─────────────────┘                 ┌───────────────────┐
                                                            / Execute script    /
                                                            └───────────────────┘

Related TILs

Tagged: javascript

TIL what is npm Script

Despite their high usage they are not particularly well optimized and add about 400ms of overhead. In this article we were able to bring that down to ~22ms.

TIL fancy methods to transform Javascript Objects

You can use Object.entries(), Object.keys(), Object.fromEntries()...

TIL how to hide your JS code

ONE THING TO NOTE: Encrypting a script is stronger than obfuscation, both methods are still not adequate to protect secret content. Honestly, I don't think it's worth it on a production site, and instead just go with pure server-side if you want security. But it's fascinating.