Тест производительности OpenLayers vs Leaflet

Question

Я хотел бы сравнить производительность между OpenLayers и Leaflet. Я хочу протестировать такие вещи, как самый быстрый для рендеринга векторных файлов, basemaps, показать огромное количество маркеров и т. Д.

Я могу сам создать эти примеры, но я не знаю, как реально измерить разницу в скорость между ними?

Где я могу увидеть, сколько времени на самом деле требуется для выполнения задачи, например, загрузки векторных данных на карту?

Я попытался использовать вкладку «Временная шкала» в Chrome под консолью разработки, но мне это не совсем понятно.

Это пример карты. Где я могу увидеть, сколько времени требуется для визуализации синих фигур? Это простой векторный файл.

Answer 1

OpenLayers-3, кажется, быстрее, чем листовка с большими файлами в формате JSON.

Листовка, кажется, быстрее, чем Openlayers-3 с небольшими файлами JSON.

Кроме того, Leaflet потребляет гораздо больше ОЗУ (x2-x3), чем Openlayers-3. Память моментальных снимков с помощью Firefox Inspector дает 30 Mo для Openlayers-3 и 500 Mo для лифлета.

Это кажется нормальным, если вы посмотрите на структуру языка. Но мне все еще интересно, нет ли в этих числах проблем, которые я вам даю ... это, по-видимому, огромная разница.

Если цифры хорошие, это похоже на обычные автомобили и спортивные автомобили, вы можете ехать быстрее со спортивными автомобилями, но они стоят намного дороже, и вы должны заботиться о них гораздо больше. Но для меня нет «лучшего», это зависит от того, что вам нужно.

Вот источники, что я говорю:

листовка пример:

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 Пример:

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