Test de performance OpenLayers vs Leaflet

Question

Je voudrais comparer la performance entre OpenLayers et Leaflet. Je veux tester des choses comme ce qui est le plus rapide pour rendre des fichiers vectoriels, des fonds de carte, afficher une quantité massive de marqueurs, etc.

Je peux créer moi-même ces exemples, mais je ne sais pas vraiment comment mesurer la différence vitesse entre eux?

Où puis-je voir combien de temps il faut pour effectuer une tâche comme le chargement des données vectorielles dans une carte?

J'ai essayé d'utiliser l'onglet 'Chronologie' dans Chrome sous la console de développement, mais ce n'est pas très clair pour moi.

Ceci est un exemple de carte. Où puis-je voir combien de temps il faut pour rendre les formes bleues? C'est juste un simple fichier vectoriel.

Answer 1

Openlayers-3 semble être plus rapide que dépliant avec de gros fichiers JSON.

La brochure semble être plus rapide qu'Openlayers-3 avec de petits fichiers JSON.

En outre, Leaflet semble consommer beaucoup plus de RAM (x2-x3) que Openlayers-3. Une mémoire instantanée avec Firefox Inspector donne 30 Mo pour Openlayers-3 et 500 Mo pour Leaflet.

Cela semble normal si vous regardez comment la structure de la langue est. Mais je me demande toujours s'il n'y a pas un problème dans ces chiffres que je vous donne ... cela semble être une énorme différence. Si les chiffres sont bons, c'est comme avec les voitures et les voitures de sport normales, vous pouvez aller plus vite avec les voitures de sport, mais elles coûtent beaucoup plus cher et vous devez en prendre soin beaucoup plus. Mais il n'y a pas de "meilleur" pour moi, cela dépend de ce dont vous avez besoin.

Voici les sources de ce que je dis:

exemple Brochure:

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 exemple:

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); 
});