Performance issue

[Peter Hewat]

Hello Mootoolers,

I have come across an interesting javascript framework project focused on performance: http://myjs.fr/

I was very surprised to discover how slow Mootools turned out to be in these tests compared to jQuery, ExtJS and especially this new My.js framework.

Run these benchmarks for yourselves:

http://jsperf.com/my-js-perf-tests/13

http://jsperf.com/my-js-perf-tests/2

http://jsperf.com/my-js-perf-tests/3

http://jsperf.com/my-js-perf-tests/4

http://jsperf.com/my-js-perf-tests/5

Are these just silly benchmarks that don't mean anything in real life usage or is there something to worry about?

[Sean McArthur]

I only looked at the first, saw huge errors in the test, and stopped looking. So take that for what it's worth.

The first test, test 13:

Most frameworks, such as jQuery, use a wrapper for elements. Meaning when you use their element fetching methods, they return an object, that has the element somewhere on an internal property. The jQuery method returns a jQuery object, which is array-like, and has all the jQuery methods of setting CSS, event handlers, etc. However, accessing the innerHTML property of that object will be very cheap. So will setting it, since it's pretty much equivalent to "var a = {}; a.innerHTML = 'asdf';".

That test isn't actually testing what it thinks it is. Its comparing MooTools' setting of actual DOM nodes content, to setting simple properties on wrapper elements. A better test would be to use jQuery('#container')[0],innerHTML, or just jQuery('#container').html('asdf').

[Thomas Aylott]

The answer is yes. These are silly benchmarks, but you should be aware of the costs of using MooTools.

JS perf is a very large topic.

In real world web stuff, the DOM is the bottleneck. But, if you need to create thousands of objects in a loop or run some method on an object thousands of times in a loop, avoid using Class or anything fancy at all.

For example, Slick.js does not use Class. Slick also avoids function calls and extending DOM nodes, etc…

In general, if you are writing anything that needs to be that insanely fast (few of us ever do) then you need to know how to make JS insanely fast yourself.

— Thomas Aylott / SubtleGradient.com (from iPhone 4)

[Peter Hewat]

To be honest, I wrote test 13 myself. I am pretty familiar with Mootools but not with the other libraries in that test hence the errors.

After checking the correct way of modifying the actual DOM nodes content in each library (Mootools: http://jsfiddle.net/ytp5F/ , jQuery: http://jsfiddle.net/VXHPT/ , ExtJS: http://jsfiddle.net/mtZ3y/ ), I rewrote the test: http://jsperf.com/my-js-perf-tests/14

This time, the results certainly are more reasonable...

That said, the other JS perf tests created by John-David Dalton (test 1 to 5) are the ones to check out.

As a side note, with Mootools, what is the difference between xxx.setProperty('html', '...') and xxx.innerHTML = '...' ?

[Peter Hewat]

Indeed, I realize that those tests aren't representative of real life usage. I understand that there are probably certain use cases where using a library incurs a slight performance penalty. Anyways, I personally prefer Mootools over the other solutions for it's coding style, customization and available libraries.