[OpenLayers-Dev] [OpenLayers 3] type instantiation performance

Sun Oct 17 15:24:17 EDT 2010

On Sat, Oct 16, 2010 at 8:57 PM, Andreas Hocevar <ahocevar at opengeo.org> wrote:
> Hi,
>
> my opinion is that we can make much more use of object literals internally. Which means e.g. to say
>
> var a = {x: 23.4, y: 42.4};
>
> instead of
>
> var a = new OpenLayers.Pixel(23.4, 42.4);

I did some experiments to compare the various alternatives to creating objects.

The results: using object litterals yields better performance in IE7,
FF3, FF4, and Safari 3, but not in Chrome. And IE is the browser where
using object litterals really pays off. The numbers also show the
performance penalty incurred when using OpenLayers.Class.

The performance numbers, in milliseconds (small is better):

IE7
-----
OpenLayers.Class 1289
Pure JavaScript 547
Object Litteral 296.5

FF3
------
OpenLayers.Class 188.05
Pure JavaScript 85.15
Object Litteral 79.5

FF4
------
OpenLayers.Class 73.5
Pure JavaScript 33.1
Object Litteral 22.15

Chrome 6
--------------
OpenLayers.Class 9.3
Pure JavaScript 2.45
Object Litteral 4.6

Safari 3
-----------
OpenLayers.Class 19.45
Pure JavaScript 8.7
Object Litteral 6.3

So, in conclusion, based on these results, I'd be in favour to get rid
of OpenLayers.Class and use object litterals when possible.

Here is the test file I've used (also attached):

<!DOCTYPE html>
<html debug="true">
    <head>
    <script src="../lib/Firebug/firebug.js"></script>
    <script src="../OpenLayers.js"></script>
    <script>

        function avg(t) {
            var s = 0;
            for(var i=0, l=t.length; i<l; i++) {
                s += t[i];
            }
            return s / l;
        }

        var Pixel1 = OpenLayers.Class({
            initialize: function(x, y) {
                this.x = x;
                this.y = y;
            }
        });

        var Pixel2 = function(x, y) {
            this.x = x; this.y = y;
        };

        var NUM = 20; // 2 is the maximum value that can be used here
with IE
        var i, j, l, start, stop, p, times = new Array(NUM);

        // case 1
        for(i=0; i<NUM; i++) {
            start = new Date;
            for(j=0,l=100000; j<l; j++) {
                p = new Pixel1(23.4, 42.4);
            }
            stop = new Date;
            times[i] = stop.getTime()-start.getTime();
        }
        console.log("OpenLayers.Class", avg(times));

        // case 2
        for(i=0; i<NUM; i++) {
            start = new Date;
            for(j=0,l=100000; j<l; j++) {
                p = new Pixel2(23.4, 42.4);
            }
            stop = new Date;
            times[i] = stop.getTime()-start.getTime();
        }
        console.log("Pure JavaScript", avg(times));

        // case 3
        for(i=0; i<NUM; i++) {
            start = new Date;
            for(j=0,l=100000; j<l; j++) {
                p = {x: 23.4, y: 42.4};
            }
            stop = new Date;
            times[i] = stop.getTime()-start.getTime();
        }
        console.log("Object Litteral", avg(times));
    </script>
    </head>
    <body>
    </body>
</html>

-- 
Eric Lemoine

Camptocamp France SAS
Savoie Technolac, BP 352
73377 Le Bourget du Lac, Cedex

Tel : 00 33 4 79 44 44 96
Mail : eric.lemoine at camptocamp.com
http://www.camptocamp.com
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-dev/attachments/20101017/18b7454e/perf.html