Listen for HTML rendering process events

Question

I'm reading some articles about the rendering process:

https://developers.google.com/web/fundamentals/performance/ http://www.sitepoint.com/optimizing-critical-rendering-path/

I would like to be able to listen for events of the steps occuring during the rendering process, to be able to know when the browser starts (and finish) to process a HTML document, when a css rule is added to the CSSOM tree,...

Actually, I'm looking for the informations displayed in the devtools timeline, but in a formal format.

I do not think that there is a standardized model, but may be some browser are allowing to listen for these events.

Answer 1

You can just use readonly properties from Navigation Timing API, IDL interface:

interface PerformanceTiming {
  readonly attribute unsigned long long navigationStart;
  readonly attribute unsigned long long unloadEventStart;
  readonly attribute unsigned long long unloadEventEnd;
  readonly attribute unsigned long long redirectStart;
  readonly attribute unsigned long long redirectEnd;
  readonly attribute unsigned long long fetchStart;
  readonly attribute unsigned long long domainLookupStart;
  readonly attribute unsigned long long domainLookupEnd;
  readonly attribute unsigned long long connectStart;
  readonly attribute unsigned long long connectEnd;
  readonly attribute unsigned long long secureConnectionStart;
  readonly attribute unsigned long long requestStart;
  readonly attribute unsigned long long responseStart;
  readonly attribute unsigned long long responseEnd;
  readonly attribute unsigned long long domLoading;
  readonly attribute unsigned long long domInteractive;
  readonly attribute unsigned long long domContentLoadedEventStart;
  readonly attribute unsigned long long domContentLoadedEventEnd;
  readonly attribute unsigned long long domComplete;
  readonly attribute unsigned long long loadEventStart;
  readonly attribute unsigned long long loadEventEnd;
};

It full description from MDN.

But you can't listen changing of performance.timing object.