Your SlideShare is downloading. ×
0
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)
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)
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)
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)
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)
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript Performance (at SFJS)

16,254

Published on

A deep dive into async script loading.

A deep dive into async script loading.

Published in: Technology
5 Comments
54 Likes
Statistics
Notes
  • 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
No Downloads
Views
Total Views
16,254
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
194
Comments
5
Likes
54
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Permission to use photo given by Amnemona: http://www.flickr.com/photos/marinacvinhal/379111290/
  • flickr.com/photos/bekahstargazing/318930460/
  • flickr.com/photos/pedromourapinheiro/3123885534/
  • http://www.flickr.com/photos/peterblapps/838125790/
  • http://www.flickr.com/photos/salty_soul/5799650534/
  • 3.777 seconds - http://www.webpagetest.org/result/120111_0P_2TW4Q/ - block “.js” (it’s not downloaded)5.471 seconds - http://www.webpagetest.org/result/120111_GR_2TW90/Alexa top 100wwide
  • median: 3.650vs 2.4873.777 seconds - http://www.webpagetest.org/result/120111_0P_2TW4Q/ - block “.js” (it’s not downloaded)5.471 seconds - http://www.webpagetest.org/result/120111_GR_2TW90/Alexa top 100wwide
  • flickr.com/photos/gevertulley/4771808965/Generallyasync & defer scripts start downloading immediately. I wish they’d wait, esp. defer scripts, so they don’t hog connections from the limited pool.subatomic particle traces
  • GMail Mobile: http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.htmlSproutCore: http://blog.sproutcore.com/post/225219087/faster-loading-through-eval
  • flickr.com/photos/bryanpearson/564703455/
  • flickr.com/photos/bryanpearson/564703455/
  • flickr.com/photos/nelsoncruz/431244400/
  • block other async scripts in Operaexecute ASAPsend beacon before leaving pageblock UI thread
  • block other async scripts in Operaexecute ASAPsend beacon before leaving pageblock UI thread
  • block other async scripts in Operaexecute ASAPsend beacon before leaving pageblock UI thread
  • block other async scripts in Operaexecute ASAPsend beacon before leaving pageblock UI thread
  • flickr.com/photos/dualphoto/2609096047/
  • flickr.com/photos/myklroventine/4062102754/
  • Transcript

    • 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

    ×