1. Efficiently downloading
and executing
Javascript
Pablo Moretti
MercadoLibre

2. Agenda
● Script tag
● Script injection (async)
● Script injection with callback
● Download and execution in order
Let's go …

3. Example Page
Javascript resources
● Jquery, Chico & 3 dummy
resources
✕ Blocked DOM
✕ Load time
✔ Parallel requests *
✔ Share resources

4. Script tag
First approach,
join all javascripts.
✕ Blocked DOM
✕ Parallel requests *
✕ Load time
✕ Share resources
✔ Less requests
* 90% of the browsers that navigate ML support 6 or more concurrent connections per domain.

5. Script tag
A better idea is to join
only the dummies js
and put the script in
the bottom.
✕ Blocked DOM
✔ Share resource
✔ Less requests
✔ Parallel requests
✔ Load time

6. Script injection (async)
This is the injection of
script from another script.
✕ Blocked onload
✕ Parallel requests
✕ Share resources
✔ No blocked DOM
✔ Load time
✔ Less requests

7. Script injection with callback
We could use a library and ✔ No blocked onload
trigger it in onload event. ✔ Share resources
✔ Less requests
✕ Parallel requests
✕ Load time

8. Download and execution in order
We could use a better library ✔ No blocked onload
✔ Parallel requests
and trigger it in onload event. ✔ Load time
✔ Less requests
✔ Share resources

9. Defer & queue javascript inline
Using a similar technique of GA track, we can defer the execution of
javascipt inline.
The array is processed when we
want. For example, when
we download the dependency.

10. Questions ?