Getting started in window.performance

如何理解 window.performance

window.performance 是由 W3C 性能小组提出的用于精确计算网页性能数据的特性，它返一个 Performance 对象，支持 IE9 以上的所有浏览器，这里给出对象的原型：

Performance.timing

返回 PerformanceTiming 对象，包含延迟相关的性能信息。

Performance.navigation

返回 PerformanceNavigation 对象，该对象表示在当前给定浏览上下文中网页导航的类型（TYPE_BACK_FORWARD，TYPE_NAVIGATE，TYPE_RELOAD，TYPE_RESERVED）以及次数。

performance.memory

在 Chrome 中添加的一个非标准扩展，返回内存占用的基本信息。（尽量避免使用非标准化API）

Performance.timeOrigin

返回关于性能评估的开始时间（高分辨率时间戳）

Performance.onresourcetimingbufferfull

当 resourcetimingbufferfull 事件触发时，作为事件处理回调

function buffer_full_handler(event) {
    console.log('[Warning]: Resource Timing Buffer is full');
    performance.setResourceTimingBufferSize(200); // size >= 150
}

function initPerformanceMeasurement() {
    if (performance === undefined) {
        console.log("[Warning]: Performance interface is not supported");
        return
    }
    // Set a callback if the resource buffer becomes filled
    performance.onresourcetimingbufferfull = buffer_full_handler;
}

document.body.onload = initPerformanceMeasurement;

通常建议 performance entry 应该满足至少 150 个以上

为何使用 Performance

通常熟悉 Chrome 开发者工具的朋友都会在开发环境下用到网络面板的相关操作，当我们开启记录功能时，就会实时传回关于网页响应阶段的性能数据，但当我们需要统计分析用户打开网页时的性能，因此我们将 performance 原始信息或通过简单计算后的信息上传到服务器，配合其他网络属性（例如 HTTP 请求头信息），就可以很好地进行性能上报。

项目中的应用

1.判断是否刷新页面

const performance = window.performance

if(performance.navigation.type === 1) {
    console.log('Page was not reloaded.')
} else {
    console.log('Page was reloaded.')
}

这里的 performance.navigation.type 返回一个整数值，表示网页的加载来源，有以下几种情况：

返回值：0
类型常量：performance.navigation.TYPE_NAVIGATENEXT
描述：网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载

返回值：1
类型常量：performance.navigation.TYPE_RELOAD
描述：网页通过 刷新 按钮或者 location.reload() 方法加载

返回值：2
类型常量：performance.navigation.TYPE_BACK_FORWARD
描述；网页通过 前进 或 后退 按钮加载

返回值：255
类型常量：performance.navigation.TYPE_UNDEFINED
描述：网页通过其它 任何可执行的来源 加载

此外，通过 performance.navigation.redirectCount 可以获取当前网页重定向跳转的次数

2.测试函数执行时间

function fac() {
    return n === 1 ? 1 : n * arguments.callee(n - 1)
}

let t1 = window.performance.now()
fac(100)
let t2 = window.performance.now()
console.log('diff: ', t2 - t1, ' ms')

// output: diff: 0.14500000001862645 ms

未完待续...