HRCerqueira’s Blog

Other posts in this series:

• Control structures
• Object instantiation and namespace simulation

Performance may not be a concern on small scripts / widgets that run only once or at most a couple of times per page view, but it should be something to consider when creating a big application with scripts continuously running and a relatively large collection of objects in memory. I decided to run a bunch of of tests on different methods to achieve a same goal covering just cpu performance, because even the most complicated of the applications in javascript running on a 5 year old computer is still very far of being a big memory consumer, unless of course you fall on some type of memory leak.

To build these tests, I did not made any kind of research on the subject. I simply wrote a bunch of scripts and ran them on the two most used browsers, Firefox 2 and Internet Explorer 7, and now I want to share my results and conclusions. Because I ran many different tests I decided to brake the post into a small series of X (still undetermined) posts.

Also, please remember that these results are the results from my computer (actually my wife’s computer) on my particual browser versions. Different computers and different browser versions may lead to different results. If you want to, you may post a comment with your own results, to keep as a reference.

Closures versus object properties

This test add some surprising results for me. I always thought that defining a variable in a closure is more time consuming than defining a object attribute. But… For the purpose of the test I created two constructors:

1
2
3
4
5
6
7

	function propTest() {
		this.x = 5;	
	}
 
	function closeTest() {
		var x = 5;	
	}

Easy two see what each one does. Then I created 500000 instances of each constructor inside a for loop, and measured the time (in milliseconds of course) spent on all those iterations. Here are the results:

So, as you can see, in neither of the two browsers, setting up properties is faster, although, in IE the values are very close. This was about writing the variables, and what about reading them? Two more constructors for our joy:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

	function closeReadTest() {
		var x = 5;
 
		for (var i = 0; i < 500000; i++) {
			x;
		}
	}
 
	function propReadTest() {
		this.x = 5;
 
		for (var i = 0; i < 500000; i++) {
			this.x;
		}
	}

Each one of these sets up a closure or a property only once, and then reads it 500000 times. The results:

And closures win again (and FF to). Now for the next test I considered the following: closures are nice, but sometimes we need to access a certain value outside the object, so we have to write getter method… So, let’s do it. I used the propTest constructor of the first test, and this one:

1
2
3
4
5
6
7

	function closeExtTest() {
		var x = 5;
 
		this.getX = function() {
			return x;	
		}
	}

I created a instance of each and read x 500000 times. Now be prepared for what’s coming:

That’s it, in FF is still about 25% faster to use closures, even with an extra method, but in IE, we get the double of the time on the usage of closures versus about the same time with the object properties. The final and obvious test is external writing to an object. Once again I used the propTest constructor of the first test, and a new one with a setter to use on the closure test:

1
2
3
4
5
6
7

	function closeExtWriteTest() {
		var x = 5;
 
		this.setX = function(_x) {
			x = _x;	
		}
	}

Then, after the usual 500000 times loop, here are the results:

Almost the same results of the external reading test. This leaves me to a conclusion, that is not any different of what I’m used to do. If you want your methods to be public use object properties, if you want to keep them just for your self, don’t be afraid to use closures. You can run the tests yourself here, but please wait about 15 seconds to compute the results before trying to kill the browser process.

Stay tuned for the remaining tests. Hope this helps someone.
Cheers,
Hernâni

Bookmark It

Hide Sites