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 Test Environment

8. Your Mobile Test Environment

9. en.wikipedia.org/wiki/Usage_share_of_web_browsers

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. crowdsourcing the results

12. crowdsourcing
• no dedicated test resources

13. crowdsourcing
• no dedicated test resources
• project runs in perpetuity

14. crowdsourcing
• no dedicated test 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 loops suck: Rewrite all
your code and use
while --i.
Status: Plausible/Busted
(Mobile)
PS - String#concat vs. Array#join

18. jsperf.com/for-loop-research
jsperf.com/for-loop-caching

19. 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

20. jsperf.com/localstorage-science
jsbin.com/ifucuc/9

21. Myth:
The arguments object should
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, are always better at
managing performance than
you are, so just use what they
provide.
Status: Busted

24. http://4vk.geti.fi/jsperf/jquery-this

25. Myth:
Converting a NodeList to an
array is expensive, so you
shouldn't do it.
Status: Busted

26. jsperf.com/lists-of-nodes

27. 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

28. •<script defer>
horribly buggy across 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 <script defer>
dynamic script loading

30. •<script "one-big-file.js">
at some point, "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 a big 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 your concat'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 are slow
and should be replaced with
simple string method calls, like
indexOf, when possible.
Status: Busted

37. es5.github.com/#x7.8.5
jsperf.com/regexp-indexof-perf

38. Myth:
OO API abstraction means you
never have to worry about the
details (including the
performance).
Status: Busted

39. http://nam.geti.fi/jsperf/ooapi

40. Myth:
Caching "nested property
lookup" or "prototype chain
lookup" helps (or hurts)
performance.
Status: Busted

41. http://pc6.geti.fi/jsperf/prototype-chain
http://q3y.geti.fi/jsperf/nested-properties

42. Myth:
Operations which require an
implicit primitive-to-object
cast/conversion will be slower.
Status: Busted

43. http://udw.geti.fi/jsperf/object-casting

44. Myth:
Scope chain lookups are
expensive.
Status: Busted

45. jsperf.com/scope-chain-perf

46. Myth:
Use void 0 instead 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 statements instead
of if / else if for better
performance.
Status: Plausible/Busted
(WebKit Mobile)

49. jsperf.com/switch-if-else

50. Myth:
Use native methods for 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