パフォーマンステストOpenLayers vsリーフレット

Question

OpenLayersとリーフレットのパフォーマンスを比較したいと思います。 ベクトルファイルやベースマップをレンダリングするのが最も速いようなものをテストしたいのですが、大量のマーカーを表示するなどです。

私はこのサンプルを自分で設定することができますが、それらの間のスピード？

ベクターデータをマップにロードするなどのタスクを実際に実行するには、どのくらいの時間が必要ですか？

デベロッパーコンソールの下でChromeで[タイムライン]タブを使用しようとしましたが、それは私には分かりません。

これはマップの例です。青い形をレンダリングするのにどれくらいの時間がかかるのですか？それは単純なベクトルファイルです。

Answer 1

OpenLayersを-3大JSONファイルとのリーフレットよりも高速であるように思われます。

リーフレットは、ほとんどのJSONファイルでOpenlayers-3よりも高速に見えます。

さらに、リーフレットはOpenlayers-3よりもはるかに多くのRAM（x2-x3）を消費するようです。 Firefoxインスペクタを使用したスナップショットメモリは、Openlayers-3の場合は30 Mo、リーフレットの場合は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); 
});