Question

我正在尝试比较映射API和Google地图，OpenLayers，Leaflet和ArcGis API的性能，我想比较每个地图中矢量图层渲染的时间。当屏幕上已经有所有矢量功能时，我想要时间。试过performance.now();，但这给了错误的时间。当我试图比较API时，我喜欢这种方法让每个地图的渲染时间都相同。是可以做到的用一些通用方法??

例如在OL中，矢量图层是这样定义的，我想要时间在屏幕上显示所有特征。

var vectorSource = new ol.source.ServerVector({
        format: new ol.format.GeoJSON(),
        loader: function (extent, resolution, projection) {
            var url = '--------';
            $.ajax({
                url: url,
                dataType: 'jsonp'
            });
        },
        strategy: ol.loadingstrategy.all
    });
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource
    });
    var loadFeatures = function (response) {
        vectorSource.addFeatures(vectorSource.readFeatures(response));
    };

Answer 1

window.performance非常好用。像这样使用它：

// Set start mark
window.performance.mark('myStart');

// Do stuff
for (i = 0; i < 100000; i++) {
  var test = i * 3 / 2;
}

// Set another time mark
window.performance.mark('mySub');

// Do more stuff
for (i = 0; i < 5000; i++) {
  var test = i * 3 / 2;
}

// Set end mark
window.performance.mark('myEnd');

// Calculate time from start to sub
window.performance.measure('startSubMeasure', 'myStart', 'mySub');
// Calculate time from sub to end
window.performance.measure('subEndMeasure', 'mySub', 'myEnd');
// Calculate time from start to end
window.performance.measure('startEndMeasure', 'myStart', 'myEnd');

// Fetch the measurements
var measurements = window.performance.getEntriesByType('measure');

此处测量将包含如下数组：

[{
    "duration":2.0000000076834112,
    "startTime":261.9999999878928,
    "entryType":"measure",
    "name":"startSubMeasure"
},{
    "duration":2.9999999969732016,
    "startTime":261.9999999878928,
    "entryType":"measure",
    "name":"startEndMeasure"
},{
    "duration":0.9999999892897904,
    "startTime":263.9999999955762,
    "entryType":"measure",
    "name":"subEndMeasure"
}]

在此处查看此行动：http://plnkr.co/edit/cmDovvjR3ZyLiCThp26O?p=preview

Answer 2

您可以使用Javascript的Date对象来计算加载时间。

Date.now()方法返回自1970年1月1日00:00:00 UTC以来经过的毫秒数。

首先，您可以在函数调用之前执行以下操作：

var timerStart = Date.now();

其次，在函数的回调中执行以下操作：

var diff = Date.now()-timerStart;
console.log("Time in millisecond: ", diff);

JSFiddle示例：https://jsfiddle.net/qfgpb728/

根据您的具体情况，您可以执行以下操作：

var timerStart = Date.now();
var vectorSource = new ol.source.ServerVector({
        format: new ol.format.GeoJSON(),
        loader: function (extent, resolution, projection) {
            var url = '--------';
            $.ajax({
                url: url,
                dataType: 'jsonp'
            });
        },
        strategy: ol.loadingstrategy.all
    });
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource
    });
    var loadFeatures = function (response) {
        vectorSource.addFeatures(vectorSource.readFeatures(response));
        var diff = Date.now()-timerStart;
        console.log("Time in millisecond: ", diff);
    };

在映射API中查找图层渲染时间

2 个答案: