前端性能优化监控之performance API

前端开发完之后，业务说太卡，你优化吧。我打开一个离职的同事的代码，复用到是用的挺好的，不过把一个城市级联里面下载数据的环节封装到组件中，页面中有8个地方都用到了，打开网络请求，真的就下载了8次2m的城市数据。幸好我们网络情况还不错，也就每次页面打开前卡半分钟而已，呵呵了。
在前后端分离的大环境下，前端优化也越来越重要。无论从视觉、性能、页面逻辑上进行优化，都可以比较直观的提升用户体验。当然，优化的前提是知道我哪里慢了，performance api就是进行这样的监控的。
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 方法clearmarks() 清理打点标记clearmeasures() 清理连线标记clearresourcetimings() 重置缓冲区域大小getentries() 获取所有资源分节点加载时间getentriesbyname() 通过name获取所有资源分节点加载时间getentriesbytype() 通过type获取所有资源分节点加载时间mark() 增加打点标记measure() 增加打点连线标记now() 从获取基准时间到当前时间的间隔，精确到微秒百万分之一秒，呃setresourcetimingbuffersize() 设置缓冲区域大小
chrome开发这工具的performance面板本地开发调试的话，chrome中提供了关于performance情况更加详细的报表数据，精确到每个资源，每个时间点页面的渲染效果，后续就可以针对环节进行专项优化（像我这种密集恐惧的人，看的还有点慌呢）
使用上的性能面板的时候，如果你的chrome上安装了很多插件的话，建议打开无痕模式进行调试。
文末关于performanceapi是建立在chrome浏览器的基础上使用的，其他浏览器兼容情况暂时没有去深究。
前端优化，从网络开始请求，到最后渲染结束，中间方方面面的环节，都可以进行很多优化，前端优化雅虎军规依然是优化方向，每一个环节都可以写出来很多文章。


关于网络营销推广大企业都是这么做的
微营销分享：快速成交的四大板块要知晓！
秦皇岛SEO推广怎么做关键词排名呢
国内网站建设的几种风格
网站建设怎样才让你的网站脱颖而出
营销方案,全网营销方案怎么做,新闻营销
公司建设网站提高排名的五个基本方法
政府网站建设有哪些意义