Recommended
More Related Content
What's hot
What's hot (20)
Similar to JavaScript Performance (at SFJS)
Similar to JavaScript Performance (at SFJS) (20)
More from Steve Souders
More from Steve Souders (11)
Recently uploaded
Recently uploaded (20)
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!
- 8. all requests containing “.js” are skipped
- 10. 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
- 11. 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
- 12. 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
- 13. 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
- 14. 20??: markup
- 15. 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
- 16. 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
- 17. 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/
- 18. 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);
- 19. 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
- 20. localStorage
- 23. Home screen apps on iPhone are slower because resources are re-requested even though they should be read from cache.
- 24. 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
- 25. 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/
- 26. 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
- 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); avoid mixed content warning protocol relative URLs have problems set src last stevesouders.com/blog/2010/02/10/5a-missing-schema-double-download/
- 28. 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/
- 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 stevesouders.com/tests/jsorder.php
- 32. 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
- 33. <html> <head> A <link rel=stylesheet ...> <style>...</style> <script [...]></script> B </head> <body> <div> <p> <ul> C </body> </html> onload: D
- 34. A script loads sooner beacon fires sooner blocks other async (Opera) may block rendering
- 35. B script loads later beacon fires later blocks fewer async (Opera) may block rendering
- 36. script loads last beacon fires late doesn’t block async C doesn’t block rendering
- 37. script loads after page beacon fires very late doesn’t block async doesn’t block rendering onload fires sooner D
- 38. more
- 46. Top 100 Top 1000
- 48. takeaways WPO GA snippet is good WebPagetest.org Loadtimer.org Cuzillion.com MobilePerf.org Browserscope.org HTTPArchive.org ControlJS.org Velocity localStorage stevesouders.com
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 & 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/