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

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,684
On Slideshare
3,213
From Embeds
471
Number of Embeds
21

Actions

Shares
Downloads
26
Comments
0
Likes
6

Embeds 471

http://www.scoop.it 315
http://elena-oana.blogspot.com 52
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

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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