JavaScript Performance (at SFJS)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

JavaScript Performance (at SFJS)

on

  • 16,309 views

A deep dive into async script loading.

A deep dive into async script loading.

Statistics

Views

Total Views
16,309
Views on SlideShare
15,684
Embed Views
625

Actions

Likes
53
Downloads
179
Comments
5

19 Embeds 625

http://blog.amt.in 254
http://gregbabula.com 160
http://moot.ly 47
http://posterous.com 44
http://a0.twimg.com 35
https://twitter.com 31
http://dixiefunk.tumblr.com 13
http://blog.fasoulas.com 11
http://us-w1.rockmelt.com 7
http://5starstrategies.com 7
http://safe.tumblr.com 4
http://www.twylah.com 3
http://paper.li 3
https://posterous.com 1
http://faavorite.com 1
http://www.techgig.com 1
http://feeds.feedburner.com 1
http://www.onlydoo.com 1
http://www.tumblr.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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!
    Are you sure you want to
    Your message goes here
    Processing…
  • 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!
    Are you sure you want to
    Your message goes here
    Processing…
  • Great info!

    ..1000x thanks ... need some time to digest
    Are you sure you want to
    Your message goes here
    Processing…
  • The #1 cause of slow web pages is...guess what...JavaScript. Great slides on JavaScript Performance by Steve Souders.
    Are you sure you want to
    Your message goes here
    Processing…
  • Fantastic stuff and great information!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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/

JavaScript Performance (at SFJS) Presentation 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