Chrome Dev Tools 之 Performance

Chrome Dev Tools 之 Performance

作为前端开发，肯定对 Chrome 的 dev tools 不陌生，除了日常 Debug，还提供了一个非常强大的功能：performance 用做性能分析。

window.performance 提供了一组精确的数据，配合数据上报即可实现简单的性能统计。

1. 属性字段

首先可以打开官方提供的测试页：<https://googlechrome.github.io/devtools-samples/jank/>，在 Chrome 控制台下输入 window.performance 即可得到 performance 属性字段。

01.png

2. 常用性能数据指标计算

02.png

封装常用性能指标统计函数

3. 其他 api

3.1 performance.getEntries()

返回值为所有资源的加载情况的数组，除了 performance.timing 中包含的部分属性，新增四个属性：

封装获取对某个资源的加载情况：

3.2 performance.now() / performance.mark()

精确计算程序执行时间，performance.now() 返回以微秒为单位的时间，更加精准，而且 Date.now() 可能受系统时间影响且可能阻塞，而 performance.now() 输出的是相对于 performance.timing.navigationStart (页面初始化) 的时间，而 performance.mark() 则可以在程序中进行时间打点存储，以便后面分析。

performance.now()

performance.mark()

使用 measure 计算 domReady 时间

3.3 performance.memory

查看浏览器内存情况，包含：

1. jsHeapSizeLomit：内存大小限制
2. totalJSHeadSize：可使用的内存
3. userdJSHeadSize：已使用的内存

参考：

https://developers.google.cn/web/tools/chrome-devtools/network/understanding-resource-timing