性能測試OpenLayers vs Leaflet

我想比較OpenLayers和Leaflet之間的性能。我想測試哪些東西是最快的呈現矢量文件，底圖，顯示大量的標記等性能測試OpenLayers vs Leaflet

我可以自己設置這個例子，但我不怎麼實際測量差異他們之間的速度？

我在哪裏可以看到執行像將矢量數據加載到地圖這樣的任務需要多長時間？

我試圖在開發者控制檯中使用Chrome中的'時間線'選項卡，但是這對我來說並不那麼清楚。

這是一個地圖的例子。我在哪裏可以看到呈現藍色形狀需要多長時間？這只是一個簡單的矢量文件。

來源

2016-08-17 newbiedevelopper

的OpenLayers-3似乎比大JSON文件傳單更快。

單張似乎比Openlayers-3更快，並帶有少量JSON文件。

此外，Leaflet似乎比Openlayers-3消耗更多的RAM（x2-x3）。使用Firefox Inspector的快照內存爲Openlayers-3提供30 Mo，爲Leaflet提供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); 
});

來源

2017-01-25 13:19:45 KBill

性能測試OpenLayers vs Leaflet

回答

相關問題