高标准精度时候(High Resolution Time)范例定义了
Performance
接口,支撑运用程序(applications)内的客户端耽误丈量。
Date 对象示意自1970-01-01起的毫秒精度时候。在实践中,会受制于时钟偏移(clock skew)和体系时钟调解(adjustment of the system clock),所以时候值能够不能保证一直是在增添的,比方:
var mark_start = Date.now();
doTask(); // Some task
var duration = Date.now() - mark_start;
duration 能够 >0,<0,=0。
对一些须要盘算网页加载时候、剧本执行时候、动画时候或是须要更高准确度等状况就不太够了。
为了保证单调增进(monotonically increasing)且更高准确度的时候值,Performace 接口定义了 DOMHighResTimeStamp
范例,performance.now
要领,performance.timeOrigin
属性。
DOMHighResTimeStamp
单元是毫秒,准确到5微秒(0.005 ms),假如由于硬件或软件的限定, User Agent 不能准确到微秒,则会显现准确到1ms。
typedef double DOMHighResTimeStamp;
Time Origin
盘算时候的起始点,
The time origin is the time value from which time is measured:
If the global object is a
Window
object, the time origin MUST be equal to:
- the time when the browsing context(阅读上下文) is first created if there is no previous document;(注:在一个 Web 阅读器内,一个标签页或窗口常包括一个阅读上下文,如一个 iframe 或一个 frameset 内的多少 frame。)
- otherwise, the time of the user confirming the navigation during the previous document’s prompt to unload algorithm, if a previous document exists and if the confirmation dialog was displayed;
- otherwise, the time of starting the navigation responsible for loading the Window object’s newest Document object.
- If the global object is a
WorkerGlobalScope
object, the time origin MUST be equal to the official moment of creation of the worker.- Otherwise, the time origin is undefined.
在 Chrome DevTools 控制台打印 performance
:
{
navigation: {type: 0, redirectCount: 0}
timeOrigin: 1555386564177.783
timing: {
connectEnd: 1555386564181
connectStart: 1555386564181
domComplete: 1555386564345
domContentLoadedEventEnd: 1555386564322
domContentLoadedEventStart: 1555386564318
domInteractive: 1555386564317
domLoading: 1555386564286
domainLookupEnd: 1555386564181
domainLookupStart: 1555386564181
fetchStart: 1555386564181
loadEventEnd: 1555386564345
loadEventStart: 1555386564345
navigationStart: 1555386564177
redirectEnd: 0
redirectStart: 0
requestStart: 1555386564181
responseEnd: 1555386564291
responseStart: 1555386564181
secureConnectionStart: 0
unloadEventEnd: 0
unloadEventStart: 0
}
}
Performance 接口
[Exposed=(Window,Worker)]
interface Performance : EventTarget {
clearMarks: ƒ clearMarks()
clearMeasures: ƒ clearMeasures()
void clearResourceTimings();
PerformanceEntryList getEntries();
PerformanceEntryList getEntriesByType(DOMString type);
PerformanceEntryList getEntriesByName(DOMString name, optional DOMString type);
mark: ƒ mark()
measure: ƒ measure()
memory: (...)
readonly attribute PerformanceNavigation navigation;
DOMHighResTimeStamp now();
attribute EventHandler onresourcetimingbufferfull;
void setResourceTimingBufferSize(unsigned long maxSize);
readonly attribute DOMHighResTimeStamp timeOrigin;
readonly attribute PerformanceTiming timing;
[Default] object toJSON();
};
performance 属性
partial interface WindowOrWorkerGlobalScope {
[Replaceable]
readonly attribute Performance performance;
};
比方 window.performance
,
interface Performance {
readonly attribute PerformanceTiming timing;
readonly attribute PerformanceNavigation navigation;
};
partial interface Window {
[Replaceable] readonly attribute Performance performance;
};
PerformanceTiming 接口
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;
};
- DNS剖析:timing.domainLookupEnd – timing.domainLookupStart
- 竖立衔接:timing.connectEnd – timing.connectStart
- 发送要求:timing.responseStart – timing.requestStart
- 吸收要求:timing.responseEnd – timing.responseStart
- 剖析DOM树:timing.domInteractive – timing.domLoading
- 页面加载完成:timing.domContentLoadedEventStart – timing.domInteractive
- DOMContentLoaded事宜耗时:
timing.domContentLoadedEventEnd – timing.domContentLoadedEventStart
- DOM加载完成:timing.domComplete – timing.domContentLoadedEventEnd
- DOMLoad事宜耗时:timing.loadEventEnd – timing.loadEventStart
PerformanceNavigation 接口
interface PerformanceNavigation {
const unsigned short TYPE_NAVIGATE = 0;
const unsigned short TYPE_RELOAD = 1;
const unsigned short TYPE_BACK_FORWARD = 2;
const unsigned short TYPE_RESERVED = 255;
readonly attribute unsigned short type;
readonly attribute unsigned short redirectCount;
};
- TYPE_NAVIGATE (0)
经由过程点击链接、书签、表单提交、剧本、阅读器地点栏输入地点接见
The page was accessed by following a link, a bookmark, a form submission, or a script, or by typing the URL in the address bar. - TYPE_RELOAD (1)
经由过程点击革新按钮或是Location.reload()
接见
The page was accessed by clicking the Reload button or via the Location.reload() method. - TYPE_BACK_FORWARD (2)
经由过程页面行进退却接见
The page was accessed by navigating into the history. - TYPE_RESERVED (255)
其他体式格局
Any other way.
PerformanceEntry 接口
PerformanceEntry 对象封装了作为机能时候线(performance timeline)一部分的单个机能指标。
[Exposed=(Window,Worker)]
interface PerformanceEntry {
readonly attribute DOMString name;
readonly attribute DOMString entryType;
readonly attribute DOMHighResTimeStamp startTime;
readonly attribute DOMHighResTimeStamp duration;
[Default] object toJSON();
};
partial interface Performance {
PerformanceEntryList getEntries ();
PerformanceEntryList getEntriesByType (DOMString type);
PerformanceEntryList getEntriesByName (DOMString name, optional DOMString type);
};
typedef sequence<PerformanceEntry> PerformanceEntryList;
- name:PerformanceEntry 对象标识符,不须要唯一(unique)。
- entryType:该 PerformanceEntry 对象示意的接口的范例。
- startTime:该机能器量的第一个纪录时候戳的时候值。
- duration:纪录时候,即纪录最先到完毕的时候。
PerformanceEntry 实例会是以下接口实例之一:
- PerformanceMark
- PerformanceMeasure
- PerformanceFrameTiming
- PerformanceNavigationTiming
- PerformanceResourceTiming
- PerformancePaintTiming
比方在 Chrome DevTools 的控制台打印 performance.getEntries()
,
PerformanceNavigationTiming
[Exposed=Window]
interface PerformanceNavigationTiming : PerformanceResourceTiming {
readonly attribute DOMHighResTimeStamp unloadEventStart;
readonly attribute DOMHighResTimeStamp unloadEventEnd;
readonly attribute DOMHighResTimeStamp domInteractive;
readonly attribute DOMHighResTimeStamp domContentLoadedEventStart;
readonly attribute DOMHighResTimeStamp domContentLoadedEventEnd;
readonly attribute DOMHighResTimeStamp domComplete;
readonly attribute DOMHighResTimeStamp loadEventStart;
readonly attribute DOMHighResTimeStamp loadEventEnd;
readonly attribute NavigationType type;
readonly attribute unsigned short redirectCount;
[Default] object toJSON();
};
{
connectEnd: 3.8349999995261896
connectStart: 3.8349999995261896
decodedBodySize: 74229
domComplete: 336.69000000008964
domContentLoadedEventEnd: 130.1899999998568
domContentLoadedEventStart: 129.47499999791034
domInteractive: 129.42000000111875
domainLookupEnd: 3.8349999995261896
domainLookupStart: 3.8349999995261896
duration: 339.76500000062515
encodedBodySize: 18430
entryType: "navigation"
fetchStart: 3.8349999995261896
initiatorType: "navigation"
loadEventEnd: 339.76500000062515
loadEventStart: 336.72999999907915
name: "https://developer.mozilla.org/en-US/docs/Web/API/Performance_API"
nextHopProtocol: "h2"
redirectCount: 0
redirectEnd: 0
redirectStart: 0
requestStart: 5.089999998745043
responseEnd: 15.745000000606524
responseStart: 5.395000000135042
secureConnectionStart: 0
serverTiming: []
startTime: 0
transferSize: 0
type: "back_forward"
unloadEventEnd: 16.714999997930136
unloadEventStart: 16.709999999875436
workerStart: 0
}
PerformanceResourceTiming
检索和剖析收集加载运用资本(比方 link/script/iframe标签、css中url()
等)的细致收集计时数据。
[Exposed=(Window)]
interface PerformanceResourceTiming : PerformanceEntry {
readonly attribute DOMString initiatorType;
readonly attribute DOMHighResTimeStamp redirectStart;
readonly attribute DOMHighResTimeStamp redirectEnd;
readonly attribute DOMHighResTimeStamp fetchStart;
readonly attribute DOMHighResTimeStamp domainLookupStart;
readonly attribute DOMHighResTimeStamp domainLookupEnd;
readonly attribute DOMHighResTimeStamp connectStart;
readonly attribute DOMHighResTimeStamp connectEnd;
readonly attribute DOMHighResTimeStamp secureConnectionStart;
readonly attribute DOMHighResTimeStamp requestStart;
readonly attribute DOMHighResTimeStamp responseStart;
readonly attribute DOMHighResTimeStamp responseEnd;
serializer = {inherit, attribute};
};
{
connectEnd: 403.1199999990349
connectStart: 403.1199999990349
decodedBodySize: 33808
domainLookupEnd: 403.1199999990349
domainLookupStart: 403.1199999990349
duration: 1.6250000007858034
encodedBodySize: 33808
entryType: "resource"
fetchStart: 403.1199999990349
initiatorType: "link"
name: "https://developer.mozilla.org/static/fonts/locales/ZillaSlab-Regular.subset.bbc33fb47cf6.woff2"
nextHopProtocol: "h2"
redirectEnd: 0
redirectStart: 0
requestStart: 404.0950000016892
responseEnd: 404.7449999998207
responseStart: 404.3100000017148
secureConnectionStart: 0
serverTiming: []
startTime: 403.1199999990349
transferSize: 0
workerStart: 0
}
PerformancePaintTiming
网页构建时期有关“绘制(paint)”(也称为“衬着(render)”)操纵的计时信息。 “绘制(paint)”是指将衬着树转换为屏幕上的像素。
interface PerformancePaintTiming : PerformanceEntry {};
{
duration: 0
entryType: "paint"
name: "first-paint"
startTime: 667.9050000020652
}
参考资料: