Recommended
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