使用window.performance分析web前端性能

performance支持多种类型的Timing

常见的Timing有以下几类:

1. 页面加载 Navigation timing

该对象能够帮助网站开发者检测真实用户数据(RUM),例如带宽、延迟或主页的整体页面加载时间。
用performance.timing可以取到到该对象。

这两个API非常有用,可以帮助我们获取页面的Domready时间、onload时间、白屏时间等,以及单个页面资源在从发送请求到获取到rsponse各阶段的性能参数。
使用这两个API时需要在页面完全加载完成之后才能使用,最简单的办法是在window.onload事件中读取各种数据,因为很多值必须在页面完全加载之后才能得出。

2. 资源加载 Resource Timing API

这个主要用来获取到单个静态资源(Js,CSS,图片,音频视频等等)从开始发出请求到获取响应之间各个阶段的Timing

通过performance.getEntries()可以获取所有静态资源的数组列表,点开后显示了,某一个请求的相关参数有name,type,时间等等。
此外还有,performance.getEntriesByName(),performance.getEntriesByType(),获取单个资源和某类型资源的加载时间

3. 内存使用情况 performance.memory

jsHeapSizeLimit: js堆内存大小限制

totalJSHeapSize: totalJSHeapSize表示当前js堆栈内存总大小

usedJSHeapSize: usedJSHeapSize表示所有被使用的js堆栈内存,usedJSHeapSize不能大于totalJSHeapSize,如果大于,有可能出现了内存泄漏。

4. 用户行为 performance.navigation 

(1)performance.navigation.type

该属性返回一个整数值,表示网页的加载来源,可能有以下4种情况:

0:网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载,相当于常数performance.navigation.TYPE_NAVIGATENEXT。

1:网页通过“重新加载”按钮或者location.reload()方法加载,相当于常数performance.navigation.TYPE_RELOAD。

2:网页通过“前进”或“后退”按钮加载,相当于常数performance.navigation.TYPE_BACK_FORWARD。

255:任何其他来源的加载,相当于常数performance.navigation.TYPE_UNDEFINED。

(2)performance.navigation.redirectCount

表示当前网页经过了多少次重定向跳转。

原文地址:https://www.cnblogs.com/mengff/p/12880570.html