JS每日一题：前端性能监控你会监控哪些数据? 如何做?

qieangel2013 发布于2019-08-26 18:18 / 2117人阅读

摘要：基于此我们可以通过获取头部资源加载完的时刻来近似统计白屏时间代码理解测试时间起点，实际统计起点为时间终点头部资源加载时间首屏时间首屏时间的统计比较复杂，因为涉及图片等多种元素及异步渲染等方式。

20190318期

前端性能监控你会监控哪些数据? 如何做?

开始之前给大家推荐两个检查网页性能的地址

https://developers.google.com...

https://www.webpagetest.org/

为什么要做性能监控

对于公司来说，性能在一定程度上与利益直接相关

为什么性能会影响公司的收益呢？根本原因还是在于性能影响了用户体验。加载的延迟、操作的卡顿等都会影响用户的使用体验。尤其是移动端，用户对页面响应延迟和连接中断的容忍度很低。想象一下你拿着手机打开一个网页想看到某个信息却加载半天的心情，你很可能选择直接离开换一个网页。谷歌也将页面加载速度作为 SEO 的一个权重

哪些点需要监控

我们可以分为以下几个点来进行监控

白屏时间

首屏时间

用户可操作时间

总下载时间

白屏时间

白屏时间是用户首次看到内容的时间，也叫做首次渲染时间，chrome 高版本有 firstPaintTime 接口来获取这个耗时，但大部分浏览器并不支持，必须想其他办法来监测。仔细观察 WebPagetest 视图分析发现，白屏时间出现在头部外链资源加载完附近，因为浏览器只有加载并解析完头部资源才会真正渲染页面。基于此我们可以通过获取头部资源加载完的时刻来近似统计白屏时间

代码理解

首屏时间

首屏时间的统计比较复杂，因为涉及图片等多种元素及异步渲染等方式。观察加载视图可发现，影响首屏的主要因素的图片的加载。通过统计首屏内图片的加载时间便可以获取首屏渲染完成的时间。统计流程如下

首屏位置调用 API 开始统计 -> 
绑定首屏内所有图片的 load 事件 -> 页面加载完后判断图片是否在首屏内，找出加载最慢的一张 ->
首屏时间

可操作时间

用户可操作默认可以统计domready时间，因为通常会在这时候绑定事件操作。对于使用了模块化异步加载的 JS 可以在代码中去主动标记重要 JS 的加载时间，这也是产品指标的统计方式

总下载时间

总下载时间默认可以统计onload时间，这样可以统计同步加载的资源全部加载完的耗时。如果页面中存在很多异步渲染，可以将异步渲染全部完成的时间作为总下载时间

总结

白屏时间指head内资源加载完成

首屏时间指可视区域内最后一张图片加载完成的时间

可操作时间指Document.onready时间

总下载时间指Document.onload时间

关于JS每日一题

JS每日一题可以看成是一个语音答题社区
每天利用碎片时间采用60秒内的语音形式来完成当天的考题
群主在次日0点推送当天的参考答案

注绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路

点击加入答题

混合云私有云 js前端监控监控数据服务器性能从零开始搭建前端数据监控系统性能监控

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110174.html

前端知识点(二)

摘要：在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行时。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行内元素line-height方案 flex 弹性布局方案 transform 未知元素宽高解决方案 absolute加mar...

zacklee 2019-08-30 15:55 评论0 收藏0
前端知识点(二)

摘要：在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行时。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行内元素line-height方案 flex 弹性布局方案 transform 未知元素宽高解决方案 absolute加mar...

lbool 2019-08-23 14:52 评论0 收藏0
前端知识点(二)

摘要：在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行时。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行内元素line-height方案 flex 弹性布局方案 transform 未知元素宽高解决方案 absolute加mar...

Alex 2019-08-02 14:09 评论0 收藏0
JS每日一题: 前端的缓存有哪些？都适用什么场景？区别是什么？

摘要：问前端的缓存有哪些都适用什么场景区别是什么参考回答前端缓存分为两部分缓存浏览器缓存缓存强缓存强缓存主要是采用响应头中的和两个字段进行控制的值理解指定设置缓存最大的有效时间单位为指定响应会被缓存，并且在多用户间共享响应只作为私有的缓存， 20190116问: 前端的缓存有哪些？都适用什么场景？区别是什么？参考回答前端缓存分为两部分: http 缓存浏览器缓存 http 缓存强...

MockingBird 2019-08-30 15:55 评论0 收藏0
JS每日一题: 前端的缓存有哪些？都适用什么场景？区别是什么？

摘要：问前端的缓存有哪些都适用什么场景区别是什么参考回答前端缓存分为两部分缓存浏览器缓存缓存强缓存强缓存主要是采用响应头中的和两个字段进行控制的值理解指定设置缓存最大的有效时间单位为指定响应会被缓存，并且在多用户间共享响应只作为私有的缓存， 20190116问: 前端的缓存有哪些？都适用什么场景？区别是什么？参考回答前端缓存分为两部分: http 缓存浏览器缓存 http 缓存强...

lolomaco 2019-08-23 14:56 评论0 收藏0