Upload
yay-w00t
View
3.313
Download
2
Embed Size (px)
DESCRIPTION
HTML5, DOM tricks and pitfalls of non-blocking loading of JavaScript.
Citation preview
Async JS loading
Kornel Lesiński<London JS 11.2011>
asyncdefer
DOM
script loaders
MERGEMINIFY
GZIP
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>
document.write()
onload
DOMContentReady
<script defer>
<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>
“The exact processing details for these
attributes 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 do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</body>
NOBODYEXPECTSASYNC
EXECUTION
NOBODYEXPECTSASYNC
EXECUTION
NOBODYEXPECTSASYNC
EXECUTION
NOBODYEXPECTSASYNC
EXECUTION
NOBODYEXPECTSASYNC
EXECUTION
NOBODYEXPECTSASYNC
EXECUTION
NOBODYEXPECTSASYNC
EXECUTION
NOBODYEXPECTSASYNC
EXECUTION
NOBODYEXPECTSASYNC
EXECUTION
<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>
<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=/js/add-‐spam-‐button.js
onload="two=true; if (one && two) do_spam()">
<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()">
DOM
doc.createElement('script')
script.async = true
script.src = "ga.js"
<script>ga = doc.createElement('script') ga.async = truega.src = 'ga.js'
s = doc.getElementsByTagName('script')[0]s.parentNode.insertBefore(ga, s)</script>
Script loaders
<nosrsly>
Progressive enhancement
<html class="no-‐js"> <head> <script> document.documentElement.className = 'loading' </script> <style> .no-‐js .widget {overflow:scroll} .loading .widget {visibility:hidden} </style>
MERGEMINIFY
GZIPasync
defer
DOM
??
??
pornel.net /asyncjs@pornelski