使用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

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