我正在阅读一些关于渲染过程的文章:
https://developers.google.com/web/fundamentals/performance/ http://www.sitepoint.com/optimizing-critical-rendering-path/
我希望能够监听渲染过程中发生的步骤事件,能够知道浏览器何时开始(和结束)处理 HTML 文档,何时将 css 规则添加到 CSSOM树,...
实际上,我正在查找 devtools timeline 中显示的信息, 但采用正式格式。
我认为没有标准化模型,但可能某些浏览器允许监听这些事件。
最佳答案
您可以只使用 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;
};
但是你不能监听 performance.timing
对象的变化。
关于javascript - 监听 HTML 渲染进程事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29404245/