asynchronous javascript loading
DESCRIPTION
HTML5, DOM tricks and pitfalls of non-blocking loading of JavaScript.TRANSCRIPT
![Page 1: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/1.jpg)
Async JS loading
Kornel Lesiński<London JS 11.2011>
![Page 2: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/2.jpg)
asyncdefer
DOM
script loaders
![Page 3: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/3.jpg)
MERGEMINIFY
GZIP
![Page 4: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/4.jpg)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 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>
![Page 5: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/5.jpg)
document.write()
onload
DOMContentReady
![Page 6: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/6.jpg)
<script defer>
![Page 7: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/7.jpg)
<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.
</body>
<script defer src=//example.com/spam-‐library.js><script defer src=/js/add-‐spam-‐button.js>
<script src=//example.com/spam-‐library.js><script src=/js/add-‐spam-‐button.js>
![Page 8: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/8.jpg)
“The exact processing details for these
attributes are, for mostly historical reasons,
somewhat non-trivial”
![Page 9: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/9.jpg)
<script async>
![Page 10: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/10.jpg)
<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>
![Page 11: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/11.jpg)
NOBODYEXPECTSASYNC
EXECUTION
NOBODYEXPECTSASYNC
EXECUTION
NOBODYEXPECTSASYNC
EXECUTION
NOBODYEXPECTSASYNC
EXECUTION
NOBODYEXPECTSASYNC
EXECUTION
NOBODYEXPECTSASYNC
EXECUTION
NOBODYEXPECTSASYNC
EXECUTION
NOBODYEXPECTSASYNC
EXECUTION
NOBODYEXPECTSASYNC
EXECUTION
![Page 12: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/12.jpg)
<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>
![Page 13: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/13.jpg)
<script async src=//example.com/spam-‐library.js><script async src=/js/add-‐spam-‐button.js>
![Page 14: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/14.jpg)
<script async src=library+add-‐spam-‐button.js>
![Page 15: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/15.jpg)
<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()">
![Page 16: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/16.jpg)
<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()">
![Page 17: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/17.jpg)
DOM
![Page 18: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/18.jpg)
doc.createElement('script')
![Page 19: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/19.jpg)
script.async = true
![Page 20: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/20.jpg)
script.src = "ga.js"
![Page 21: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/21.jpg)
<script>ga = doc.createElement('script') ga.async = truega.src = 'ga.js'
s = doc.getElementsByTagName('script')[0]s.parentNode.insertBefore(ga, s)</script>
![Page 22: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/22.jpg)
Script loaders
![Page 23: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/23.jpg)
<nosrsly>
![Page 24: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/24.jpg)
Progressive enhancement
![Page 25: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/25.jpg)
<html class="no-‐js"> <head> <script> document.documentElement.className = 'loading' </script> <style> .no-‐js .widget {overflow:scroll} .loading .widget {visibility:hidden} </style>
![Page 26: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/26.jpg)
MERGEMINIFY
GZIPasync
defer
DOM
??
??
![Page 27: Asynchronous JavaScript loading](https://reader034.vdocuments.us/reader034/viewer/2022051012/5403b8cb8d7f72294d8b48b7/html5/thumbnails/27.jpg)
pornel.net /asyncjs@pornelski