//calculate page loading time by resource timing API
var perfEntries = performance.getEntries();
var end_probe = perfEntries.filter(function(item) {
//page load finish request indicator
if (item.name.indexOf('/req_url_end') > -1) {
console.log(item.name);
return true;
}
});
if(end_probe.length > 0) {
var end_time = end_probe[0].responseEnd;
var start_probe = perfEntries.filter(function(item) {
//page load start indicator
if (item.name.indexOf('/req_url_start') > -1) {
console.log(item.name);
return true;
}
});
var start_time = start_probe[0].startTime;
var duration = end_time - start_time;
console.log(duration);
} else {
console.log("page loading end indicator is not found, please double check all perf Entries");
}
There is a better way to combine User Timing API and Resource Timing API to get accurate page performance, i am using Nightmare APIs as a sample to do the automated page tests, which can help our continuous page performance test process on daily basis:
var url = "http://www.yourhost.com/abc/def/";
var page_complete_idy = 'key_request_name'; //page indicator by resource name
var tag = 'ReviewPage';
var env_name = 'prod';
const RENDER_TIME_MS = 2000;
var Nightmare = require('nightmare'),
nightmare = Nightmare({show: true, switches: {
'ignore-certificate-errors': true
}});
nightmare
.goto(url)
.wait(function(idy){
var perfEntries = window.performance.getEntries();
if (perfEntries.length > 20) {
return perfEntries.some( function (item) {
if (item.name.includes(idy)) {
return true;
}
});
} else {
return false;
}
}, page_complete_idy)
.evaluate(function(idy){
var perfEntries = window.performance.getEntries();
var perf_obj = perfEntries.find(function (item) {
return item.name.includes(idy)
});
if (perf_obj) {
return perf_obj.responseEnd.toFixed(1);
} else {
return 'undefined'
}
}, page_complete_idy)
.end()
.then( function (duration) {
console.log(tag + ":" + duration);
})
No comments:
Post a Comment