0
JavaScript Performance MythBusters™                 (via jsPerf)SXSW 2012
about:meLindsey Simonelsigh@gmail.com / @elsigh•   AdWords•   App Engine•   i18n•   Closure library•   Search•   Google Tr...
about:meKyle Simpsongetify@gmail.com / @getify / http://getify.me • LABjs • HTML5 Cookbook • HubAustin Coworking • ATX Web...
about:meJohn-David Daltonjohn.david.dalton@gmail.com / @jdalton • Benchmark.js • jsPerf.com • FuseJS • All-around JS Fanboy
about:meChris Joelchris@cloudflare.com / @robodynamo • Rocket Loader • CloudFlareJS
Your Development Test Environment
Your Mobile Test Environment
en.wikipedia.org/wiki/Usage_share_of_web_browsers
Browserscope & jsPerfOpen-source, community-driven project for profiling browsers.Explicit Goals:• foster innovation by tr...
crowdsourcing the results
crowdsourcing• no dedicated test resources
crowdsourcing• no dedicated test resources• project runs in perpetuity
crowdsourcing• no dedicated test resources• project runs in perpetuity• real world test conditions
crowdsourcing•   no dedicated test resources•   project runs in perpetuity•   real world test conditions•   aggregating re...
crowdsourcing•   no dedicated test resources•   project runs in perpetuity•   real world test conditions•   aggregating re...
Myth:Your for loops suck: Rewrite allyour code and usewhile --i.    Status: Plausible/Busted            (Mobile)PS - Strin...
jsperf.com/for-loop-researchjsperf.com/for-loop-caching
Myth:"Double your localStorageread performance in Chromeusing indexes ls.getItem[i] notkeys ls.getItem(key)"See: twitter.c...
jsperf.com/localstorage-science      jsbin.com/ifucuc/9
Myth:The arguments object shouldbe avoided because accessingit is slow.       Status: Busted
jspatterns.com/arguments-considered-harmful/         jsperf.com/arguments-perf
Myth:Frameworks/libraries, likejQuery, are always better atmanaging performance thanyou are, so just use what theyprovide....
http://4vk.geti.fi/jsperf/jquery-this
Myth:Converting a NodeList to anarray is expensive, so youshouldnt do it.        Status: Busted
jsperf.com/lists-of-nodes
Myth: Script concatenation and/or<script defer> is all you need  to load JS performantly.       (aka "Issue 28")   github....
•<script defer>horribly buggy across browsers(esp IE<=9!)github.com/paulirish/lazyweb-requests/issues/42still would delay ...
<script> or <script defer> dynamic script loading
•<script "one-big-file.js">at some point, "big" is big enoughto overcome HTTP connectionoverhead, meaning a secondparallel...
•<script "one-big-file.js">chunking a big file into 2-3 parts,based on volatility of code (howoften it changes) allows for...
•<script "one-big-file.js">chunking your concatd code fileallows you to load the chunksseparately, like one before load,th...
* <script defer> only works in IE10+        Experimenting with JS loading techniques on         a real site (incl. jquery,...
Myth:"eval is evil", or in other words,eval is too slow and quirky tobe considered useful.        Status: Plausible
jsperf.com/practical-eval/2jsperf.com/more-practical-eval/3       jsperf.com/eval-kills
Myth:Regular expressions are slowand should be replaced withsimple string method calls, likeindexOf, when possible.       ...
es5.github.com/#x7.8.5jsperf.com/regexp-indexof-perf
Myth:OO API abstraction means younever have to worry about thedetails (including theperformance).       Status: Busted
http://nam.geti.fi/jsperf/ooapi
Myth:Caching "nested propertylookup" or "prototype chainlookup" helps (or hurts)performance.        Status: Busted
http://pc6.geti.fi/jsperf/prototype-chainhttp://q3y.geti.fi/jsperf/nested-properties
Myth:Operations which require animplicit primitive-to-objectcast/conversion will be slower.        Status: Busted
http://udw.geti.fi/jsperf/object-casting
Myth:Scope chain lookups areexpensive.       Status: Busted
jsperf.com/scope-chain-perf
Myth:Use void 0 instead ofundefined and === instead of== when concerned aboutperformance.       Status: Busted
es5.github.com/#x11.9.3    es5.github.com/#x11.9.6 jsperf.com/undefined-void0-perfjsperf.com/double-vs-triple-equals
Myth:Use switch statements insteadof if / else if for betterperformance.   Status: Plausible/Busted       (WebKit Mobile)
jsperf.com/switch-if-else
Myth:Use native methods for betterperformance.        Status: Busted
es5.github.com/#x15.4.4.18   jsperf.com/accessor-perf  jsperf.com/bind-vs-customjsperf.com/for-vs-array-foreach
SXSW 2012 JavaScript MythBusters
Upcoming SlideShare
Loading in...5
×

SXSW 2012 JavaScript MythBusters

3,477

Published on

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

No Downloads
Views
Total Views
3,477
On Slideshare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
28
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "SXSW 2012 JavaScript MythBusters"

  1. 1. JavaScript Performance MythBusters™ (via jsPerf)SXSW 2012
  2. 2. about:meLindsey Simonelsigh@gmail.com / @elsigh• AdWords• App Engine• i18n• Closure library• Search• Google Translate• Google+
  3. 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. 4. about:meJohn-David Daltonjohn.david.dalton@gmail.com / @jdalton • Benchmark.js • jsPerf.com • FuseJS • All-around JS Fanboy
  5. 5. about:meChris Joelchris@cloudflare.com / @robodynamo • Rocket Loader • CloudFlareJS
  6. 6. Your Development Test Environment
  7. 7. Your Mobile Test Environment
  8. 8. en.wikipedia.org/wiki/Usage_share_of_web_browsers
  9. 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. 10. crowdsourcing the results
  11. 11. crowdsourcing• no dedicated test resources
  12. 12. crowdsourcing• no dedicated test resources• project runs in perpetuity
  13. 13. crowdsourcing• no dedicated test resources• project runs in perpetuity• real world test conditions
  14. 14. crowdsourcing• no dedicated test resources• project runs in perpetuity• real world test conditions• aggregating results reduces bias
  15. 15. crowdsourcing• no dedicated test resources• project runs in perpetuity• real world test conditions• aggregating results reduces bias• new browsers show up immediately
  16. 16. Myth:Your for loops suck: Rewrite allyour code and usewhile --i. Status: Plausible/Busted (Mobile)PS - String#concat vs. Array#join
  17. 17. jsperf.com/for-loop-researchjsperf.com/for-loop-caching
  18. 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. 19. jsperf.com/localstorage-science jsbin.com/ifucuc/9
  20. 20. Myth:The arguments object shouldbe avoided because accessingit is slow. Status: Busted
  21. 21. jspatterns.com/arguments-considered-harmful/ jsperf.com/arguments-perf
  22. 22. Myth:Frameworks/libraries, likejQuery, are always better atmanaging performance thanyou are, so just use what theyprovide. Status: Busted
  23. 23. http://4vk.geti.fi/jsperf/jquery-this
  24. 24. Myth:Converting a NodeList to anarray is expensive, so youshouldnt do it. Status: Busted
  25. 25. jsperf.com/lists-of-nodes
  26. 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. 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. 28. <script> or <script defer> dynamic script loading
  29. 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. 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. 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. 32. * <script defer> only works in IE10+ Experimenting with JS loading techniques on a real site (incl. jquery, jquery-ui, site code)
  33. 33. Myth:"eval is evil", or in other words,eval is too slow and quirky tobe considered useful. Status: Plausible
  34. 34. jsperf.com/practical-eval/2jsperf.com/more-practical-eval/3 jsperf.com/eval-kills
  35. 35. Myth:Regular expressions are slowand should be replaced withsimple string method calls, likeindexOf, when possible. Status: Busted
  36. 36. es5.github.com/#x7.8.5jsperf.com/regexp-indexof-perf
  37. 37. Myth:OO API abstraction means younever have to worry about thedetails (including theperformance). Status: Busted
  38. 38. http://nam.geti.fi/jsperf/ooapi
  39. 39. Myth:Caching "nested propertylookup" or "prototype chainlookup" helps (or hurts)performance. Status: Busted
  40. 40. http://pc6.geti.fi/jsperf/prototype-chainhttp://q3y.geti.fi/jsperf/nested-properties
  41. 41. Myth:Operations which require animplicit primitive-to-objectcast/conversion will be slower. Status: Busted
  42. 42. http://udw.geti.fi/jsperf/object-casting
  43. 43. Myth:Scope chain lookups areexpensive. Status: Busted
  44. 44. jsperf.com/scope-chain-perf
  45. 45. Myth:Use void 0 instead ofundefined and === instead of== when concerned aboutperformance. Status: Busted
  46. 46. es5.github.com/#x11.9.3 es5.github.com/#x11.9.6 jsperf.com/undefined-void0-perfjsperf.com/double-vs-triple-equals
  47. 47. Myth:Use switch statements insteadof if / else if for betterperformance. Status: Plausible/Busted (WebKit Mobile)
  48. 48. jsperf.com/switch-if-else
  49. 49. Myth:Use native methods for betterperformance. Status: Busted
  50. 50. es5.github.com/#x15.4.4.18 jsperf.com/accessor-perf jsperf.com/bind-vs-customjsperf.com/for-vs-array-foreach
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×