Download as PDF, PPTX
![<script>
ga = doc.createElement('script')
ga.async = true
ga.src = 'ga.js'
s = doc.getElementsByTagName('script')[0]
s.parentNode.insertBefore(ga, s)
</script>](https://image.slidesharecdn.com/asyncjs-111126063605-phpapp02/85/Asynchronous-JavaScript-loading-21-320.jpg)
![<script>
ga = doc.createElement('script')
ga.async = true
ga.src = 'ga.js'
s = doc.getElementsByTagName('script')[0]
s.parentNode.insertBefore(ga, s)
</script>](https://image.slidesharecdn.com/asyncjs-111126063605-phpapp02/75/Asynchronous-JavaScript-loading-21-2048.jpg)
Asynchronous JavaScript loading
- 1. Async JS loading Kornel Lesiński <London JS 11.2011>
- 2. defer async DOM script loaders
- 3.
- 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
- 6.
- 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”
- 9.
- 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>
- 14.
- 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.
- 18.
- 19.
- 20.
- 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.
- 23.
- 24.
- 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