[TOC] # 基本属性  ## performance.navigation: 页面是加载还是刷新、发生了多少次重定向 ~~~ navigation: PerformanceNavigation redirectCount: 0 type: 0 ~~~ ## performance.timing  <br> ### 阶段 #### 浏览器 * Prompt for unload：提示卸载，即敲下回车瞬间，新页面要被请求时，把旧页面卸载 * redirect：重定向，开始处理URL，判断是否本地重定向 * unload：重定向过程中执行，卸载上一个页面，清除内存和屏幕上的内容 * App cache：本地缓存，如果本地中有所需的文件，直接跳到Processing阶段 <br> #### 网络 * DNS：找到服务器IP，是一个瓶颈，但取决于用户在机器上设置的DNS IP地址 * TCP：建立TCP连接，三次握手 * Request：发送请求 <br> #### 服务器处理 * Response：返回响应 <br> #### 浏览器 * Processing：DOM处理 * onLoad：第一个事件触发 <br> ### 属性 navigationStart：加载起始时间 <br> redirectStart：本地重定向开始时间 unloadEventStart：unload事件触发的时间 unloadEventEnd：unload事件执行完的时间 redirectEnd：本地重定向结束时间 <br> fetchStart：浏览器发起资源请求时，如果有缓存，则返回读取缓存的开始时间 <br> domainLookupStart：查询DNS的开始时间。如果请求没有发起DNS请求，如keep-alive，缓存等，则返回fetchStart domainLookupEnd：查询DNS的结束时间。如果没有发起DNS请求，同上 <br> connectStart：开始建立TCP请求的时间。如果请求是keep-alive，缓存等，则返回domainLookupEnd (secureConnectionStart)：如果在进行TLS或SSL，则返回握手时间 connectEnd：完成TCP链接的时间。如果是keep-alive，缓存等，同connectStart <br> requestStart：请求开始时间 responseStart：响应开始时间 responseEnd：响应结束时间 <br> domLoading：把文本解析为DOM结构 domInteractive：当页面DOM树创建完成后，加载内嵌的资源（图片、css、js） domContentLoaded：表示 DOM 与 CSSOM 皆已准备就绪 如果没有解析器阻塞 JavaScript，DOMContentLoaded 事件会在 domInteractive 之后立即触发 很多 JavaScript 框架会在执行它们自己的逻辑前等待这个事件的触发 domComplete：表示所有的处理都已完成并且所有的附属资源都已经下载完毕 <br> ### 简单用法 这些参数已经非常详细，也很精准，稍作处理就可以得出我们需要的一些关键数字，如： * DNS解析时间： domainLookupEnd - domainLookupStart * TCP建立连接时间： connectEnd - connectStart * **白屏时间**： responseStart - navigationStart * dom渲染完成时间： domContentLoadedEventEnd - navigationStart * 页面onload时间： loadEventEnd - navigationStart <br> <br> ## performance.memory 基本内存使用情况，Chrome 添加的一个非标准扩展 ## performance.timeorigin 性能测量开始时的时间的高精度时间戳 <br> <br> # 提供的 API performance 也提供了多种 API，不同的 API 之间可能会有重叠的部分。 ## PerformanceObserver API 用于检测性能的事件，这个 API 利用了观察者模式。 获取资源信息 [](https://tva1.sinaimg.cn/large/006tNbRwgy1gah5dyhhrtj31g40liq6s.jpg) <br> 监测 长任务 [](https://tva1.sinaimg.cn/large/006tNbRwgy1gah5f4cbcsj30uo0dk76r.jpg) ## Navigation Timing API [https://www.w3.org/TR/navigation-timing-2/](https://www.w3.org/TR/navigation-timing-2/) performance.getEntriesByType("navigation"); <br> [](https://tva1.sinaimg.cn/large/006tNbRwgy1gah5foxbyej30u011ath3.jpg) <br> [](https://tva1.sinaimg.cn/large/006tNbRwgy1gah5g41v1jj318o0dugnt.jpg) <br> 不同阶段之间是连续的吗? —— 不连续 每个阶段都一定会发生吗？—— 不一定 <br> <br> 重定向次数：performance.navigation.redirectCount 重定向耗时: redirectEnd - redirectStart DNS 解析耗时: domainLookupEnd - domainLookupStart TCP 连接耗时: connectEnd - connectStart SSL 安全连接耗时: connectEnd - secureConnectionStart 网络请求耗时 (TTFB): responseStart - requestStart 数据传输耗时: responseEnd - responseStart DOM 解析耗时: domInteractive - responseEnd 资源加载耗时: loadEventStart - domContentLoadedEventEnd 首包时间: responseStart - domainLookupStart 白屏时间: responseEnd - fetchStart 首次可交互时间: domInteractive - fetchStart DOM Ready 时间: domContentLoadEventEnd - fetchStart 页面完全加载时间: loadEventStart - fetchStart http 头部大小： transferSize - encodedBodySize <br> ## Resource Timing API [https://w3c.github.io/resource-timing/](https://w3c.github.io/resource-timing/) performance.getEntriesByType("resource"); [](https://tva1.sinaimg.cn/large/006tNbRwgy1gah5gxga20j31as0u01kx.jpg) [](https://tva1.sinaimg.cn/large/006tNbRwgy1gah5h63g05j31c60le0w9.jpg) ~~~ // 某类资源的加载时间，可测量图片、js、css、XHR resourceListEntries.forEach(resource => { if (resource.initiatorType == 'img') { console.info(`Time taken to load ${resource.name}: `, resource.responseEnd - resource.startTime); } }); ~~~ 这个数据和 chrome 调式工具里 network 的瀑布图数据是一样的。 <br> ## paint Timing API [https://w3c.github.io/paint-timing/](https://w3c.github.io/paint-timing/) 首屏渲染时间、首次有内容渲染时间 [](https://tva1.sinaimg.cn/large/006tNbRwgy1gah5inwonkj30rq0g4acu.jpg) <br> ## User Timing API [https://www.w3.org/TR/user-timing-2/#introduction](https://www.w3.org/TR/user-timing-2/#introduction) 主要是利用 mark 和 measure 方法去打点计算某个阶段的耗时，例如某个函数的耗时等。 <br> ## High Resolution Time API [https://w3c.github.io/hr-time/#dom-performance-timeorigin](https://w3c.github.io/hr-time/#dom-performance-timeorigin) 主要包括 now() 方法和 timeOrigin 属性。 <br> ## Performance Timeline API [https://www.w3.org/TR/performance-timeline-2/#introduction](https://www.w3.org/TR/performance-timeline-2/#introduction) <br> <br> # 参考资料 * [如何进行 web 性能监控？](http://www.alloyteam.com/2020/01/14184/#prettyPhoto) * [Navigation Timing获取页面加载各个阶段所需时间](https://segmentfault.com/a/1190000010209584) * [Navigation Timing](https://www.w3.org/TR/navigation-timing/#dom-performancetiming-dominteractive)