Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
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
Próxima SlideShare
Cargando en…5
×

Asynchronous JavaScript loading

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

  • Sé el primero en comentar

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

×