性能测试 OpenLayers 与 Leaflet

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

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

在哪里可以看到执行将矢量数据加载到地图等任务实际需要多长时间？

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

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

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

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