Efficiently downloading     and executing       Javascript       Pablo Moretti       MercadoLibre
Agenda● Script tag● Script injection (async)● Script injection with callback● Download and execution in order             ...
Example Page      Javascript resources        ● Jquery, Chico & 3 dummy          resources        ✕ Blocked DOM        ✕ L...
Script tagFirst approach,join all javascripts.   ✕ Blocked DOM   ✕ Parallel requests *   ✕ Load time   ✕ Share resources  ...
Script tagA better idea is to joinonly the dummies jsand put the script inthe bottom.   ✕ Blocked DOM   ✔ Share resource  ...
Script injection (async)This is the injection ofscript from another script. ✕ Blocked onload ✕ Parallel requests ✕ Share r...
Script injection with callbackWe could use a library and    ✔ No blocked onloadtrigger it in onload event.   ✔ Share resou...
Download and execution in orderWe could use a better library     ✔ No blocked onload                                  ✔ Pa...
Defer & queue javascript inline  Using a similar technique of GA track, we can defer the execution of  javascipt inline.Th...
Questions ?
Upcoming SlideShare
Loading in …5
×

Efficiently downloading and executing Javascript

912 views

Published on

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
912
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Efficiently downloading and executing Javascript

  1. 1. Efficiently downloading and executing Javascript Pablo Moretti MercadoLibre
  2. 2. Agenda● Script tag● Script injection (async)● Script injection with callback● Download and execution in order Lets go …
  3. 3. Example Page Javascript resources ● Jquery, Chico & 3 dummy resources ✕ Blocked DOM ✕ Load time ✔ Parallel requests * ✔ Share resources
  4. 4. Script tagFirst 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. 5. Script tagA better idea is to joinonly the dummies jsand put the script inthe bottom. ✕ Blocked DOM ✔ Share resource ✔ Less requests ✔ Parallel requests ✔ Load time
  6. 6. Script injection (async)This is the injection ofscript from another script. ✕ Blocked onload ✕ Parallel requests ✕ Share resources ✔ No blocked DOM ✔ Load time ✔ Less requests
  7. 7. Script injection with callbackWe could use a library and ✔ No blocked onloadtrigger it in onload event. ✔ Share resources ✔ Less requests ✕ Parallel requests ✕ Load time
  8. 8. Download and execution in orderWe could use a better library ✔ No blocked onload ✔ Parallel requestsand trigger it in onload event. ✔ Load time ✔ Less requests ✔ Share resources
  9. 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 wewant. For example, whenwe download the dependency.
  10. 10. Questions ?

×