Navigation Timing API

Navigation Timing API provides data that can be used to measure the performance of a web site. Unlike JavaScript-based libraries that have historically been used to collect similar information, the Navigation Timing API can be much more accurate and reliable.

This article currently describes Navigation Timing Level 1. There is a specification for Level 2, but it is not yet covered here.

概念和用法

You can use the Navigation Timing API to gather performance data on the client side, which you can then transmit to a server using XMLHttpRequest or other techniques.

This API lets you measure data that was previously difficult to obtain, such as the amount of time needed to unload the previous page, how long domain lookups take, the total time spent executing the window's load handler, and so forth.

接口

Performance
window.performance property returns a Performance object. While this interface is defined by the High Resolution Time API, the Navigation Timing API adds two properties: timing and navigation , of the types below.
PerformanceNavigationTiming
Provides methods and properties to store and retrieve metrics regarding the browser's document navigation events. For example, this interface can be used to determine how much time it takes to load or unload a document.
PerformanceTiming
Used as the type for the value of timing , objects of this type contain timing information that can provide insight into web page performance.
PerformanceNavigation
The type used to return the value of navigation , which contains information explaining the context of the load operation described by this Performance 实例。

The Navigation Timing API can be used to gather performance data on the client side to be sent to a server via XHR as well as measure data that was very difficult to measure by other means such as time to unload a previous page, domain look up time, window.onload total time, etc.

范例

计算页面总加载时间

To compute the total amount of time it took to load the page, you can use the following code:

const perfData = window.performance.timing;
const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
					

This subtracts the time at which navigation began ( navigationStart ) from the time at which the load event handler returns ( loadEventEnd ). This gives you the perceived page load time.

计算请求响应时间

You can calculate the time elapsed between the beginning of a request and the completion of getting the response using code like this:

const connectTime = perfData.responseEnd - perfData.requestStart;
					

Here, the time at which the request was initiated ( requestStart ). from the time at which the response was finished being received ( responseEnd ).

计算页面渲染时间

As another example of an interesting piece of data you can obtain using the Navigation Timing API that you can't otherwise easily get, you can get the amount of time it took to render the page:

const renderTime = perfData.domComplete - perfData.domLoading;
					

This is obtained by starting with the time at which loading of the DOM and its dependencies is complete ( domComplete ) and subtracting from it the time at which parsing of the DOM began ( domLoading ).

规范

规范 状态 Comment
Navigation Timing Level 2 工作草案 添加 PerformanceNavigationTiming
导航计时 Recommendation 初始定义。

浏览器兼容性

