前端性能监控之performance API

前端开发完之后，业务说太卡，你优化吧。我打开一个离职的同事的代码，复用到是用的挺好的，不过把一个城市级联里面下载数据的环节封装到组件中，页面中有8个地方都用到了，打开网络请求，真的就下载了8次2M的城市数据。幸好我们网络情况还不错，也就每次页面打开前卡半分钟而已，呵呵了。

在前后端分离的大环境下，前端优化也越来越重要。无论从视觉、性能、页面逻辑上进行优化，都可以比较直观的提升用户体验。当然，优化的前提是知道我哪里慢了，performance API就是进行这样的监控的。

性能监控

直接在控制打印performance就可以得到所有性能监测的信息了，里面包含几个部分。

• memory（Chrome中内存）

jsHeapSizeLimit: 内存大小限制
totalJSHeapSize: 可使用内存
usedJSHeapSize: 已使用内存

• navigation（上下文网页导航）
• onresourcetimingbufferfull（资源时间性能缓冲区事件钩子）
• timeOrigin（基准时间）
• timing（节点时间）

通过拆解计算各个节点时间的间隔就是每个环节的使用情况了。

下面放一个页面函数显示当前页面的各阶段加载的时间显示。

function performanceTest() {
 let timing = performance.timing,
 readyStart = timing.fetchStart - timing.navigationStart,
 redirectTime = timing.redirectEnd - timing.redirectStart,
 appcacheTime = timing.domainLookupStart - timing.fetchStart,
 unloadEventTime = timing.unloadEventEnd - timing.unloadEventStart,
 lookupDomainTime = timing.domainLookupEnd - timing.domainLookupStart,
 connectTime = timing.connectEnd - timing.connectStart,
 whiteScreenTime = timing.responseStart - timing.navigationStart,
 requestTime = timing.responseEnd - timing.requestStart,
 initDomTreeTime = timing.domInteractive - timing.responseEnd,
 domReadyTime = timing.domComplete - timing.domInteractive,
 loadEventTime = timing.loadEventEnd - timing.loadEventStart,
 loadTime = timing.loadEventEnd - timing.navigationStart;
 console.log('准备新页面时间耗时: ' + readyStart);
 console.log('redirect 重定向耗时: ' + redirectTime);
 console.log('Appcache 耗时: ' + appcacheTime);
 console.log('unload 前文档耗时: ' + unloadEventTime);
 console.log('DNS 查询耗时: ' + lookupDomainTime);
 console.log('TCP连接耗时: ' + connectTime);
 console.log('白屏时间: ' + whiteScreenTime);
 console.log('request请求耗时: ' + requestTime);
 console.log('请求完毕至DOM加载: ' + initDomTreeTime);
 console.log('解析DOM树耗时: ' + domReadyTime);
 console.log('load事件耗时: ' + loadEventTime);
 console.log('加载时间耗时: ' + loadTime);
}

performance 方法

1. clearMarks() 清理打点标记
2. clearMeasures() 清理连线标记
3. clearResourceTimings() 重置缓冲区域大小
4. getEntries() 获取所有资源分节点加载时间
5. getEntriesByName() 通过Name获取所有资源分节点加载时间
6. getEntriesByType() 通过Type获取所有资源分节点加载时间
7. mark() 增加打点标记
8. measure() 增加打点连线标记
9. now() 从获取基准时间到当前时间的间隔，精确到微秒百万分之一秒，呃
10. setResourceTimingBufferSize() 设置缓冲区域大小

数据埋点

埋点中除了业务相关之外的性能埋点，可以自行编辑，也可以通过上面的相关API进行更加精确的时间计算。

chrome开发这工具的Performance面板

本地开发调试的话，chrome中提供了关于Performance情况更加详细的报表数据，精确到每个资源，每个时间点页面的渲染效果，后续就可以针对环节进行专项优化（像我这种密集恐惧的人，看的还有点慌呢）

使用上的性能面板的时候，如果你的chrome上安装了很多插件的话，建议打开无痕模式进行调试。

文末

关于performanceAPI是建立在chrome浏览器的基础上使用的，其他浏览器兼容情况暂时没有去深究。

前端优化，从网络开始请求，到最后渲染结束，中间方方面面的环节，都可以进行很多优化，前端优化雅虎军规依然是优化方向，每一个环节都可以写出来很多文章。