How to measure the rendering time in PhantomJS?

Question

As I understand PhantomJS starts loading a page when page.open is invoked. First, it loads the page resources, then renders the page, and then invokes the open callback.

Now I'd like to know the rendering time only (that is, without the resources loading time). Can I do that?

Answer 1

Phantom js uses webkit engine.. so its behaviour will be similar to chrome. Rendering of webpages starts as soon as it recieves the first resource. Its not like it will wait for all the resources to arrive. A simple technique for estimating rendering time would be to have the resources locally that way network delay would be minimal. And get the load time using the script like this.

t = Date.now();
page.open(address, function(status) {
    if (status !== 'success') {
        console.log('FAIL to load the address');
    } else {
        t = Date.now() - t;
        console.log('Loading ' + address);
        console.log('Loading time ' + t + ' msec');
    }
    phantom.exit();
});

Anyway this wont be accurate and always feasible.
So another technique would be to calculate the time taken to get the page ready after the last resource has arrived.(no further network requests required). This would give estimate if some script or resource has problems.

var  t = Date.now();
page.onResourceReceived = function(response) {
    if(Date.now() > t)
    {
        t = Date.now();
    }
};

page.open(address, function(status) {
    if (status !== 'success') {
        console.log('FAIL to load the address');
    }
    else 
    {
        t = Date.now() - t;
        console.log('Loading ' + address);
        console.log('Rendering time' + t + ' msec');
    }
    phantom.exit();
});

Answer 2

When I think about rendering time then I'm thinking about producing an image from an already built up DOM and CSSDOM. I don't think you can have access to that from a script, but you have access to the PerformanceTiming object through window.performance.timing . It has multiple timings which denote various network and JavaScript execution events.

The closest metric that would make sense in your case would be

console.log(page.evaluate(function(){
    var t = performance.timing;
    return t.domContentLoadedEventEnd - t.domContentLoadedEventStart;
}));

Note that PerformanceTiming is only available from PhantomJS 2 onwards.

Here is a small script to print the available numbers and make sense of them:

console.log(JSON.stringify(page.evaluate(function(){
    function cloneObject(obj) {
        var clone = {};
        for(var i in obj) {
            if(typeof(obj[i])=="object" && obj[i] != null)
                clone[i] = cloneObject(obj[i]);
            else
                clone[i] = obj[i];
        }
        return clone;
    }
    return cloneObject(window.performance);
}), undefined, 4));

Which prints the following for stackoverflow.com:

{
    "navigation": {
        "TYPE_BACK_FORWARD": 2,
        "TYPE_NAVIGATE": 0,
        "TYPE_RELOAD": 1,
        "TYPE_RESERVED": 255,
        "redirectCount": 0,
        "type": 0
    },
    "now": {},
    "timing": {
        "connectEnd": 1450633550342,
        "connectStart": 1450633550342,
        "domComplete": 0,
        "domContentLoadedEventEnd": 1450633551673,
        "domContentLoadedEventStart": 1450633551657,
        "domInteractive": 1450633551657,
        "domLoading": 1450633550818,
        "domainLookupEnd": 1450633550342,
        "domainLookupStart": 1450633550342,
        "fetchStart": 1450633550342,
        "loadEventEnd": 0,
        "loadEventStart": 0,
        "navigationStart": 1450633550342,
        "redirectEnd": 0,
        "redirectStart": 0,
        "requestStart": 1450633550342,
        "responseEnd": 1450633550934,
        "responseStart": 1450633550342,
        "secureConnectionStart": 0,
        "unloadEventEnd": 0,
        "unloadEventStart": 0
    }
}