Your SlideShare is downloading. ×
  • Like
SXSW 2012 JavaScript MythBusters
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

SXSW 2012 JavaScript MythBusters

  • 3,219 views
Published

 

Published in Technology , Design
  • 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,219
On SlideShare
0
From Embeds
0
Number of Embeds
19

Actions

Shares
Downloads
27
Comments
0
Likes
6

Embeds 0

No embeds

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