Pablo MorettiMercadoLibre

JavascriptLoading & Executing

Agenda● Script tag ● Script injection (async)● Script injection with callback● Download and execution in order

Let's go …

Example Page

Javascript resources

● Jquery ● Chico● 3 dummy resources

Script tag First approach, join all javascripts.

✕ Blocked DOM✕ Parallel requests *✕ Load time✕ Share resource✔ Less requests

* 90% of the browsers that navigate ML support 6 or more concurrent connections per domain.

Script Tag A better idea is to join only the dummies jsand put the script in the bottom.

✕ Blocked DOM✔ Share resource✔ Less requests✔ Parallel requests✔ Load time

Script injection (async)This is the injection of script from another script.

✕ Blocked onload✕ Parallel requests✕ Share resource✔ No blocked DOM✔ Load time✔ Less requests

Script injection with callbackWe could use a library and trigger it in onload event.

✔ No blocked onload✔ Share resource✕ Parallel request ✕ Load time✕ Less request

Download and execution in orderWe could use a better library and trigger it in onload event.

✔ No blocked onload✔ Parallel request ✔ Load time✔ Less request✔ Share resource

Defer & queue javascript inline

The array is processed when we want. For example, when we download the dependency.

Using a similar technique of GA track, we can defer the execution of javascipt inline.

Questions ?