性能测试 OpenLayers vs Leaflet

Posted 2023-02-22

【中文标题】性能测试 OpenLayers vs Leaflet

【英文标题】：Performance test OpenLayers vs Leaflet

【发布时间】：2016-12-24 04:15:12

【问题描述】：

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

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

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

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

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

【参考方案1】：

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

Leaflet 似乎比带有少量 JSON 文件的 Openlayers-3 更快。

此外，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 );
);

【讨论】：

我做了一个 jsfiddle 以防万一有人想测试：jsfiddle.net/pmiranda/5492oL8e/20