倾听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对象。