SXSW 2012 JavaScript MythBusters
Upcoming SlideShare
Loading in...5

SXSW 2012 JavaScript MythBusters






Total Views
Views on SlideShare
Embed Views



21 Embeds 465 312 50 23 17 15 12 6 5 5 4 3 2 2 2 1 1 1 1 1 1 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

SXSW 2012 JavaScript MythBusters SXSW 2012 JavaScript MythBusters Presentation Transcript

  • JavaScript Performance MythBusters™ (via jsPerf)SXSW 2012
  • about:meLindsey / @elsigh• AdWords• App Engine• i18n• Closure library• Search• Google Translate• Google+
  • about:meKyle / @getify / • LABjs • HTML5 Cookbook • HubAustin Coworking • ATX Web Performance Meetup • Web Performance Summit (online!) • "Always bet on JS & HTML5" View slide
  • about:meJohn-David / @jdalton • Benchmark.js • • FuseJS • All-around JS Fanboy View slide
  • about:meChris / @robodynamo • Rocket Loader • CloudFlareJS
  • Your Development Test Environment
  • Your Mobile Test Environment
  • 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
  • Myth:"Double your localStorageread performance in Chromeusing indexes ls.getItem[i] notkeys ls.getItem(key)"See: Status: Confirmed
  • Myth:The arguments object shouldbe avoided because accessingit is slow. Status: Busted
  • Myth:Frameworks/libraries, likejQuery, are always better atmanaging performance thanyou are, so just use what theyprovide. Status: Busted
  • Myth:Converting a NodeList to anarray is expensive, so youshouldnt do it. Status: Busted
  • Myth: Script concatenation and/or<script defer> is all you need to load JS performantly. (aka "Issue 28") Status: (Mostly) Busted
  • •<script defer>horribly buggy across browsers(esp IE<=9!) would delay the DOM-readyevent (bad!)...and btw, this is also buggycross-browser!
  • <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 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
  • Myth:Regular expressions are slowand should be replaced withsimple string method calls, likeindexOf, when possible. Status: Busted
  • Myth:OO API abstraction means younever have to worry about thedetails (including theperformance). Status: Busted
  • Myth:Caching "nested propertylookup" or "prototype chainlookup" helps (or hurts)performance. Status: Busted
  • Myth:Operations which require animplicit primitive-to-objectcast/conversion will be slower. Status: Busted
  • Myth:Scope chain lookups areexpensive. Status: Busted
  • Myth:Use void 0 instead ofundefined and === instead of== when concerned aboutperformance. Status: Busted
  • Myth:Use switch statements insteadof if / else if for betterperformance. Status: Plausible/Busted (WebKit Mobile)
  • Myth:Use native methods for betterperformance. Status: Busted