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
790
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
580
Rage against the state machine
appltn
1
480
Modular UI with (Angular || Ember)
appltn
0
120
Building web apps with Express
appltn
4
490
The Modern JavaScript Application
appltn
5
630
Introducing Mint Source
appltn
1
400
Other Decks in Technology
See All in Technology
ゆるふわエンジニアでもAIフローにチャレンジしたい!!~Zapierのすゝめ~
masakiokuda
2
100
進捗
ydah
1
150
浸透しなさいRFC 5322&7208
hinono
0
120
人と組織に偏重したEMへのアンチテーゼ──なぜ、EMに設計力が必要なのか/An antithesis to the overemphasis of people and organizations in EM
dskst
6
650
R-SCoRe: Revisiting Scene Coordinate Regression for Robust Large-Scale Visual Localization
takmin
0
440
自社製CMSからmicroCMSへのリプレースがプロダクトグロースを加速させた話
nextbeatdev
0
190
会社にデータエンジニアがいることでできるようになること
10xinc
9
1.6k
あなたの知らない OneDrive
murachiakira
0
240
新卒(ほぼ)専業Kagglerという選択肢
nocchi1
1
2.4k
Yahoo!広告ビジネス基盤におけるバックエンド開発
lycorptech_jp
PRO
1
280
Browser
recruitengineers
PRO
5
1k
モバイルアプリ研修
recruitengineers
PRO
4
740
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Side Projects
sachag
455
43k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Docker and Python
trallard
45
3.5k
Thoughts on Productivity
jonyablonski
69
4.8k
Become a Pro
speakerdeck
PRO
29
5.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Automating Front-end Workflow
addyosmani
1370
200k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
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