Successfully reported this slideshow.
Your SlideShare is downloading. ×

JavaScript Performance (at SFJS)

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

JavaScript Performance (at SFJS)

  1. JavaScript Performance stevesouders.com/docs/sfjs-20120112.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
  2. YSlow Cuzillion SpriteMe Hammerhead
  3. Web WPO Performance Optimization drives traffic improves UX increases revenue reduces costs
  4. What’s the #1 cause of slow web 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 downloads downloaded 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 & defer parsing doesn’t wait for script: • async – executed when available • defer – executed when parsing finished when 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 downloads downloaded in parallel doesn’t block rendering until demanded doesn’t contend for a connection easier
  15. ControlJS a JavaScript module for making scripts load faster just change HTML inline & 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 faster download 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 element's text remove comments eval() when invoked awesome for prefetching JS that might (not) be needed http://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 slower because resources are re-requested even though they should be read from cache.
  22. localStorage window.localStorage: setItem() getItem() removeItem() clear() also sessionStorage all popular browsers, 5MB max http://dev.w3.org/html5/webstorage/ http://diveintohtml5.org/storage.html
  23. localStorage as cache 1st 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 Snippet 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); 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 warning protocol relative URLs have problems set src last stevesouders.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 exist stevesouders.com/blog/2010/05/11/appendchild-vs-insertbefore/ Android 1.5, iPhone 3.0, Opera 8.50, Safari 3.2 stevesouders.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, OmniWeb stevesouders.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, OmniWeb async=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 async C doesn’t block rendering
  34. script loads after page beacon fires very late doesn’t block async doesn’t block rendering onload fires sooner D
  35. more
  36. stevesouders.com/blog/2011/12/01/silk-ipad-galaxy-comparison/
  37. stevesouders.com/mobileperf/mobileperfbkm.php
  38. Top 100 Top 1000
  39. takeaways WPO GA snippet is good WebPagetest.org Loadtimer.org Cuzillion.com MobilePerf.org Browserscope.org HTTPArchive.org ControlJS.org Velocity localStorage stevesouders.com
  40. @souders http://stevesouders.com/docs/sfjs-20120112.pptx

Editor's Notes

  • 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 &amp; 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/

×