SlideShare a Scribd company logo
1 of 51
JavaScript Performance MythBusters™
                 (via jsPerf)




SXSW 2012
about:me
Lindsey Simon
elsigh@gmail.com / @elsigh

•   AdWords
•   App Engine
•   i18n
•   Closure library
•   Search
•   Google Translate
•   Google+
about:me
Kyle Simpson
getify@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:me
John-David Dalton
john.david.dalton@gmail.com / @jdalton
 • Benchmark.js
 • jsPerf.com
 • FuseJS
 • All-around JS Fanboy
about:me
Chris Joel
chris@cloudflare.com / @robodynamo
 • Rocket Loader
 • CloudFlareJS
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
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 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
jspatterns.com/arguments-considered-harmful/

         jsperf.com/arguments-perf
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
es5.github.com/#x7.8.5

jsperf.com/regexp-indexof-perf
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
es5.github.com/#x11.9.3

    es5.github.com/#x11.9.6

 jsperf.com/undefined-void0-perf

jsperf.com/double-vs-triple-equals
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
es5.github.com/#x15.4.4.18

   jsperf.com/accessor-perf

  jsperf.com/bind-vs-custom

jsperf.com/for-vs-array-foreach

More Related Content

What's hot

High Performance WordPress
High Performance WordPressHigh Performance WordPress
High Performance WordPress
vnsavage
 
Flu3nt highlights
Flu3nt highlightsFlu3nt highlights
Flu3nt highlights
dswork
 

What's hot (19)

Wolfram Kriesing - EcmaScript6 for real - code.talks 2015
Wolfram Kriesing - EcmaScript6 for real - code.talks 2015Wolfram Kriesing - EcmaScript6 for real - code.talks 2015
Wolfram Kriesing - EcmaScript6 for real - code.talks 2015
 
High Performance WordPress
High Performance WordPressHigh Performance WordPress
High Performance WordPress
 
Flu3nt highlights
Flu3nt highlightsFlu3nt highlights
Flu3nt highlights
 
Mastering Grunt
Mastering GruntMastering Grunt
Mastering Grunt
 
Sniffing the Mobile Context
Sniffing the Mobile ContextSniffing the Mobile Context
Sniffing the Mobile Context
 
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other ToolsCool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
 
do u webview?
do u webview?do u webview?
do u webview?
 
Mobile web-debug
Mobile web-debugMobile web-debug
Mobile web-debug
 
Economies of Scaling Software
Economies of Scaling SoftwareEconomies of Scaling Software
Economies of Scaling Software
 
Mobile Web Performance - Getting and Staying Fast
Mobile Web Performance -  Getting and Staying FastMobile Web Performance -  Getting and Staying Fast
Mobile Web Performance - Getting and Staying Fast
 
The Case for HTTP/2 - Internetdagarna 2015 - Stockholm
The Case for HTTP/2  - Internetdagarna 2015 - StockholmThe Case for HTTP/2  - Internetdagarna 2015 - Stockholm
The Case for HTTP/2 - Internetdagarna 2015 - Stockholm
 
What does the browser pre-loader do?
What does the browser pre-loader do?What does the browser pre-loader do?
What does the browser pre-loader do?
 
The Case for HTTP/2 - EpicFEL Sept 2015
The Case for HTTP/2 - EpicFEL Sept 2015The Case for HTTP/2 - EpicFEL Sept 2015
The Case for HTTP/2 - EpicFEL Sept 2015
 
Embrace Native Async Nature of JavaScript in WebDriver JS - SeleniumConf Aust...
Embrace Native Async Nature of JavaScript in WebDriver JS - SeleniumConf Aust...Embrace Native Async Nature of JavaScript in WebDriver JS - SeleniumConf Aust...
Embrace Native Async Nature of JavaScript in WebDriver JS - SeleniumConf Aust...
 
Speed Matters!
Speed Matters!Speed Matters!
Speed Matters!
 
Rebooting a Cloud
Rebooting a CloudRebooting a Cloud
Rebooting a Cloud
 
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
 
Web Page Test - Beyond the Basics
Web Page Test - Beyond the BasicsWeb Page Test - Beyond the Basics
Web Page Test - Beyond the Basics
 
OSDC 2017 - Felix Frank - Is that an Ansible_ Stop holding It Like a Puppet
OSDC 2017 - Felix Frank - Is that an Ansible_ Stop holding It Like a PuppetOSDC 2017 - Felix Frank - Is that an Ansible_ Stop holding It Like a Puppet
OSDC 2017 - Felix Frank - Is that an Ansible_ Stop holding It Like a Puppet
 

Viewers also liked

Viewers also liked (9)

Recunoasterea organizatiilor in postarile pe Tweeter
Recunoasterea organizatiilor in postarile pe TweeterRecunoasterea organizatiilor in postarile pe Tweeter
Recunoasterea organizatiilor in postarile pe Tweeter
 
Adobe Flex Framework
Adobe Flex FrameworkAdobe Flex Framework
Adobe Flex Framework
 
Miscarea "NoSQL" in contextul Web-ului social/semantic
Miscarea "NoSQL" in contextul Web-ului social/semanticMiscarea "NoSQL" in contextul Web-ului social/semantic
Miscarea "NoSQL" in contextul Web-ului social/semantic
 
Folosirea instumentului Zemanta in recomandarea de continut
Folosirea instumentului Zemanta in recomandarea de continutFolosirea instumentului Zemanta in recomandarea de continut
Folosirea instumentului Zemanta in recomandarea de continut
 
