就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. Web API
  3. 导航计时 API

在此页

导航计时 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.

接口

性能
window.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 性能 实例。

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 ).

规范

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

浏览器兼容性

Window.performance.timing

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据
桌面 移动
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

图例

完整支持

完整支持

弃用。不要用于新网站。

弃用。不要用于新网站。

元数据

  • 最后修改：
  1. 导航计时 API
  2. 指南
    1. 使用导航计时
  3. 接口
    1. 性能
    2. PerformanceNavigation
    3. PerformanceTiming
    4. PerformanceNavigationTiming
  4. 特性
    1. Window.performance