性能测试 OpenLayers 与 Leaflet

Question

我想比较 OpenLayers 和 Leaflet 之间的性能。
我想测试诸如渲染矢量文件、 basemap 、显示大量标记等最快的东西。

我可以自己设置这个例子，但我不知道如何实际测量它们之间的速度差异？

我在哪里可以看到执行任务(例如将矢量数据加载到 map 中)实际需要多长时间？

我尝试在开发者控制台下的 Chrome 中使用“时间轴”选项卡，但我不太清楚。

这是 map 的一个例子。我在哪里可以看到渲染蓝色形状需要多长​​时间？它只是一个简单的矢量文件。

Answer 1

Openlayers-3 似乎比带有大 JSON 文件的传单更快。

Leaflet 似乎比 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 );
});