Performance test OpenLayers vs Leaflet

Question

I would like to compare the performance between OpenLayers and Leaflet. I want to test things like which is the fastest to render vector files, basemaps, show a massive amount of markers etc.

I can set up this examples myself, but I don't how to actually measure the difference in speed between them?

Where can I see how long it actually takes to perform a task like loading the vector data into a map?

I tried to use the 'Timeline' tab in Chrome under developper console but it's not that clear to me.

This an example of a map. Where can I see how long it takes to render the blue shapes? It's just a simple vector file.

Answer 1

Openlayers-3 seems to be faster than leaflet with big JSON files.

Leaflet seems to be faster than Openlayers-3 with little JSON files.

In addition Leaflet seems to consume much more RAM (x2-x3) than Openlayers-3. A snapshot memory with Firefox Inspector gives 30 Mo for Openlayers-3 and 500 Mo for Leaflet.

That seems normal if you look at how the language structure is. But I'm still wondering if there is not a problem in these numbers I give you... that seems to be a HUGE difference.

If the numbers are good, it's like with normal cars and sportcars, you can go faster with sportcars, but they cost much more and you must take care of them much more. But there is no "better" for me, that depends on what you need.

Here are the sources of what I'm saying:

Leaflet example:

var timerStart = Date.now();
var timerStop;
var timerDelta;

// MAP
var mymap = L.map('map').setView([20, 0], 3);


// BIG JSON
var bigJSON = new L.geoJson();
bigJSON.addTo(mymap);

$.getJSON({
    dataType: "json",
    url: "data/countries.geojson", // big JSON file

    success: function(data) {
        var nb=1;
        for(var i=0; i<nb; i++) {
            console.info("add n°" + i);
            $(data.features).each(function(key, data) {
                bigJSON.addData(data);      
            });
        }

        console.info("Number of features loaded = " + bigJSON.getLayers().length);
        timerStop = Date.now();
        timerDelta = timerStop - timerStart;

        console.info("Start at " + timerStart);
        console.info("Stopped at " + timerStop );
        console.info("Loading time = " + timerDelta );
   }
});

Openlayers-3 example:

var timerStart = Date.now();
var timerStop;
var timerDelta;

// MAP
var myMap   =   new ol.Map({
    target: 'map',
    view:   new ol.View({
        center: ol.proj.fromLonLat( [20, 0] ),
        zoom: 3
    })
});

var SRC_bigJSON = new ol.source.Vector({
    url: 'data/countries.geojson',  // big JSON file
    format: new ol.format.GeoJSON()
});
var bigJSON  = new ol.layer.Vector({
    source: SRC_bigJSON
});

var nb=1;                            
for (var i=0; i<nb; i++) {
    console.info("add n°" + i);
    myMap.addLayer(bigJSON);
}

bigJSON.on('change', function(e) {
    console.info("Number of features loaded = " + bigJSON.getSource().getFeatures().length * myMap.getLayers().getLength());

    timerStop = Date.now();
    timerDelta = timerStop - timerStart;

    console.info("Start at " + timerStart);
    console.info("Stopped at " + timerStop );
    console.info("Loading time = " + timerDelta );
});