More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Asynchronous JavaScript loading
Similar to Asynchronous JavaScript loading (20)
Recently uploaded
Recently uploaded (20)
Asynchronous JavaScript loading
- 1. Async JS loading Kornel Lesiński <London JS 11.2011>
- 2. defer async DOM script loaders
- 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. document.write() onload DOMContentReady
- 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. “The exact processing details for these attributes are, for mostly historical reasons, somewhat non-trivial”
- 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. NOBODY EXPECTS ASYNC EXECUTION
- 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. <script async src=//example.com/spam-‐library.js> <script async src=/js/add-‐spam-‐button.js>
- 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. <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. DOM
- 21. <script> ga = doc.createElement('script') ga.async = true ga.src = 'ga.js' s = doc.getElementsByTagName('script')[0] s.parentNode.insertBefore(ga, s) </script>
- 22. Script loaders
- 23. <nosrsly>
- 25. <html class="no-‐js"> <head> <script> document.documentElement.className loading' =' </script> <style> .no-‐js .widget {overflow:scroll} .loading .widget {visibility:hidden} </style>
- 26. defer MERGE ? MINIFY async ? GZIP DOM ? ?
- 27. pornel.net /asyncjs @pornelski