JavaScript Perfomance
Upcoming SlideShare
Loading in...5
×
 

JavaScript Perfomance

on

  • 17,614 views

JavaScript Perfomance

JavaScript Perfomance

Statistics

Views

Total Views
17,614
Views on SlideShare
1,645
Embed Views
15,969

Actions

Likes
3
Downloads
27
Comments
0

23 Embeds 15,969

http://habrahabr.ru 15793
http://m.habrahabr.ru 131
http://gliffer.ru 9
http://webcache.googleusercontent.com 5
http://10.0.0.180 4
http://readbox.info 3
http://prairie.external.vkontakte.antiblock.ru_dog.habrahabr.ru 3
http://www.regns.ru 3
http://t-rey.gaeproxyhttp.appspot.com 2
http://nuevospowerpoints.blogspot.com 2
http://telekomza.ru 2
http://wilelf.gaeproxyhttp.appspot.com 1
http://key.nwiki.net 1
http://kakimovacxat.kz.habrahabr.ru 1
http://lilian.gaeproxyhttp.appspot.com 1
http://3lp.cx 1
http://elite.gaeproxyhttp.appspot.com 1
http://flora.ru.habrahabr.ru 1
http://anna.kun081995.habrahabr.ru 1
http://center 1
http://takeoverapp.com 1
http://tenroxwiki 1
http://sysmagazine.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…
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 Perfomance JavaScript Perfomance Presentation Transcript

  • JavaScriptPerformance stevesouders.com/docs/sfjs-20120112.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
  • 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)downloaded sequentially (IE 6-7)blocks rendering during download & parse-execute
  • 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
  • 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
  • 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
  • 20??: markup
  • 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
  • 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
  • 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/
  • 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);
  • 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
  • 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, 5MB maxhttp://dev.w3.org/html5/webstorage/http://diveintohtml5.org/storage.html
  • 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/
  • 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
  • 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/
  • 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/
  • 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
  • stevesouders.com/tests/jsorder.php
  • 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
  • <html> <head> A <link rel=stylesheet ...> <style>...</style> <script [...]></script> B </head> <body> <div> <p> <ul> C </body></html>onload: D
  • 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.orgBrowserscope.org HTTPArchive.orgControlJS.org VelocitylocalStorage stevesouders.com
  • @soudershttp://stevesouders.com/docs/sfjs-20120112.pptx