Window.performance.timing

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
PerformanceTiming
弃用
Chrome 6 Edge 12 Firefox 7 IE 9 Opera 15 Safari 8 WebView Android Yes Chrome Android 18 Firefox Android 7 Opera Android 14 Safari iOS 8 Samsung Internet Android 1.0
connectEnd
弃用
Chrome 6 Edge 12 Firefox 7 IE 9 Opera 15 Safari 11 WebView Android Yes Chrome Android 18 Firefox Android 7 Opera Android 14 Safari iOS 11 Samsung Internet Android 1.0
connectStart
弃用
Chrome 6 Edge 12 Firefox 7 IE 9 Opera 15 Safari 11 WebView Android Yes Chrome Android 18 Firefox Android 7 Opera Android 14 Safari iOS 11 Samsung Internet Android 1.0
domainLookupEnd
弃用
Chrome 6 Edge 12 Firefox 7 IE 9 Opera 15 Safari 11 WebView Android Yes Chrome Android 18 Firefox Android 7 Opera Android 14 Safari iOS 11 Samsung Internet Android 1.0
domainLookupStart
弃用
Chrome 6 Edge 12 Firefox 7 IE 9 Opera 15 Safari 11 WebView Android Yes Chrome Android 18 Firefox Android 7 Opera Android 14 Safari iOS 11 Samsung Internet Android 1.0
domComplete
弃用
Chrome 6 Edge 12 Firefox 7 IE 9 Opera 15 Safari 11 WebView Android Yes Chrome Android 18 Firefox Android 7 Opera Android 14 Safari iOS 11 Samsung Internet Android 1.0
domContentLoadedEventEnd
弃用
Chrome 6 Edge 12 Firefox 7 IE 9 Opera 15 Safari 8 WebView Android Yes Chrome Android 18 Firefox Android 7 Opera Android 14 Safari iOS 8 Samsung Internet Android 1.0
domContentLoadedEventStart
弃用
Chrome 6 Edge 12 Firefox 7 IE 9 Opera 15 Safari 11 WebView Android Yes Chrome Android 18 Firefox Android 7 Opera Android 14 Safari iOS 11 Samsung Internet Android 1.0
domInteractive
弃用
Chrome 6 Edge 12 Firefox 7 IE 9 Opera 15 Safari 11 WebView Android Yes Chrome Android 18 Firefox Android 7 Opera Android 14 Safari iOS 11 Samsung Internet Android 1.0
domLoading
弃用
Chrome 6 Edge 12 Firefox 7 IE 9 Opera 15 Safari 11 WebView Android Yes Chrome Android 18 Firefox Android 7 Opera Android 14 Safari iOS 11 Samsung Internet Android 1.0
fetchStart
弃用
Chrome 6 Edge 12 Firefox 7 IE 9 Opera 15 Safari 11 WebView Android Yes Chrome Android 18 Firefox Android 7 Opera Android 14 Safari iOS 11 Samsung Internet Android 1.0
loadEventEnd
弃用
Chrome 6 Edge 12 Firefox 7 IE 9 Opera 15 Safari 11 WebView Android Yes Chrome Android 18 Firefox Android 7 Opera Android 14 Safari iOS 11 Samsung Internet Android 1.0
loadEventStart
弃用
Chrome 6 Edge 12 Firefox 7 IE 9 Opera 15 Safari 11 WebView Android Yes Chrome Android 18 Firefox Android 7 Opera Android 14 Safari iOS 11 Samsung Internet Android 1.0
navigationStart
弃用
Chrome 6 Edge 12 Firefox 7 IE 9 Opera 15 Safari Yes WebView Android Yes Chrome Android 18 Firefox Android 7 Opera Android 14 Safari iOS Yes Samsung Internet Android 1.0
redirectEnd
弃用
Chrome 6 Edge 12 Firefox 7 IE 9 Opera 15 Safari 11 WebView Android Yes Chrome Android 18 Firefox Android 7 Opera Android 14 Safari iOS 11 Samsung Internet Android 1.0
redirectStart
弃用
Chrome 6 Edge 12 Firefox 7 IE 9 Opera 15 Safari 11 WebView Android Yes Chrome Android 18 Firefox Android 7 Opera Android 14 Safari iOS 11 Samsung Internet Android 1.0
requestStart
弃用
Chrome 6 Edge 12 Firefox 7 IE 9 Opera 15 Safari 11 WebView Android Yes Chrome Android 18 Firefox Android 7 Opera Android 14 Safari iOS 11 Samsung Internet Android 1.0
responseEnd
弃用
Chrome 6 Edge 12 Firefox 7 IE 9 Opera 15 Safari 11 WebView Android Yes Chrome Android 18 Firefox Android 7 Opera Android 14 Safari iOS 11 Samsung Internet Android 1.0
responseStart
弃用
Chrome 6 Edge 12 Firefox 7 IE 9 Opera 15 Safari 11 WebView Android Yes Chrome Android 18 Firefox Android 7 Opera Android 14 Safari iOS 11 Samsung Internet Android 1.0
secureConnectionStart
弃用
Chrome 6 Edge 18 Firefox 56 IE 9 Opera 15 Safari 11 WebView Android Yes Chrome Android 18 Firefox Android 56 Opera Android 14 Safari iOS 11 Samsung Internet Android 1.0
toJSON
弃用
Chrome 44 Edge 12 Firefox 25 IE 9 Opera 32 Safari Yes WebView Android 44 Chrome Android 44 Firefox Android 25 Opera Android 32 Safari iOS Yes Samsung Internet Android 4.0
unloadEventEnd
弃用
Chrome 6 Edge 12 Firefox 7 IE 9 Opera 15 Safari 11 WebView Android Yes Chrome Android 18 Firefox Android 7 Opera Android 14 Safari iOS 11 Samsung Internet Android 1.0
unloadEventStart
弃用
Chrome 6 Edge 12 Firefox 7 IE 9 Opera 15 Safari 11 WebView Android Yes Chrome Android 18 Firefox Android 7 Opera Android 14 Safari iOS 11 Samsung Internet Android 1.0

图例

完整支持
完整支持
弃用。不要用于新网站。
弃用。不要用于新网站。