如何測量PhantomJS中的渲染時間？

Question

據我所知，當調用page.open時，PhantomJS開始加載一個頁面。 首先，它加載頁面資源，然後呈現頁面，然後調用open回調。

現在，我想知道渲染時間只（即沒有資源加載時間）。我可以這樣做嗎？

Answer 1

當我想到渲染時間那麼我想從已經建立起來的DOM和CSSDOM生成圖像。我不認爲您可以通過腳本訪問該文件，但您可以通過window.performance.timing訪問PerformanceTiming對象。它有多個時間表示各種網絡和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 
    } 
} 

Answer 2

Phantom js使用webkit引擎..所以它的行爲將類似於chrome。 一旦它接收到第一個資源，就會立即開始渲染網頁。它不像它會等待所有的資源到達。 估計渲染時間的一種簡單技術就是讓網絡延遲最小的地方有資源。並使用這樣的腳本獲取加載時間。

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

無論如何，這不會是準確的，總是可行的。
因此，另一種技術是計算在最後一個資源到達後準備好頁面所需的時間（不需要進一步的網絡請求）。如果某些腳本或資源出現問題，這將給出估計。

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