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

Recently uploaded (20)

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 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?
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
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
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
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...
 
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
 
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
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 

SXSW 2012 JavaScript MythBusters