侦听HTML呈现过程事件

Question

我正在阅读一些关于渲染过程的文章:

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

我希望能够监听渲染过程中发生的步骤的事件,以便能够知道当css规则添加到CSSOM树时浏览器何时开始(并完成)处理HTML文档. ..

实际上,我正在寻找devtools时间轴中显示的信息,但是采用正式格式.

我不认为有一个标准化的模型,但可能是某些浏览器允许监听这些事件.

Answer 1

您可以使用Navigation Timing API,IDL接口的只读属性:

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;
};

它来自MDN的完整描述.

但你不能听performance.timing对象的变化.