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
660
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
470
Rage against the state machine
appltn
1
380
Modular UI with (Angular || Ember)
appltn
0
100
Building web apps with Express
appltn
4
460
The Modern JavaScript Application
appltn
5
530
Introducing Mint Source
appltn
1
380
Other Decks in Technology
See All in Technology
LLM + RAG を使った SORACOM Support Bot の裏側の歴史
soracom
PRO
1
640
LLMプロダクト事業の立ち上げにおける挑戦
layerx
PRO
7
1.4k
技育祭2024春 LT Finatextホールディングス
kevinrobot34
1
160
AMLD 2024 - Build Your Own GPT
donlelef
1
260
マイクロサービス環境におけるDB戦略 in DMMプラットフォーム
pospome
11
3k
継続的テストモデルを実現するためにスリーアミーゴスを用いた10Xでのシフトレフトの事例
nihonbuson
3
160
匠MethodとRDRAとICONIXとDDDで実現する一気通貫オブジェクト指向開発
haru860
4
2k
Cloud Deploy と仲良くなりたい
phaya72
1
100
生成AI・LLM時代における 機械学習エンジニアとしてのキャリア戦略・開発戦略 / my-career-and-development-strategies-for-ml-engineer-2024
yuya4
3
240
Challenges - Open Farming Hackdays 2024
loleg
0
540
依存ライブラリはどこに?
takesection
0
110
データ化エンジニアとしての1年を振り返る
sansantech
PRO
3
250
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
Visualization
eitanlees
135
14k
A Philosophy of Restraint
colly
195
15k
Design by the Numbers
sachag
274
18k
Writing Fast Ruby
sferik
619
59k
The Pragmatic Product Professional
lauravandoore
24
5.7k
Fireside Chat
paigeccino
19
2.6k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.8k
Raft: Consensus for Rubyists
vanstee
130
6.2k
Atom: Resistance is Futile
akmur
258
25k
YesSQL, Process and Tooling at Scale
rocio
160
13k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
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