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
710
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
510
Rage against the state machine
appltn
1
420
Modular UI with (Angular || Ember)
appltn
0
100
Building web apps with Express
appltn
4
470
The Modern JavaScript Application
appltn
5
570
Introducing Mint Source
appltn
1
390
Other Decks in Technology
See All in Technology
FastlyとfalcoでNode.jsレスな Webサーバー構築 : IPTV版 ABEMAアプリインフラ刷新 / Building web server using Fastly and falco without Node.js for IPTV ABEMA app
nodaguti
0
240
2024年版 運用者たちのLLM
nwiizo
3
320
セキュリティ監視の内製化 効率とリスク
mixi_engineers
PRO
5
690
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
160
Binary Authorizationと友達になろう / Let's be friends with Binary Authorization
iselegant
2
130
MySQLのあらたしいリリースモデル LTSとIR
sakaik
1
110
EitherT_with_Future
aoiroaoino
1
630
HolidayJp.jl を作りました
mrkn
0
110
目標設定と習慣化で今よりも一歩生産性を上げる
sansantech
PRO
7
2.3k
Cloud Service Mesh への期待が止まらない!!
phaya72
1
100
Azure Cosmos DB での時系列ログの運用と改善
sansantech
PRO
0
190
Oracle Exadata Database Service(Dedicated Infrastructure):サービス概要のご紹介
oracle4engineer
PRO
0
9.4k
Featured
See All Featured
Clear Off the Table
cherdarchuk
90
320k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Designing for Performance
lara
604
68k
The Cult of Friendly URLs
andyhume
76
5.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
Into the Great Unknown - MozCon
thekraken
28
1.4k
The Invisible Side of Design
smashingmag
295
50k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
34
1.9k
Web Components: a chance to create the future
zenorocha
308
41k
Music & Morning Musume
bryan
46
6k
GraphQLとの向き合い方2022年版
quramy
43
13k
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