Asynchronous JavaScript loading

27
Async JS loading Kornel Lesiński <London JS 11.2011>

description

HTML5, DOM tricks and pitfalls of non-blocking loading of JavaScript.

Transcript of Asynchronous JavaScript loading

Page 1: Asynchronous JavaScript loading

Async JS loading

Kornel Lesiński<London JS 11.2011>

Page 2: Asynchronous JavaScript loading

asyncdefer

DOM

script loaders

Page 3: Asynchronous JavaScript loading

MERGEMINIFY

GZIP

Page 4: Asynchronous JavaScript loading

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

document.write()

onload

DOMContentReady

Page 6: Asynchronous JavaScript loading

<script  defer>

Page 7: Asynchronous JavaScript loading

<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

“The exact processing details for these

attributes are, for mostly historical reasons,

somewhat non-trivial”

Page 9: Asynchronous JavaScript loading

<script  async>

Page 10: Asynchronous JavaScript loading

<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

NOBODYEXPECTSASYNC

EXECUTION

NOBODYEXPECTSASYNC

EXECUTION

NOBODYEXPECTSASYNC

EXECUTION

NOBODYEXPECTSASYNC

EXECUTION

NOBODYEXPECTSASYNC

EXECUTION

NOBODYEXPECTSASYNC

EXECUTION

NOBODYEXPECTSASYNC

EXECUTION

NOBODYEXPECTSASYNC

EXECUTION

NOBODYEXPECTSASYNC

EXECUTION

Page 12: Asynchronous JavaScript loading

<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

<script  async  src=//example.com/spam-­‐library.js><script  async  src=/js/add-­‐spam-­‐button.js>

Page 14: Asynchronous JavaScript loading

<script  async  src=library+add-­‐spam-­‐button.js>

Page 15: Asynchronous JavaScript loading

<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

<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

DOM

Page 18: Asynchronous JavaScript loading

doc.createElement('script')

Page 19: Asynchronous JavaScript loading

script.async  =  true

Page 20: Asynchronous JavaScript loading

script.src  =  "ga.js"

Page 21: Asynchronous JavaScript loading

<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

Script loaders

Page 23: Asynchronous JavaScript loading

<nosrsly>

Page 24: Asynchronous JavaScript loading

Progressive enhancement

Page 25: Asynchronous JavaScript loading

<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

MERGEMINIFY

GZIPasync

defer

DOM

??

??

Page 27: Asynchronous JavaScript loading

pornel.net /asyncjs@pornelski