Downloaded 29 times
![Myth:
"Double your localStorage
read performance in Chrome
using indexes ls.getItem[i] not
keys ls.getItem('key')"
See: twitter.com/johnallsopp/status/177964915632513024
Status: Confirmed](https://image.slidesharecdn.com/sxsw2012javascriptmythbusters-120409173533-phpapp02/75/SXSW-2012-JavaScript-MythBusters-19-2048.jpg)
Uploaded byElena-Oana Tabaranu
SXSW 2012 JavaScript MythBusters
This document summarizes a presentation on JavaScript performance myths. It debunks several common myths, including that for loops are always slower than while loops, avoiding the arguments object improves performance, and concatenating and deferring scripts is enough for good performance. It provides evidence from sites like jsPerf to show that many presumed optimizations do not actually improve performance or sometimes make it worse.
More Related Content
Similar to SXSW 2012 JavaScript MythBusters
SXSW 2012 JavaScript MythBusters
- 1. JavaScript Performance MythBusters™ (via jsPerf) SXSW 2012
- 2. about:me Lindsey Simon elsigh@gmail.com /@elsigh • AdWords • App Engine • i18n • Closure library • Search • Google Translate • Google+
- 3. about:me Kyle Simpson getify@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:me John-David Dalton john.david.dalton@gmail.com /@jdalton • Benchmark.js • jsPerf.com • FuseJS • All-around JS Fanboy
- 5. about:me Chris Joel chris@cloudflare.com /@robodynamo • Rocket Loader • CloudFlareJS
- 7. Your Development TestEnvironment
- 8. Your Mobile TestEnvironment
- 9.
- 10. Browserscope & jsPerf Open-source,community-driven project for profiling browsers. Explicit Goals: • foster innovation by tracking functionality • push browser innovation, uncover regressions • historical resource for web developers
- 11.
- 12. crowdsourcing • no dedicatedtest resources
- 13. crowdsourcing • no dedicatedtest resources • project runs in perpetuity
- 14. crowdsourcing • no dedicatedtest resources • project runs in perpetuity • real world test conditions
- 15. crowdsourcing • no dedicated test resources • project runs in perpetuity • real world test conditions • aggregating results reduces bias
- 16. crowdsourcing • no dedicated test resources • project runs in perpetuity • real world test conditions • aggregating results reduces bias • new browsers show up immediately
- 17. Myth: Your for loopssuck: Rewrite all your code and use while --i. Status: Plausible/Busted (Mobile) PS - String#concat vs. Array#join
- 18.
- 19. Myth: "Double your localStorage readperformance in Chrome using indexes ls.getItem[i] not keys ls.getItem('key')" See: twitter.com/johnallsopp/status/177964915632513024 Status: Confirmed
- 20. jsperf.com/localstorage-science jsbin.com/ifucuc/9
- 21. Myth: The arguments objectshould be avoided because accessing it is slow. Status: Busted
- 22. jspatterns.com/arguments-considered-harmful/ jsperf.com/arguments-perf
- 23. Myth: Frameworks/libraries, like jQuery, arealways better at managing performance than you are, so just use what they provide. Status: Busted
- 24.
- 25. Myth: Converting a NodeListto an array is expensive, so you shouldn't do it. Status: Busted
- 26.
- 27. Myth: Script concatenationand/or <script defer> is all you need to load JS performantly. (aka "Issue 28") github.com/h5bp/html5-boilerplate/issues/28 Status: (Mostly) Busted
- 28. •<script defer> horribly buggyacross browsers (esp IE<=9!) github.com/paulirish/lazyweb-requests/issues/42 still would delay the DOM-ready event (bad!)...and btw, this is also buggy cross-browser!
- 29. <script> or <scriptdefer> dynamic script loading
- 30. •<script "one-big-file.js"> at somepoint, "big" is big enough to overcome HTTP connection overhead, meaning a second parallel request for half the file will be faster. NOTE: do concat your files first, then (if size >=100k) chunk into 2-3 ~equal-sized parts.
- 31. •<script "one-big-file.js"> chunking abig file into 2-3 parts, based on volatility of code (how often it changes) allows for different caching headers for each part (win!). NOTE: jquery.js is far more stable than your site's code.
- 32. •<script "one-big-file.js"> chunking yourconcat'd code file allows you to load the chunks separately, like one before load, the next 100ms after DOM-ready, etc. NOTE: lazy-loading is an established best-practice!
- 33. * <script defer>only works in IE10+ Experimenting with JS loading techniques on a real site (incl. jquery, jquery-ui, site code)
- 34. Myth: "eval is evil",or in other words, eval is too slow and quirky to be considered useful. Status: Plausible
- 35. jsperf.com/practical-eval/2 jsperf.com/more-practical-eval/3 jsperf.com/eval-kills
- 36. Myth: Regular expressions areslow and should be replaced with simple string method calls, like indexOf, when possible. Status: Busted
- 37.
- 38. Myth: OO API abstractionmeans you never have to worry about the details (including the performance). Status: Busted
- 39.
- 40. Myth: Caching "nested property lookup"or "prototype chain lookup" helps (or hurts) performance. Status: Busted
- 41.
- 42. Myth: Operations which requirean implicit primitive-to-object cast/conversion will be slower. Status: Busted
- 43.
- 44. Myth: Scope chain lookupsare expensive. Status: Busted
- 45.
- 46. Myth: Use void 0instead of undefined and === instead of == when concerned about performance. Status: Busted
- 47. es5.github.com/#x11.9.3 es5.github.com/#x11.9.6 jsperf.com/undefined-void0-perf jsperf.com/double-vs-triple-equals
- 48. Myth: Use switch statementsinstead of if / else if for better performance. Status: Plausible/Busted (WebKit Mobile)
- 49.
- 50. Myth: Use native methodsfor better performance. Status: Busted
- 51. es5.github.com/#x15.4.4.18 jsperf.com/accessor-perf jsperf.com/bind-vs-custom jsperf.com/for-vs-array-foreach