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

Question

我正在尝试比较映射 API's- Google Maps、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

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

Date.now() 方法 returns 自 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);
    };

Answer 2

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

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

Find layer rendering time in mapping API's

javascript

google-maps

openlayers

leaflet

arcgis-js-api