如何在PhantomJS中测量渲染时间？

Michael 发表于 Dev

麦可

据我了解，PhantomJS在page.open被调用时开始加载页面。首先，它加载页面资源，然后呈现页面，然后调用open回调。

现在，我只想知道渲染时间（即没有资源加载时间）。我可以那样做吗？

Artjom B.

当我考虑渲染时间时，我正在考虑从已经建立的DOM和CSSDOM生成图像。我认为您无法从脚本中访问该脚本，但是可以通过访问PerformanceTiming对象window.performance.timing。它具有多个定时，分别表示各种网络和JavaScript执行事件。

在您的情况下最有意义的指标是

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

请注意，PerformanceTiming仅可从PhantomJS 2开始使用。

这是一个小脚本，用于打印可用数字并弄清楚它们：

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

它将为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
    }
}