浏览器之性能监控

「以梦为马，逐鹿江湖」

前言

• 使用方式

window.performance.mark("vue-patch-start")
for (var i = 0; i < 1000; i++) {
    console.log("---")
}
window.performance.mark("vue-patch-end")
window.performance.measure('vue-patch', 'vue-patch-start', 'vue-patch-end')

/*-------------------------------------------------------------------------*/

window.performance.mark("vue-compile-start")
for (var i = 0; i < 10000; i++) {
    console.log("---")
}
window.performance.mark("vue-compile-end")
window.performance.measure('vue-compile', 'vue-compile-start', 'vue-compile-end')

• 浏览器控制台

window.performance API的详解

• performance.now()

「注：vue框架有应用到此方法」

该方法返回一个精确到毫秒的DOMHighResTimeStamp（举个栗子：performance.now() = 6357668.559999991），返回值表示为从time origin之后到当前调用时经过的时间。

• performance.mark(name)

「注：vue框架有应用到此方法」

该方法在浏览器的性能缓冲区中使用给定名称添加一个timestamp（时间戳）。（注：相当于用一个标记来记录一个时间戳，供需要时使用）。

• performance.clearMarks(name)

「注：vue框架有应用到此方法」

该方法可以从浏览器的performance entry缓存中移除声明的标记（相当于用mark定义的标记）。参数name可以省略，如果省略，那么所有带有entry type这类标记的都会被移除。

• performance.measure(name, startMark, endMark)

「注：vue框架有应用到此方法」

该方法在浏览器性能记录缓存中创建了一个名为时间戳的记录来记录两个特殊标志位（通常称为开始标志和结束标志）。被命名的时间戳称为一次测量(measure)。通俗点说，name为记录的名称，startMark就是mark定义的开始标签，endMark则是mark定义的结束标签。

• performance.timing

只读属性。返回一个PerformanceTiming对象，包含了一些性能信息。如：{ connectEnd: 1594901670239, connectStart: 1594901670239 }

• performance.timeOrigin

只读属性。返回一个表示the performance measurement性能开始时间的高精度timestamp时间戳