Find layer rendering time in mapping API's

Question

I am trying to compare performance of mapping API's- Google Maps, OpenLayers, Leaflet and ArcGis API and I would like to compare time of vector layers rendering in each of them. I want time, when all vector features are already on the screen. Tried performance.now();, but this gives wrong time. And as I am trying to compare API's I'd like this method to get time of rendering to be the same for every map. Is is possible to do with some general method??

For example in OL, vector layer is defined like this, and I want time when all features are on the screen.

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

You can use Javascript's Date object to calculate the load time.

Date.now() method returns the number of milliseconds elapsed since 1 January 1970 00:00:00 UTC.

First, you can do the following before your function call:

var timerStart = Date.now();

Second, in your function's callback do the following:

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

JSFiddle example: https://jsfiddle.net/qfgpb728/

For your particular situation, you can do the following:

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