web项目性能非常重要，在开发迭代过程中难免会被忽略，性能会随着产品的迭代而衰减。尤其是移动端，网络一直是很大的瓶颈，但是页面越来越大，功能越来越复杂。没有简单的黄金法则来完成性能优化。我们需要一个性能监控系统来持续监控、评估、警告页面性能状态，发现瓶颈，指导优化工作。1.监控指标前端主要性能指标如下：页面加载时间：PageLoadTime首屏加载时间：Above-the-FoldTime重定向时间：redirectEnd-redirectStartDNS查询时间：domainLookupEnd-domainLookupStartTCP链接耗时：connectEnd-connectStartHTTP请求耗时：responseEnd-responseStart解析dom树耗时：domComplete-domInteractive白屏时间：responseStart-navigationStartDOM就绪耗时：domContentLoadedEventEnd-navigationStartonload时间：loadEventEnd-navigationStart，也就是onload了执行回调函数的时间。另外需要关注接口的调用成功率、接口响应时间、资源加载时间、前端异常捕获等。市面上有很多付费的监控系统，比如阿里的ARMS等，这里就不展开讨论了。如果我们从头开发一个完整的前端监控系统，还是需要一定的时间。再加上可能人手不足，而且大部分都忙于业务发展，所以大多数中小型公司会选择一些第三方付费的监控系统。我们有没有可能快速搭建一个可以在线使用的前端性能系统？答案是肯定的，那就是使用一些开源的前端性能监控系统，加上二次开发。在这里我为你推荐几款。1.performanceKit1.1功能定义前端基础性能监控一般的性能监控只能是比较简单的基础监控，很多更深入复杂的性能监控需要针对特定??的环境、场景、页面设计、曝光等进行定制条件api，并在适当的地方调用它。比如收集SpeedIndex、PerceptualSpeedIndex、VisualCompleteTime（视觉完成）、FirstMeaningfulPaint等指标。1.2npminstallnpminstallperformance-kits--save1.3需要在浏览器环境中支持promise需要支持performance，支持performancetimelinelevel2specificationimportperformancekitfrom'performance-kits';const{onloadPerformance,switchPerformance,closePerformance}=performancekit;其中onloadPerformance用于检测页面onload后的各种时间指标，所以应该在项目入口文件中引入，不用担心会覆盖项目原有的onload回调。已经兼容switchPerformance做路由切换。开发者需要在监听路由变化的回调中使用。closePerformance在离开组件/关闭项目时使用。需要开发者在监听离开或关闭的回调中使用。需要友情提示。如果在项目关闭回调中使用，通过接口上报数据时，请选择通信方式sendBeacon。三个函数只接受两个参数：参数1：timerinterval参数2：总轮询时间本次轮询的目的是找到painttype的入口（需要浏览器兼容支持），然后对渲染进行性能监控1.4github地址https//github.com/IndifferenceDoll/performanceKit2。Webfunny只需要几个简单的步骤，就可以搭建一套属于自己的前端监控系统，实时了解线上应用的健康状况！随时随地连接在线用户，无论何时何地，轻松解决前端问题！前端开发、后端接口、运营数据、产品分析2.1项目概况监控系统支持多项目，让所有项目的状态一目了然。通过对线上项目的实时分析，我们可以非常直观的了解线上情况。例如PV、UV数据变化趋势、在线报错、异常等。2.2报错分析精细分析每个报错问题，支持sourceMap源码定位。通过探针监控和报告在线环境中的错误，以及一些自定义异常。我们对这些日志进行精准分析，准确定位代码的问题。同时可以看到每次报错的变化趋势，也可以分析出用户在哪一步出了问题。2.3用户审视深入分析每个用户，记录每个用户的所有行为。由于线上用户的操作行为非常复杂，多次操作后可能会隐藏一些问题，所以探针记录了很多用户操作行为，一旦出现问题，重现bug就会变得非常简单。同时可以使用多种检索条件进行检索，提高检索效率。2.4性能分析分析页面和界面的性能、加载时间和成功率。探针分析页面的加载性能，直观地反映在报告上。接口的性能也进行了分析，比如：耗时，成功率等。3.zanePerforzanePerfor目前实现了哪些功能？3.1浏览器端（WEB）页面级性能上报（多页||单页应用常见）页面AJAX性能上报页面所有加载资源（图片、js、css）性能上报页面所有错误信息上报（js、css,ajax)3.2微信小程序终端path对应的AJAX性能上报小程序错误信息上报(js,ajax,img)用户设备信息和网络信息上报3.3后台界面展示功能(web,小程序通用)每分钟统计应用PV、UV、IP信息，每日PV、UV、IP、跳出率统计，用户访问平均深度统计，实时和每日应用top最高访问排名，最高跳出率排名统计，实时和每日全国各省流量热图统计每个用户每次访问的行为轨迹
