Async JS loading   Kornel Lesiński          <London JS 11.2011>
defer        async                DOM            script loaders
MERGEMINIFY GZIP
voluptate  velit  esse  cillum  dolore  eu  fugiat  nulla  pariatur.  Excepteur  sint  occaecat  cupidatat  non  proident,...
document.write()    onloadDOMContentReady
<script  defer>
<script  defer  src=//example.com/spam-­‐library.js><script  defer  src=/js/add-­‐spam-­‐button.js>Lorem  ipsum  dolor  si...
“The exact processing     details for theseattributes are, for mostly    historical reasons, somewhat non-trivial”
<script  async>
<script  async  src=//example.com/spam-­‐library.js>Lorem  ipsum  dolor  sit  amet,  consectetur  adipisicing  elit,  sed ...
NOBODY EXPECTS  ASYNCEXECUTION
<script  async  src=//example.com/spam-­‐library.js><script  async  src=//example.com/spam-­‐library.js>Lorem  ipsum  dolo...
<script  async  src=//example.com/spam-­‐library.js><script  async  src=/js/add-­‐spam-­‐button.js>
<script  async  src=library+add-­‐spam-­‐button.js>
<script  async  src=//example.com/spam-­‐library.js      onload="one=true;  if  (one  &&  two)  do_spam()">               ...
<script  async  src=//example.com/spam-­‐library.js      onload="one=true;  if  (one  &&  two)  do_spam()">               ...
DOM
doc.createElement(script)
script.async  =  true
script.src  =  "ga.js"
<script>ga  =  doc.createElement(script)  ga.async  =  truega.src  =  ga.jss  =  doc.getElementsByTagName(script)[0]s.pare...
Script loaders
<nosrsly>
Progressive enhancement
<html  class="no-­‐js">  <head>  <script>    document.documentElement.className      loading                              ...
deferMERGE                     ?MINIFY   async   ? GZIP    DOM     ?                     ?
pornel.net /asyncjs   @pornelski
Upcoming SlideShare
Loading in …5
×

Asynchronous JavaScript loading

3,195 views

Published on

HTML5, DOM tricks and pitfalls of non-blocking loading of JavaScript.

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

No Downloads
Views
Total views
3,195
On SlideShare
0
From Embeds
0
Number of Embeds
391
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Asynchronous JavaScript loading

  1. 1. Async JS loading Kornel Lesiński <London JS 11.2011>
  2. 2. defer async DOM script loaders
  3. 3. MERGEMINIFY GZIP
  4. 4. voluptate  velit  esse  cillum  dolore  eu  fugiat  nulla  pariatur.  Excepteur  sint  occaecat  cupidatat  non  proident,  sunt  in  culpa  qui  officia  deserunt  mollit  anim  id  est  laborum.                </data>            </section>        </article>        <script  src=all-­‐minified.js></script>    </body></html>
  5. 5. document.write() onloadDOMContentReady
  6. 6. <script  defer>
  7. 7. <script  defer  src=//example.com/spam-­‐library.js><script  defer  src=/js/add-­‐spam-­‐button.js>Lorem  ipsum  dolor  sit  amet,  consectetur  adipisicing  elit,  sed  do  eiusmod  tempor  incididunt  ut  labore  et  dolore  magna  aliqua.<script  src=//example.com/spam-­‐library.js><script  src=/js/add-­‐spam-­‐button.js></body>
  8. 8. “The exact processing details for theseattributes are, for mostly historical reasons, somewhat non-trivial”
  9. 9. <script  async>
  10. 10. <script  async  src=//example.com/spam-­‐library.js>Lorem  ipsum  dolor  sit  amet,  consectetur  adipisicing  elit,  sed  do  eiusmod  tempor  incididunt  ut  labore  et  dolore  magna  aliqua.</body>
  11. 11. NOBODY EXPECTS ASYNCEXECUTION
  12. 12. <script  async  src=//example.com/spam-­‐library.js><script  async  src=//example.com/spam-­‐library.js>Lorem  ipsum  dolor  sit  amet,  consectetur  adipisicing  elit,  sed  <script  async  src=//example.com/spam-­‐library.js>  do  eiusmod  tempor  incididunt  ut  labore  et  dolore  magna  aliqua.<script  async  src=//example.com/spam-­‐library.js>  </body><script  async  src=//example.com/spam-­‐library.js>
  13. 13. <script  async  src=//example.com/spam-­‐library.js><script  async  src=/js/add-­‐spam-­‐button.js>
  14. 14. <script  async  src=library+add-­‐spam-­‐button.js>
  15. 15. <script  async  src=//example.com/spam-­‐library.js   onload="one=true;  if  (one  &&  two)  do_spam()">        <script  async  src=/js/add-­‐spam-­‐button.js onload="two=true;  if  (one  &&  two)  do_spam()">
  16. 16. <script  async  src=//example.com/spam-­‐library.js   onload="one=true;  if  (one  &&  two)  do_spam()">        <script  async  src=/js/add-­‐spam-­‐button.js onload="two=true;  if  (one  &&  two)  do_spam()">
  17. 17. DOM
  18. 18. doc.createElement(script)
  19. 19. script.async  =  true
  20. 20. script.src  =  "ga.js"
  21. 21. <script>ga  =  doc.createElement(script)  ga.async  =  truega.src  =  ga.jss  =  doc.getElementsByTagName(script)[0]s.parentNode.insertBefore(ga,  s)</script>
  22. 22. Script loaders
  23. 23. <nosrsly>
  24. 24. Progressive enhancement
  25. 25. <html  class="no-­‐js">  <head>  <script>    document.documentElement.className     loading =  </script>  <style>  .no-­‐js  .widget  {overflow:scroll}  .loading  .widget  {visibility:hidden}  </style>
  26. 26. deferMERGE ?MINIFY async ? GZIP DOM ? ?
  27. 27. pornel.net /asyncjs @pornelski

×