Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Object Creation Pattern Performance
Search
Andy Appleton
July 16, 2012
Technology
1
750
Object Creation Pattern Performance
A talk at July's London JS meetup about the performance of two JavaScript object creation patterns.
Andy Appleton
July 16, 2012
Tweet
Share
More Decks by Andy Appleton
See All by Andy Appleton
Done is better than perfect
appltn
0
550
Rage against the state machine
appltn
1
450
Modular UI with (Angular || Ember)
appltn
0
110
Building web apps with Express
appltn
4
480
The Modern JavaScript Application
appltn
5
600
Introducing Mint Source
appltn
1
390
Other Decks in Technology
See All in Technology
2.5Dモデルのすべて
yu4u
2
610
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220
Culture Deck
optfit
0
330
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
320
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1k
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
360
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
1
240
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
君も受託系GISエンジニアにならないか
sudataka
1
370
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
How GitHub (no longer) Works
holman
313
140k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Done Done
chrislema
182
16k
Fireside Chat
paigeccino
34
3.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
What's in a price? How to price your products and services
michaelherold
244
12k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Transcript
Object Creation Pattern Performance Andy Appleton @appltn http://appleton.me
Two popular patterns for making objects
Module Pattern var Module = function(arg){ var self = {
getArg: function(){ return arg1; } }; return self; };
Constructor Functions var Constructor = function(arg){ this.arg = arg; };
Constructor.prototype.getArg = function(){ return this.arg; };
Smackdown vs
jsperf.com
Test 1: Object Instantiation var doug = new Module('arg'); var
bono = new Constructor('arg');
Test 1: Object Instantiation Chrome 20 Firefox 13 IE 9
Safari 5.1 Module Constructor +30% (operations/sec)
0 - 1
Test 2: Method Calls doug.getArg(); bono.getArg();
Test 2: Method Calls Chrome 20 Firefox 13 IE 9
Safari 5.1 Module Constructor +57% (operations/sec)
1 - 1
Test 2.5: Instantiation & Method Calls var doug = new
Module('arg'); doug.getArg(); var bono = new Constructor('arg'); bono.getArg();
Chrome 20 Firefox 13 IE 9 Safari 5.1 Test 2.5:
Instantiation & Method Calls Module Constructor +61% (operations/sec)
1 - 2
Test 3: Instantiation with inheritance var Module = function(arg1){ //
Set up and return self object }; var ModuleChild = function(arg1, arg2){ var self = new Module(arg1); self.method = function(){}; return self; };
Test 3: Instantiation with inheritance var Constructor = function(arg1){}; //
Add methods to Constructor.prototype var Child = function(arg1, arg2){ // Add instance variables to `this` }; Child.prototype = new Constructor(this.arg1); Child.prototype.method = function(){};
Test 3: Instantiation with inheritance var doug = new ModuleChild('arg',
'arg'); var bono = new ConstructorChild('arg', 'arg');
Chrome 20 Firefox 13 IE 9 Safari 5.1 Test 3:
Instantiation with inheritance Module Constructor +93% (operations/sec)
1 - 3
Test 4: Method calls with inheritance doug.getArg1(); doug.getArg2(); bono.getArg1(); bono.getArg2();
Chrome 20 Firefox 13 IE 9 Safari 5.1 child method
parent method child method parent method Test 4: Method calls with inheritance Module Constructor +56% +53% (operations/sec)
2 - 3
Test 4.5: Instantiation & Method calls with inheritance var doug1
= new ModuleChild('arg', 'arg'); doug1.getArg1(); var doug2 = new ModuleChild('arg', 'arg'); doug2.getArg2(); var bono1 = new ConstructorChild('arg', 'arg'); bono1.getArg1(); var bono2 = new ConstructorChild('arg', 'arg'); bono2.getArg2();
Chrome 20 Firefox 13 IE 9 Safari 5.1 child method
parent method child method parent method Test 4.5: Instantiation & Method calls with inheritance Module Constructor +92% +91% (operations/sec)
2 - 4
Constructor functions are faster to instantiate Use constructors if you’re
going to have a lot of objects
Modules are quicker to call methods on Use modules if
you’re going to be calling a lot of methods
Other factors...
Bono > Crockford and apparently...
1. Object instantiation http://jsperf.com/object-instantiation-test 2. Method calls on instantiated object
http://jsperf.com/method-calling-test 2.5. Object instantiation and method calls http://jsperf.com/intantiation-and-method-call-test 3. Object instantiation with inheritance http://jsperf.com/instantiation-with-inheritance-test 4. Method calls on instantiated objects with inheritance http://jsperf.com/method-calling-with-inheritance-test 4.5. Object instantiation and method calls with inheritance http://jsperf.com/instantiation-and-method-call-test-with-inheritance