初识performance对象

初识 performance 对象

周末的时候,看了一下性能优化相关的文章,让我眼前一亮的是 window 下的 performance 对象

performance 是个查看各项加载时间的对象,大部分都是只读属性,用了它就不需要手动打点了

在控制台打印了一下,看这个对象的结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
> performance
{
memory:{
jsHeapSizeLimit:number,
totalJSHeapSize:number,
usedJSHeapSize:number,
},
navigation:{
redirectCount: number,
type: number,
},
timeOrigin:number,
timing: {
connectStart:number,
connectEnd:number,
domComplete:number,
domContentLoadedEventStart:number,
domContentLoadedEventEnd:number,
domInteractive:number,
domLoading:number,
domainLookupStart:number,
domainLookupEnd:number,
fetchStart:number,
loadEventStart:number,
loadEventEnd:number,
navigationStart:number,
redirectStart:number,
responseEnd:number,
secureConnectionStart:number,
unloadEventStart:number,
unloadEventEnd:number
}
}

很多属性都是顾名思义,可以看到很多东西加载的用时

navigation 中有一个重定向次数

我们知道网站的重定向会影响性能的,所以这个属性也很方便查看

关于 timing 下的属性

我们可以用 navigationStart 配合一些其他的 End 来做减法,看到很多具体的时间段的发生

比如我们在 body 末尾的 script 里面用 Date.now() - window.performance.timing.navigationStart

加载到代码执行处的当前时间减去加载的起始时间

这样就可以拿到一个加载过程的毫秒数,也就是首屏时间,

还可以在 window.onload 里面来做这个计算拿时间等等,总之这个对象标准而又方便,为我们前端提供了很大的帮助

如果内容对您有帮助,不妨请作者喝杯咖啡