SXSW 2012 JavaScript MythBusters

5,895 views
4,987 views

Published on

Published in: Technology, Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,895
On SlideShare
0
From Embeds
0
Number of Embeds
559
Actions
Shares
0
Downloads
29
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

SXSW 2012 JavaScript MythBusters

  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

×