SXSW 2012 JavaScript MythBusters
Upcoming SlideShare
Loading in...5
×
 

SXSW 2012 JavaScript MythBusters

on

  • 3,623 views

 

Statistics

Views

Total Views
3,623
Views on SlideShare
3,154
Embed Views
469

Actions

Likes
6
Downloads
26
Comments
0

21 Embeds 469

http://www.scoop.it 314
http://elena-oana.blogspot.com 51
http://elena-oana.blogspot.ro 23
http://elena-oana.blogspot.com.br 17
http://elena-oana.blogspot.fr 16
http://elena-oana.blogspot.gr 12
http://elena-oana.blogspot.ca 6
http://elena-oana.blogspot.de 5
http://elena-oana.blogspot.co.at 5
http://elena-oana.blogspot.in 4
http://elena-oana.blogspot.mx 3
http://elena-oana.blogspot.co.uk 2
http://elena-oana.blogspot.no 2
http://elena-oana.blogspot.it 2
http://elena-oana.blogspot.com.au 1
http://elena-oana.blogspot.ae 1
http://webcache.googleusercontent.com 1
http://sco.lt 1
http://elena-oana.blogspot.nl 1
http://elena-oana.blogspot.be 1
http://elena-oana.blogspot.com.es 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

SXSW 2012 JavaScript MythBusters Presentation Transcript

  • 1. JavaScript Performance MythBusters™ (via jsPerf)SXSW 2012
  • 2. about:meLindsey Simonelsigh@gmail.com / @elsigh• AdWords• App Engine• i18n• Closure library• Search• Google Translate• Google+
  • 3. about:meKyle Simpsongetify@gmail.com / @getify / http://getify.me • LABjs • HTML5 Cookbook • HubAustin Coworking • ATX Web Performance Meetup • Web Performance Summit (online!) • "Always bet on JS & HTML5"
  • 4. about:meJohn-David Daltonjohn.david.dalton@gmail.com / @jdalton • Benchmark.js • jsPerf.com • FuseJS • All-around JS Fanboy
  • 5. about:meChris Joelchris@cloudflare.com / @robodynamo • Rocket Loader • CloudFlareJS
  • 6. Your Development Test Environment
  • 7. Your Mobile Test Environment
  • 8. en.wikipedia.org/wiki/Usage_share_of_web_browsers
  • 9. Browserscope & jsPerfOpen-source, community-driven project for profiling browsers.Explicit Goals:• foster innovation by tracking functionality• push browser innovation, uncover regressions• historical resource for web developers
  • 10. crowdsourcing the results
  • 11. crowdsourcing• no dedicated test resources
  • 12. crowdsourcing• no dedicated test resources• project runs in perpetuity
  • 13. crowdsourcing• no dedicated test resources• project runs in perpetuity• real world test conditions
  • 14. crowdsourcing• no dedicated test resources• project runs in perpetuity• real world test conditions• aggregating results reduces bias
  • 15. crowdsourcing• no dedicated test resources• project runs in perpetuity• real world test conditions• aggregating results reduces bias• new browsers show up immediately
  • 16. Myth:Your for loops suck: Rewrite allyour code and usewhile --i. Status: Plausible/Busted (Mobile)PS - String#concat vs. Array#join
  • 17. jsperf.com/for-loop-researchjsperf.com/for-loop-caching
  • 18. Myth:"Double your localStorageread performance in Chromeusing indexes ls.getItem[i] notkeys ls.getItem(key)"See: twitter.com/johnallsopp/status/177964915632513024 Status: Confirmed
  • 19. jsperf.com/localstorage-science jsbin.com/ifucuc/9
  • 20. Myth:The arguments object shouldbe avoided because accessingit is slow. Status: Busted
  • 21. jspatterns.com/arguments-considered-harmful/ jsperf.com/arguments-perf
  • 22. Myth:Frameworks/libraries, likejQuery, are always better atmanaging performance thanyou are, so just use what theyprovide. Status: Busted
  • 23. http://4vk.geti.fi/jsperf/jquery-this
  • 24. Myth:Converting a NodeList to anarray is expensive, so youshouldnt do it. Status: Busted
  • 25. jsperf.com/lists-of-nodes
  • 26. Myth: Script concatenation and/or<script defer> is all you need to load JS performantly. (aka "Issue 28") github.com/h5bp/html5-boilerplate/issues/28 Status: (Mostly) Busted
  • 27. •<script defer>horribly buggy across browsers(esp IE<=9!)github.com/paulirish/lazyweb-requests/issues/42still would delay the DOM-readyevent (bad!)...and btw, this is also buggycross-browser!
  • 28. <script> or <script defer> dynamic script loading
  • 29. •<script "one-big-file.js">at some point, "big" is big enoughto overcome HTTP connectionoverhead, meaning a secondparallel request for half the file willbe faster.NOTE: do concat your filesfirst, then (if size >=100k) chunkinto 2-3 ~equal-sized parts.
  • 30. •<script "one-big-file.js">chunking a big file into 2-3 parts,based on volatility of code (howoften it changes) allows fordifferent caching headers for eachpart (win!).NOTE: jquery.js is far more stablethan your sites code.
  • 31. •<script "one-big-file.js">chunking your concatd code fileallows you to load the chunksseparately, like one before load,the next 100ms after DOM-ready,etc.NOTE: lazy-loading is anestablished best-practice!
  • 32. * <script defer> only works in IE10+ Experimenting with JS loading techniques on a real site (incl. jquery, jquery-ui, site code)
  • 33. Myth:"eval is evil", or in other words,eval is too slow and quirky tobe considered useful. Status: Plausible
  • 34. jsperf.com/practical-eval/2jsperf.com/more-practical-eval/3 jsperf.com/eval-kills
  • 35. Myth:Regular expressions are slowand should be replaced withsimple string method calls, likeindexOf, when possible. Status: Busted
  • 36. es5.github.com/#x7.8.5jsperf.com/regexp-indexof-perf
  • 37. Myth:OO API abstraction means younever have to worry about thedetails (including theperformance). Status: Busted
  • 38. http://nam.geti.fi/jsperf/ooapi
  • 39. Myth:Caching "nested propertylookup" or "prototype chainlookup" helps (or hurts)performance. Status: Busted
  • 40. http://pc6.geti.fi/jsperf/prototype-chainhttp://q3y.geti.fi/jsperf/nested-properties
  • 41. Myth:Operations which require animplicit primitive-to-objectcast/conversion will be slower. Status: Busted
  • 42. http://udw.geti.fi/jsperf/object-casting
  • 43. Myth:Scope chain lookups areexpensive. Status: Busted
  • 44. jsperf.com/scope-chain-perf
  • 45. Myth:Use void 0 instead ofundefined and === instead of== when concerned aboutperformance. Status: Busted
  • 46. es5.github.com/#x11.9.3 es5.github.com/#x11.9.6 jsperf.com/undefined-void0-perfjsperf.com/double-vs-triple-equals
  • 47. Myth:Use switch statements insteadof if / else if for betterperformance. Status: Plausible/Busted (WebKit Mobile)
  • 48. jsperf.com/switch-if-else
  • 49. Myth:Use native methods for betterperformance. Status: Busted
  • 50. es5.github.com/#x15.4.4.18 jsperf.com/accessor-perf jsperf.com/bind-vs-customjsperf.com/for-vs-array-foreach