Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head></head>
<body>
<script type="text/javascript">
function renderedAll(){
document.getElementById('render').innerHTML = 'Done Rendering';
document.body.className = 'rendered-all';
}
// This will be typically an Ajax request
window.setTimeout(renderedAll, 5000);
</script>
<div id="render">
Loading (will be done in 4 secs)
</div>
</body>
</html>
var browserPerf = require('browser-perf');
var BaseMetrics = require('browser-perf/lib/metrics/BaseMetrics');
var url = process.argv[2];
var renderChangeFunction = 'renderedAll';
browserPerf(url, function(err, result) {
console.log(err, result);
}, {
selenium: 'http://localhost:9515',
browsers: [{
browserName: 'chrome',
loggingPrefs: {
performance: 'ALL'
}
}],
actions: waitForRender,
metrics: [renderMetric()]
});
function waitForRender(browser) {
return browser.get(url).then(function() {
return browser.waitForElementByCss("body.rendered-all", 10000, 5000);
});
}
function renderMetric() {
var startTime, endTime, waitForEnd = false;
function processLogEntity(data) {
if (data.type === 'InvalidateLayout') {
console.log('Layout invalidated, checking if this is due to our function');
if (data.stackTrace) {
for (var i = 0; i < data.stackTrace.length; i++) {
if (data.stackTrace[i].functionName === renderChangeFunction) {
console.log('Render function triggered, now waiting for layout to complete');
waitForEnd = true;
}
}
}
}
if (data.type === 'DrawFrame' && waitForEnd === true) {
console.log('Found a draw frame after our function call');
endTime = data.startTime;
}
if (data.type === 'ResourceSendRequest') {
startTime = data.startTime;
console.log('Start Time set');
}
for (var i = 0; data.children && i < data.children.length; i++) {
processLogEntity(data.children[i]);
}
}
return {
start: function(browser) {
return browser.log('performance');
},
teardown: function(browser) {
return browser.log('performance').then(function(log) {
log.forEach(function(log) {
var data = JSON.parse(log.message).message.params;
if (data.record) {
processLogEntity(data.record);
}
});
});
},
getResults: function() {
return {
startTime: startTime,
endTime: endTime,
duration: endTime - startTime
};
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment