SXSW 2012 JavaScript MythBusters

JavaScript Performance MythBusters™ (via jsPerf)SXSW 2012

about:meLindsey Simonelsigh@gmail.com / @elsigh• AdWords• App Engine• i18n• Closure library• Search• Google Translate• Google+

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"

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 tracking functionality• push browser innovation, uncover regressions• historical resource for web developers

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 results reduces bias

crowdsourcing• no dedicated test resources• project runs in perpetuity• real world test conditions• aggregating results reduces bias• new browsers show up immediately

Myth:Your for loops suck: Rewrite allyour code and usewhile --i. Status: Plausible/Busted (Mobile)PS - String#concat vs. Array#join

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.com/johnallsopp/status/177964915632513024 Status: Confirmed

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. Status: Busted

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.com/h5bp/html5-boilerplate/issues/28 Status: (Mostly) Busted

•<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!

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

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

•<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!

* <script defer> only works in IE10+ Experimenting with JS loading techniques on a real site (incl. jquery, jquery-ui, site code)

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. Status: Busted

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

http://elena-oana.blogspot.com	25
http://elena-oana.blogspot.ro	15
http://elena-oana.blogspot.fr	6
http://elena-oana.blogspot.in	4
http://elena-oana.blogspot.ca	2
http://elena-oana.blogspot.de	2
http://elena-oana.blogspot.gr	2
http://elena-oana.blogspot.co.at	2
http://elena-oana.blogspot.it	2
http://elena-oana.blogspot.co.uk	1
http://elena-oana.blogspot.be	1
http://elena-oana.blogspot.nl	1
http://elena-oana.blogspot.mx	1

SXSW 2012 JavaScript MythBusters

by Elena-Oana Tabaranu

Accessibility

Categories

Upload Details

Usage Rights

13 Embeds 64

Statistics

SXSW 2012 JavaScript MythBusters Presentation Transcript