paulirish/automated-chrome-profiling

Assessing rendering impact (timeline? tracing?)

kangax opened this issue · 5 comments

kangax commented

Hey folks,

Your profiler example works great and I was able to quickly automate and get (profiler) results for my test page.

However, even more important in my case is to get access to a timeline and asses rendering performance. I'd like to be able to see how much time is spent on scripting/reflowing/painting/etc. and just how expensive certain things are to render overall. Ultimately, this would allow to create rendering performance benchmarks to compare multiple versions of an app, determine faster one, catch regressions, etc.

So... after some searching, it appears that timeline can no longer be accessed in favor of tracing. Ok, cool. But I can't figure out how to get any sensible info from the Tracing API, similar to your example.

I'm doing this:

Page.loadEventFired(function () {

  Tracing.start();

  Runtime.evaluate({ "expression": "..." });

  setTimeout(function() {
    Tracing.end();
  }, 3000);
});

Page.navigate({ 'url': options.url });

Tracing.dataCollected(function(data) {
  console.log(data);
  chrome.close();
});

And the "collected data" looks like this:

{ value:
   [ { pid: 9409,
       tid: 15419,
       ts: 73298730977,
       ph: 'X',
       cat: 'toplevel',
       name: 'MessagePumpLibevent::OnLibeventNotification',
       args: [Object],
       tdur: 0,
       tts: 84955 },
     { pid: 9409,
       tid: 15419,
       ts: 73298731035,
       ph: 'X',
       cat: 'ipc,toplevel',
       name: 'ChannelReader::DispatchInputData',
       args: [Object],
       tdur: 0,
       tts: 84974,
       bind_id: '0x2e3e4702',
       flow_in: true },
     { pid: 9409,
       tid: 15419,
       ts: 0,
       ph: 'M',
       cat: '__metadata',
       name: 'overhead',
       args: [Object] },
     { pid: 9409,
       tid: 0,
       ts: 0,
       ph: 'M',
       cat: '__metadata',
       name: 'num_cpus',
       args: [Object] },
     { pid: 9409,
       tid: 15419,
       ts: 0,
       ph: 'M',
       cat: '__metadata',
       name: 'process_sort_index',
       args: [Object] },
     { pid: 9409,
       tid: 15419,
       ts: 0,
       ph: 'M',
       cat: '__metadata',
       name: 'process_name',
       args: [Object] },
     { pid: 9409,
       tid: 1299,
       ts: 0,
       ph: 'M',
       cat: '__metadata',
       name: 'thread_sort_index',
       args: [Object] },
     { pid: 9409,
       tid: 1299,
       ts: 0,
       ph: 'M',
       cat: '__metadata',
       name: 'thread_name',
       args: [Object] },
     { pid: 9409,
       tid: 15419,
       ts: 0,
       ph: 'M',
       cat: '__metadata',
       name: 'thread_name',
       args: [Object] } ] }

There doesn't seem to be anything useful. What am I doing wrong? Any way to tap into timeline results?

paulirish commented

Heyo,

https://github.com/GoogleChrome/node-big-rig will help you out bigtime here.
and then you could use a runner like https://github.com/GoogleChrome/big-rig/tree/master/test-runner or script it via c-r-i like the repo here.

cc @aerotwist

kangax commented

Thanks Paul, and yep, already chatted with @aerotwist about it!

paulirish commented

there's now a minimal implementation of this in the readme and repo.

but pulling higher level metrics from the trace is something that only devtools and traceviewer do at the moment. this will change though.

paulirish commented

https://github.com/paulirish/devtools-timeline-model has this all sorted out for you now:

// const events = the collected timeline data above..

var DevtoolsTimelineModel = require('devtools-timeline-model')
var model = new DevtoolsTimelineModel(events)
var result = model.bottomUpGroupBy('EventName') 

console.log('Bottom up tree grouped by EventName:\n', result)

image