window.performence性能监控

window.performance 接口可以获取到当前页面中与性能相关的信息

 

1、performance.navigation：提供了在指定的时间段里发生的操作相关信息，包括页面是加载还是刷新、发生了多少次重定向等等

引用：https://www.jianshu.com/p/1355232d525a

redirectCount：如果有重定向的话，页面通过几次重定向跳转而来，默认为0；

type：该值的含义表示的页面打开的方式

• 0（TYPE_NAVIGATE）：表示正常进入该页面(非刷新、非重定向)。
• 1（TYPE_RELOAD）：表示通过 window.location.reload 刷新的页面。如果我现在刷新下页面后，再来看该值就变成1了。
• 2（TYPE_BACK_FORWARD ）：表示通过浏览器的前进、后退按钮进入的页面。如果我此时先前进下页面，再后退返回到该页面后，查看打印的值，发现变成2了。
• 255（TYPE_RESERVED）：表示非以上的方式进入页面的

 

2、performance.timing：对象包含延迟相关的性能信息

 

 页面加载各个时间点：

　　卸载上一页面；startTime；redirectStart重定向开始（若需要，则还有上一页面的unloadEvent）；fetchStart准备请求开始；App cache缓存检查；如果没有缓存，则DNS查询，domainLookup域名解析时间；TCP连接connect与secureConnect；request开始请求；response响应；dom解析domInteractive；dom加载domContentLoad；loadEvent时间加载

 

 

性能优化时间计算：

• DNS查询耗时 = domainLookupEnd - domainLookupStart
• TCP链接耗时 = connectEnd - connectStart
• request请求耗时 = responseEnd - responseStart
• 解析dom树耗时 = domComplete - domInteractive
• 白屏时间 = domloadng - fetchStart
• 请求请求耗时 = responseEnd - responseStart
• domready时间 = domContentLoadedEventEnd - fetchStart
• onload时间 = loadEventEnd - fetchStart

 

3、Resource timing API：可以获取和分析应用资源加载的详细网络计时数据，应用程序可以使用时间度量标准来确定加载特定资源所需要的时间

　　performance.getEntries

 

 

 

4、性能优化

　　4.1、网页css资源尽量内联，不要外联，动态加载需要多次请求

　　4.2、重定向优化：重定向会耗时，304缓存

　　4.3、DNS优化：减少DNS请求数、DNS预获取

　　4.4、TCP优化：减少HTTP请求数、http1.1响应头Connection: keep-alive网页打开后不马上关闭连接，长链接（http1.0为短链接，一次网页经历三次握手四次挥手）

　　4.5：渲染优化：直构HTMl页面，少用js渲染