侦听 HTML 个渲染进程事件

Question

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

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

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

实际上，我正在寻找 devtools timeline 中显示的信息，但是是以正式格式。

我认为没有标准化模型，但可能某些浏览器允许侦听这些事件。

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

满了description from MDN.

但是你无法监听 performance.timing 对象的变化。

侦听 HTML 个渲染进程事件

Listen for HTML rendering process events

html

javascript

browser