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
770
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
560
Rage against the state machine
appltn
1
470
Modular UI with (Angular || Ember)
appltn
0
110
Building web apps with Express
appltn
4
490
The Modern JavaScript Application
appltn
5
610
Introducing Mint Source
appltn
1
390
Other Decks in Technology
See All in Technology
AI駆動で進化する開発プロセス ~クラスメソッドでの実践と成功事例~ / aidd-in-classmethod
tomoki10
1
990
Datadog のトライアルを成功に導く技術 / Techniques for a successful Datadog trial
nulabinc
PRO
0
120
Coding Agentに値札を付けろ
watany
3
110
勝手に!深堀り!Cloud Run worker pools / Deep dive Cloud Run worker pools
iselegant
4
660
Twelve-Factor-Appから学ぶECS設計プラクティス/ECS practice for Twelve-Factor-App
ozawa
3
160
Aspire をカスタマイズしよう & Aspire 9.2
nenonaninu
0
380
Part2 GitHub Copilotってなんだろう
tomokusaba
2
690
Global Azure2025(GitHub Copilot ハンズオン)
tomokusaba
2
660
250510 StepFunctionのテスト自動化始めました vol.1
east_takumi
1
180
OPENLOGI Company Profile
hr01
0
63k
OPENLOGI Company Profile for engineer
hr01
1
26k
MySQL Indexes and Histograms – How they really speed up your queries
lefred
0
150
Featured
See All Featured
Scaling GitHub
holman
459
140k
Build your cross-platform service in a week with App Engine
jlugia
230
18k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
4 Signs Your Business is Dying
shpigford
183
22k
Designing Experiences People Love
moore
142
24k
Facilitating Awesome Meetings
lara
54
6.3k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building an army of robots
kneath
305
45k
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