A Survey on Unsupervised Graph-based Word Sense Disambiguation
A Survey on Unsupervised Graph-based Word Sense DisambiguationA Survey on Unsupervised Graph-based Word Sense Disambiguation
A Survey on Unsupervised Graph-based Word Sense Disambiguation
 
Graph-based Word Sense Disambiguation
Graph-based Word Sense DisambiguationGraph-based Word Sense Disambiguation
Graph-based Word Sense Disambiguation
 
Notes on a Standard: Unicode
Notes on a Standard: UnicodeNotes on a Standard: Unicode
Notes on a Standard: Unicode
 
A Survey on Unsupervised Graph-based Word Sense Disambiguation
A Survey on Unsupervised Graph-based Word Sense DisambiguationA Survey on Unsupervised Graph-based Word Sense Disambiguation
A Survey on Unsupervised Graph-based Word Sense Disambiguation
 
Semantic Tagging for the XWiki Platform with Zemanta and DBpedia
Semantic Tagging for the XWiki Platform with Zemanta and DBpediaSemantic Tagging for the XWiki Platform with Zemanta and DBpedia
Semantic Tagging for the XWiki Platform with Zemanta and DBpedia
 

Similar to SXSW 2012 JavaScript MythBusters

Cannibalising The Google App Engine
Cannibalising The  Google  App  EngineCannibalising The  Google  App  Engine
Cannibalising The Google App Engine
catherinewall
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
Fabio Franzini
 
12 core technologies you should learn, love, and hate to be a 'real' technocrat
12 core technologies you should learn, love, and hate to be a 'real' technocrat12 core technologies you should learn, love, and hate to be a 'real' technocrat
12 core technologies you should learn, love, and hate to be a 'real' technocrat
Jonathan Linowes
 
Build Your Own CMS with Apache Sling
Build Your Own CMS with Apache SlingBuild Your Own CMS with Apache Sling
Build Your Own CMS with Apache Sling
Bob Paulin
 
Cloud Best Practices
Cloud Best PracticesCloud Best Practices
Cloud Best Practices
Eric Bottard
 
Java script performance tips
Java script performance tipsJava script performance tips
Java script performance tips
Shakti Shrestha
 

Similar to SXSW 2012 JavaScript MythBusters (20)

JavaScript performance patterns
JavaScript performance patternsJavaScript performance patterns
JavaScript performance patterns
 
JavaScript Performance Patterns
JavaScript Performance PatternsJavaScript Performance Patterns
JavaScript Performance Patterns
 
Getting Started with Rails on GlassFish (Hands-on Lab) - Spark IT 2010
Getting Started with Rails on GlassFish (Hands-on Lab) - Spark IT 2010Getting Started with Rails on GlassFish (Hands-on Lab) - Spark IT 2010
Getting Started with Rails on GlassFish (Hands-on Lab) - Spark IT 2010
 
Embulk, an open-source plugin-based parallel bulk data loader
Embulk, an open-source plugin-based parallel bulk data loaderEmbulk, an open-source plugin-based parallel bulk data loader
Embulk, an open-source plugin-based parallel bulk data loader
 
Cannibalising The Google App Engine
Cannibalising The  Google  App  EngineCannibalising The  Google  App  Engine
Cannibalising The Google App Engine
 
Play Framework: Intro & High-Level Overview
Play Framework: Intro & High-Level OverviewPlay Framework: Intro & High-Level Overview
Play Framework: Intro & High-Level Overview
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
 
12 core technologies you should learn, love, and hate to be a 'real' technocrat
12 core technologies you should learn, love, and hate to be a 'real' technocrat12 core technologies you should learn, love, and hate to be a 'real' technocrat
12 core technologies you should learn, love, and hate to be a 'real' technocrat
 
Enterprise Strength Mobile JavaScript
Enterprise Strength Mobile JavaScriptEnterprise Strength Mobile JavaScript
Enterprise Strength Mobile JavaScript
 
Ajax to the Moon
Ajax to the MoonAjax to the Moon
Ajax to the Moon
 
JRuby, Ruby, Rails and You on the Cloud
JRuby, Ruby, Rails and You on the CloudJRuby, Ruby, Rails and You on the Cloud
JRuby, Ruby, Rails and You on the Cloud
 
Build Your Own CMS with Apache Sling
Build Your Own CMS with Apache SlingBuild Your Own CMS with Apache Sling
Build Your Own CMS with Apache Sling
 
node.js 실무 - node js in practice by Jesang Yoon
node.js 실무 - node js in practice by Jesang Yoonnode.js 실무 - node js in practice by Jesang Yoon
node.js 실무 - node js in practice by Jesang Yoon
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
 
Cloud Best Practices
Cloud Best PracticesCloud Best Practices
Cloud Best Practices
 
Java script performance tips
Java script performance tipsJava script performance tips
Java script performance tips
 
Ruby on Rails survival guide of an aged Java developer
Ruby on Rails survival guide of an aged Java developerRuby on Rails survival guide of an aged Java developer
Ruby on Rails survival guide of an aged Java developer
 
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com RubyConsegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
 
Daniel Steigerwald - Este.js - konec velkého Schizma
Daniel Steigerwald - Este.js - konec velkého SchizmaDaniel Steigerwald - Este.js - konec velkého Schizma
Daniel Steigerwald - Este.js - konec velkého Schizma
 
Selenium & PHPUnit made easy with Steward (Berlin, April 2017)
Selenium & PHPUnit made easy with Steward (Berlin, April 2017)Selenium & PHPUnit made easy with Steward (Berlin, April 2017)
Selenium & PHPUnit made easy with Steward (Berlin, April 2017)
 

Recently uploaded

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Recently uploaded (20)

Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 

SXSW 2012 JavaScript MythBusters