前端性能监控你会监控哪些数据? 如何做?
开始之前给大家推荐两个检查网页性能的地址
-
https://developers.google.com/speed/pagespeed/insights/?hl=zh-CN
-
https://www.webpagetest.org/
为什么要做性能监控
对于公司来说，性能在一定程度上与利益直接相关
为什么性能会影响公司的收益呢？根本原因还是在于性能影响了用户体验。加载的延迟、操作的卡顿等都会影响用户的使用体验。尤其是移动端，用户对页面响应延迟和连接中断的容忍度很低。想象一下你拿着手机打开一个网页想看到某个信息却加载半天的心情，你很可能选择直接离开换一个网页。谷歌也将页面加载速度作为 SEO 的一个权重
哪些点需要监控
我们可以分为以下几个点来进行监控
-
白屏时间
-
首屏时间
-
用户可操作时间
-
总下载时间
白屏时间
白屏时间是用户首次看到内容的时间，也叫做首次渲染时间，chrome 高版本有 firstPaintTime 接口来获取这个耗时，但大部分浏览器并不支持，必须想其他办法来监测。仔细观察 WebPagetest 视图分析发现，白屏时间出现在头部外链资源加载完附近，因为浏览器只有加载并解析完头部资源才会真正渲染页面。基于此我们可以通过获取头部资源加载完的时刻来近似统计白屏时间
代码理解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> var start_time = +new Date; //测试时间起点，实际统计起点为 </script> </head> <body> <script src="js"></script> <script> var end_time = +new Date; //时间终点 var headtime = end_time - start_time; //头部资源加载时间 console.log(headtime); </script> </body>
首屏时间
首屏时间的统计比较复杂，因为涉及图片等多种元素及异步渲染等方式。观察加载视图可发现，影响首屏的主要因素的图片的加载。通过统计首屏内图片的加载时间便可以获取首屏渲染完成的时间。统计流程如下
首屏位置调用API 开始统计->
绑定首屏内所有图片的 load 事件->
页面加载完后判断图片是否在首屏内，找出加载最慢的一张->
首屏时间
可操作时间
用户可操作默认可以统计domready时间，因为通常会在这时候绑定事件操作。对于使用了模块化异步加载的 JS 可以在代码中去主动标记重要 JS 的加载时间，这也是产品指标的统计方式
总下载时间
总下载时间默认可以统计onload时间，这样可以统计同步加载的资源全部加载完的耗时。如果页面中存在很多异步渲染，可以将异步渲染全部完成的时间作为总下载时间
总结
-
白屏时间指head内资源加载完成
-
首屏时间指可视区域内最后一张图片加载完成的时间
-
可操作时间指Document.onready时间
-
总下载时间指Document.onload时间
