Embed Size (px)
Citation preview
JavaScript Performance MythBusters™ (via jsPerf)
SXSW 2012
about:me
Lindsey [email protected] / @elsigh
• AdWords• App Engine• i18n• Closure library• Search• Google Translate• Google+
about:me
Kyle [email protected] / @getify / http://getify.me• LABjs• HTML5 Cookbook• HubAustin Coworking• ATX Web Performance Meetup• Web Performance Summit (online!) • "Always bet on JS & HTML5"
about:me
John-David [email protected] / @jdalton• Benchmark.js• jsPerf.com• FuseJS• All-around JS Fanboy
Your Development Test Environment
Your Mobile Test Environment
en.wikipedia.org/wiki/Usage_share_of_web_browsers
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
crowdsourcing the results
crowdsourcing
• no dedicated test resources
• no dedicated test resources• project runs in perpetuity
crowdsourcing
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 all your code and use while --i.
Status: Plausible/Busted(Mobile)
PS - String#concat vs. Array#join
jsperf.com/for-loop-research
jsperf.com/for-loop-caching
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
jsperf.com/localstorage-science
jsbin.com/ifucuc/9
Myth:The arguments object should be avoided because accessing it is slow.
Status: Busted
jsperf.com/arguments-perf
jspatterns.com/arguments-considered-harmful/
Myth:Frameworks/libraries, like jQuery, are always better at managing performance than you are, so just use what they provide.
Status: Busted
http://4vk.geti.fi/jsperf/jquery-this
Myth:Converting a NodeList to an array is expensive, so you shouldn't 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/42
still would delay the DOM-ready event (bad!)...and btw, this is also buggy cross-browser!
<script> or <script defer>
dynamic script loading
<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.
<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.
<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!
* <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 to be considered useful.
Status: Plausible
jsperf.com/practical-eval/2
jsperf.com/more-practical-eval/3
jsperf.com/eval-kills
Myth:Regular expressions are slow and should be replaced with simple string method calls, like indexOf, when possible.
Status: Busted
jsperf.com/regexp-indexof-perf
es5.github.com/#x7.8.5
Myth:OO API abstraction means you never have to worry about the details (including the performance).
Status: Busted
http://nam.geti.fi/jsperf/ooapi
Myth:Caching "nested property lookup" or "prototype chain lookup" helps (or hurts) performance.
Status: Busted
http://pc6.geti.fi/jsperf/prototype-chain
http://q3y.geti.fi/jsperf/nested-properties
Myth:Operations which require an implicit primitive-to-object cast/conversion will be slower.
Status: Busted
http://udw.geti.fi/jsperf/object-casting
Myth:Scope chain lookups are expensive.
Status: Busted
jsperf.com/scope-chain-perf
Myth:Use void 0 instead of undefined and === instead of == when concerned about performance.
Status: Busted
jsperf.com/double-vs-triple-equals
es5.github.com/#x11.9.3
es5.github.com/#x11.9.6
jsperf.com/undefined-void0-perf
Myth:Use switch statements instead of if / else if for better performance.
Status: Plausible/Busted(WebKit Mobile)
jsperf.com/switch-if-else
Myth:Use native methods for better performance.
Status: Busted
jsperf.com/for-vs-array-foreach
es5.github.com/#x15.4.4.18
jsperf.com/accessor-perf
jsperf.com/bind-vs-custom
