Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavaScriptPerformance                        stevesouders.com/docs/sfjs-20120112.pptx      Disclaimer: This content does n...
YSlow   Cuzillion SpriteMe Hammerhead
WebWPO       Performance          Optimizationdrives trafficimproves UXincreases revenuereduces costs
What’s the #1cause of slowweb pages?
JAVASCRIPT!
all requests containing “.js” are skipped
http://httparchive.org/trends.php?s=intersection
1995: scripts in HEAD  <head>  <script src=‘a.js’></script>  </head>blocks other downloads (IE 6-7, images  in IE, iframes...
2007: move scripts to bottom   ...   <script src=‘a.js’></script>   </body> doesn’t block other downloads downloaded seque...
2009: load scripts async  var se =   document.createElement(‘script’)   ;  se.src = ‘a.js’;  document.getElementsByTagName...
2010: async + on-demand exec   var se = new Image(); // Object   se.onload = registerScript;   se.src = ‘a.js’; separate d...
20??: markup
script async & deferparsing doesn’t wait for script:  • async – executed when available  • defer – executed when parsing f...
20??: markup  <script src=‘a.js’   [async|defer|noexecute]   [deferdownload]>doesn’t block downloadsdownloaded in parallel...
ControlJS  a JavaScript module for making scripts load fasterjust change HTMLinline & external scripts  <script type=‘text...
ControlJS  a JavaScript module for making scripts load fasterdownload without executing  <script type=‘text/cjs’          ...
GMail Mobile<script type=‘text/javascript’>/*var ...*/</script>get script DOM elements textremove commentseval() when invo...
localStorage
yuiblog.com/blog/2007/01/04/performance-research-part-2/
blaze.io/mobile/understanding-mobile-cache-sizes/
Home screen apps on iPhone are slowerbecause resources are re-requestedeven though they should be read fromcache.
localStoragewindow.localStorage:   setItem()   getItem()   removeItem()   clear()also sessionStorageall popular browsers, ...
localStorage as cache1st doc: write JS & CSS blocks to localStorage   mres.-0yDUQJ03U8Hjija: <script>(function(){...set co...
Google Analytics Async Snippetvar ga = document.createElement(‘script’);ga.type = ‘text/javascript’;ga.async = true;ga.src...
var ga = document.createElement(‘script’);ga.type = ‘text/javascript’;ga.async = true;ga.src = (‘https:’ ==  document.loca...
var ga = document.createElement(‘script’);ga.type = ‘text/javascript’;ga.async = true;ga.src = (‘https:’ ==  document.loca...
var ga = document.createElement(‘script’);ga.type = ‘text/javascript’;ga.async = true;ga.src = (‘https:’ ==  document.loca...
stevesouders.com/tests/jsorder.php
var ga = document.createElement(‘script’);ga.type = ‘text/javascript’;ga.async = true;ga.src = (‘https:’ ==  document.loca...
<html>  <head>            A     <link rel=stylesheet ...>     <style>...</style>     <script [...]></script>            B ...
A    script loads sooner    beacon fires sooner    blocks other async (Opera)    may block rendering
B    script loads later    beacon fires later    blocks fewer async (Opera)    may block rendering
script loads last    beacon fires late    doesn’t block asyncC   doesn’t block rendering
script loads after page    beacon fires very late    doesn’t block async    doesn’t block rendering    onload fires soonerD
more
stevesouders.com/blog/2011/12/01/silk-ipad-galaxy-comparison/
stevesouders.com/mobileperf/mobileperfbkm.php
Top 100Top 1000
takeawaysWPO                GA snippet is goodWebPagetest.org    Loadtimer.orgCuzillion.com      MobilePerf.orgBrowserscop...
@soudershttp://stevesouders.com/docs/sfjs-20120112.pptx
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
Upcoming SlideShare
Loading in …5
×

JavaScript Performance (at SFJS)

28,870 views

Published on

A deep dive into async script loading.

Published in: Technology
  • Good stuff, nice to know what the browsers are actually doing. We were just talking yesterday about how, although Chrome’s 4 years old now, there’s still no good ol’ ctrl-shift-R shortcut like Firefox has. Would make a great extension!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Good stuff, nice to know what the browsers are actually doing. We were just talking yesterday about how, although Chrome’s 4 years old now, there’s still no good ol’ ctrl-shift-R shortcut like Firefox has. Would make a great extension!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great info!

    ..1000x thanks ... need some time to digest
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • The #1 cause of slow web pages is...guess what...JavaScript. Great slides on JavaScript Performance by Steve Souders.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Fantastic stuff and great information!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

JavaScript Performance (at SFJS)

  1. JavaScriptPerformance stevesouders.com/docs/sfjs-20120112.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
  2. YSlow Cuzillion SpriteMe Hammerhead
  3. WebWPO Performance Optimizationdrives trafficimproves UXincreases revenuereduces costs
  4. What’s the #1cause of slowweb pages?
  5. JAVASCRIPT!
  6. all requests containing “.js” are skipped
  7. http://httparchive.org/trends.php?s=intersection
  8. 1995: scripts in HEAD <head> <script src=‘a.js’></script> </head>blocks other downloads (IE 6-7, images in IE, iframes)downloaded sequentially (IE 6-7)blocks rendering during download & parse-execute
  9. 2007: move scripts to bottom ... <script src=‘a.js’></script> </body> doesn’t block other downloads downloaded sequentially in IE 6-7 blocks rendering during download & parse-execute
  10. 2009: load scripts async var se = document.createElement(‘script’) ; se.src = ‘a.js’; document.getElementsByTagName(‘he ad’)[0].appendChild(se);doesn’t block other downloadsdownloaded in parallel (all browsers)blocks rendering during parse-execute
  11. 2010: async + on-demand exec var se = new Image(); // Object se.onload = registerScript; se.src = ‘a.js’; separate download from parse-execute doesn’t block other downloads downloaded in parallel (all browsers) doesn’t block rendering until demanded
  12. 20??: markup
  13. script async & deferparsing doesn’t wait for script: • async – executed when available • defer – executed when parsing finishedwhen is it downloaded?missing: • defer download AND execution • async/defer download, execute on demand
  14. 20??: markup <script src=‘a.js’ [async|defer|noexecute] [deferdownload]>doesn’t block downloadsdownloaded in paralleldoesn’t block rendering until demandeddoesn’t contend for a connectioneasier
  15. ControlJS a JavaScript module for making scripts load fasterjust change HTMLinline & external scripts <script type=‘text/cjs’ data-cjssrc=‘main.js’> </script> <script type=‘text/cjs’> var name = getName(); </script> http://controljs.org/
  16. ControlJS a JavaScript module for making scripts load fasterdownload without executing <script type=‘text/cjs’ data-cjssrc=‘main.js’ data-cjsexec=false> <script>Later if/when needed: CJS.execScript(src);
  17. GMail Mobile<script type=‘text/javascript’>/*var ...*/</script>get script DOM elements textremove commentseval() when invokedawesome for prefetching JS that might (not) be neededhttp://goo.gl/l5ZLQ
  18. localStorage
  19. yuiblog.com/blog/2007/01/04/performance-research-part-2/
  20. blaze.io/mobile/understanding-mobile-cache-sizes/
  21. Home screen apps on iPhone are slowerbecause resources are re-requestedeven though they should be read fromcache.
  22. localStoragewindow.localStorage: setItem() getItem() removeItem() clear()also sessionStorageall popular browsers, 5MB maxhttp://dev.w3.org/html5/webstorage/http://diveintohtml5.org/storage.html
  23. localStorage as cache1st doc: write JS & CSS blocks to localStorage mres.-0yDUQJ03U8Hjija: <script>(function(){...set cookie with entries & version MRES=-0yDUQJ03U8Hjija:-4EaJoFuDoX0iloI:...later docs: read JS & CSS from localStorage document.write( localStorage.getItem(mres.- 0yDUQJ03U8Hjija) );http://stevesouders.com/blog/2011/03/28/storager-case- study-bing-google/
  24. Google Analytics Async Snippetvar ga = document.createElement(‘script’);ga.type = ‘text/javascript’;ga.async = true;ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’)+‘.google-analytics.com/ga.js’;var s = document.getElementsByTagName(‘script’)[ 0];s.parentNode.insertBefore(ga, s);code.google.com/apis/analytics/docs/tracking/asyncTracking.html
  25. var ga = document.createElement(‘script’);ga.type = ‘text/javascript’;ga.async = true;ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’)+‘.google-analytics.com/ga.js’;var s = document.getElementsByTagName(‘script’)[ 0];s.parentNode.insertBefore(ga, s);avoid mixed content warningprotocol relative URLs have problemsset src laststevesouders.com/blog/2010/02/10/5a-missing-schema-double-download/
  26. var ga = document.createElement(‘script’);ga.type = ‘text/javascript’;ga.async = true;ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’)+‘.google-analytics.com/ga.js’;var s = document.getElementsByTagName(‘script’)[ 0];s.parentNode.insertBefore(ga, s);previously: getElementsByTagName(‘head’)[0]. appendChild(ga)HEAD might not existstevesouders.com/blog/2010/05/11/appendchild-vs-insertbefore/ Android 1.5, iPhone 3.0, Opera 8.50, Safari 3.2stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/
  27. var ga = document.createElement(‘script’);ga.type = ‘text/javascript’;ga.async = true;ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’)+‘.google-analytics.com/ga.js’;var s = document.getElementsByTagName(‘script’)[ 0];s.parentNode.insertBefore(ga, s);some browsers preserve execution order Firefox 3.6, Opera, OmniWebstevesouders.com/tests/jsorder.php
  28. stevesouders.com/tests/jsorder.php
  29. var ga = document.createElement(‘script’);ga.type = ‘text/javascript’;ga.async = true;ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’)+‘.google-analytics.com/ga.js’;var s = document.getElementsByTagName(‘script’)[ 0];s.parentNode.insertBefore(ga, s);some browsers preserve execution order Firefox 3.6, Opera, OmniWebasync=true fixes this (except Opera)stevesouders.com/tests/jsorder.php
  30. <html> <head> A <link rel=stylesheet ...> <style>...</style> <script [...]></script> B </head> <body> <div> <p> <ul> C </body></html>onload: D
  31. A script loads sooner beacon fires sooner blocks other async (Opera) may block rendering
  32. B script loads later beacon fires later blocks fewer async (Opera) may block rendering
  33. script loads last beacon fires late doesn’t block asyncC doesn’t block rendering
  34. script loads after page beacon fires very late doesn’t block async doesn’t block rendering onload fires soonerD
  35. more
  36. stevesouders.com/blog/2011/12/01/silk-ipad-galaxy-comparison/
  37. stevesouders.com/mobileperf/mobileperfbkm.php
  38. Top 100Top 1000
  39. takeawaysWPO GA snippet is goodWebPagetest.org Loadtimer.orgCuzillion.com MobilePerf.orgBrowserscope.org HTTPArchive.orgControlJS.org VelocitylocalStorage stevesouders.com
  40. @soudershttp://stevesouders.com/docs/sfjs-20120112.pptx

×