这是我参与「第五届青训营 」伴学笔记创作活动的第 十二 天

前端技术栈之前端监控SDK | 青训营笔记

为什么要聊前端监控

从一个面试题说起：

• 在浏览器里，从输入URL到页面展示，中间发生了什么？
  • 用户输入 ——> 发起URL请求——>准备渲染进程——>提交文档——>页面解析和子资源加载
• 前端监控就是尽可能采集这一过程以及后续用户交互中产出的性能指标与发生的异常事件并报到平台完成消费。

为什么需要前端监控

• 从用户（浏览器网页的人）的视角来抛出一些使用时遇到的问题
  • 为什么网页打开好慢
  • 为什么网页会那么卡
  • 为什么网页的图片全部裂开
  • 这个网页怎么是白花花的一片什么都没有 网上各种问题解析都是不负责任的如：
• 网页打开好慢——用户用的XP+IE浏览器，建议重装系统
• 交互卡顿——用户配置太低，建议升级
• 资源加载失败——用户网络太差，建议到大城市里面试试
• 页面白屏——我这台电脑没问题，应该是偶发事故
• 等... 前端监控可以通过对页面数据的采集和上报，来帮助开发者更快速地对质量差的页面进行分析和归因，从而准确解决响应问题。

监控页面质量为什么那么重要

1. 图片社交分享网站将感知等待时间减少百分之四十，这将搜索引擎浏览和注册量增加百分之十五。
2. cook将页面平均加载时间减少了850毫秒，从而将转化次数提高了百分之七，将跳出率降低百分之七，并将每个绘画页面增加百分之十。 研究还表明，性能不佳会对业务目标产生负面影响，列入BBC发现他们网站加载时间每增加一秒，他们就会损失百分之十的用户。

前端监控可以监控什么

• 性能指标
• 异常事件

前端监控之常用性能指标

WEB性能标准的诞生

早期网页是纯静态的，但随着Web爆发式发展，页面交互越来越复杂，开发者开始思考如何提高Web性能，改善用户体验。 因此。2010年8月，W3C成立了Web性能工作组，由来自Google和Microsoft的工程师担任主席，目标是制定衡量WEB应用性能的方法和API。 随后，Web性能工作组开始定制一系列的Web性能标准，应用到桌面和移动浏览器以及其他环境中，帮助Web开发人员评估和理解应用的性能特征。

传统的性能指标

传统的性能指标主要依赖Navigation Timing或者Navigation Timing 2，通过记录一个文档从发起请求到加载完毕的各个阶段的性能消耗，以加载速度来衡量性能。

以用户性能为中心的性能指标

传统的性能指标专注于容易衡量的技术细节，但是它们很难反应出用户所真正关心的是什么 如果仅仅是把加载速度优化的更快，很快就会发现网站的用户体验很差，这就是创建用户为中心的指标原因，它们专注于用户视角下的浏览体验。

前端常见异常

静态资源错误

静态资源：

• 加载页面所需的HTML，css和js等文件，以及其他各个多媒体文件如图片，音频等。 静态资源错误：
• 在拉取和加载静态资源的过程中发生了预期之外的错误，如网络错误等，导致静态资源无法正常渲染到页面上。

js错误

在页面运行时发生的JS错误会严重影响页面的正常渲染与交互，是前端的监控重点。

白屏异常

前几类异常都可以通过浏览器提供的标准化方法来监听到，而白屏异常没有标准化的监听方法，所以更更考验前端监控开发者的功底。

• 通常我们可以通过判断DOM树的结构来粗略的判断白屏是否发生