![](https://csdnimg.cn/release/download_crawler_static/88809584/bg6.jpg)
5
一个页面结束,到下一个页面从开始加载到完成加载的整个过程。基于这个模型,我们可以获
取到页面加载过程中各个阶段的耗时情况,然后分析出页面加载性能。
通过
window.performance.timing
这个接口获取加载过程模型中各个阶段的耗时数据:
1. var timing = window.performance.timing;
2.
3.
// 返回数据格式
4. {
5.
navigationStart, // 同一个浏览器上下文中,上一个文档结束时的时间戳。如果
没有上一个文档,这个值会和 fetchStart 相同。
6.
unloadEventStart, // 上一个文档 unload 事件触发时的时间戳。如果没有上一
个文档,为 0。
7.
unloadEventEnd, // 上一个文档 unload 事件结束时的时间戳。如果没有上一个文
档,为 0。
8.
redirectStart, // 表示第一个 http 重定向开始时的时间戳。如果没有重定向或
者有一个非同源的重定向,为 0。
9.
redirectEnd, // 表示最后一个 http 重定向结束时的时间戳。如果没有重定向或
者有一个非同源的重定向,为 0。
10.
fetchStart, // 表示浏览器准备好使用 http 请求来获取文档的时间戳。这个时间
点会在检查任何缓存之前。
11.
domainLookupStart, // 域名查询开始的时间戳。如果使用了持久连接或者本地有
缓存,这个值会和 fetchStart 相同。
12.
domainLookupEnd, // 域名查询结束的时间戳。如果使用了持久连接或者本地有缓
存,这个值会和 fetchStart 相同。
13.
connectStart, // http 请求向服务器发送连接请求时的时间戳。如果使用了持久
连接,这个值会和 fetchStart 相同。
14.
connectEnd, // 浏览器和服务器之前建立连接的时间戳,所有握手和认证过程全部
结束。如果使用了持久连接,这个值会和 fetchStart 相同。
15.
secureConnectionStart, // 浏览器与服务器开始安全链接的握手时的时间戳。如
果当前网页不要求安全连接,返回 0。
16.
requestStart, // 浏览器向服务器发起 http 请求(或者读取本地缓存)时的时间
戳,即获取 html 文档。
17.
responseStart, // 浏览器从服务器接收到第一个字节时的时间戳。
18.
responseEnd, // 浏览器从服务器接受到最后一个字节时的时间戳。
19.
domLoading, // dom 结 构 开 始 解 析 的 时 间 戳 , document.readyState 的 值
为 loading。
20.
domInteractive, // dom 结 构 解 析 结 束 , 开 始 加 载 内 嵌 资 源 的 时 间 戳 ,
document.readyState 的状态为 interactive。
21.
domContentLoadedEventStart, // DOMContentLoaded 事件触发时的时间戳,所
有需要执行的脚本执行完毕。
22.
domContentLoadedEventEnd, // DOMContentLoaded 事件结束时的时间戳