axemclion/index.html

## index.html
<!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>

## render-time.js
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
      };
    }
  }
}
	<!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
	};
	}
	}
	}