这是我参与「第五届青训营 」伴学笔记创作活动的第12天。
今天学习的内容是前端监控SDK实战，我将今天学习的内容总结为以下几点：
1.为什么需要前端监控？
因为网页可能会出现打开很慢（页面某个关键资源渲染太慢）、交互卡顿（页面同步计算任务太重，阻塞渲染）、资源加载失败（客户端网络状态差，或上游服务节点异常）、页面白屏（页面脚本执行失败、关键资源加载失败、请求失败等）等问题，而前端监控通过对页面数据的采集和上报，来帮助开发者更快速地对质量差的页面进行分析和归因。
2.Performance 与 Performance observer 对象
- Performance是一个做前端性能监控离不开的API，最好在页面完全加载完成之后再使用，因为很多值必须在页面完全加载之后才能得到。最简单的办法是在window.onload事件中读取各种数据。
- Performance observer主要用于观察性能时间轴（Performance Timeline），并在浏览器记录时通知新的性能条目。它可以用来度量浏览器和 Node.js 应用程序中某些性能指标。在浏览器中，我们可以使用 Window 对象作为 window.PerformanceObserver，在 Node.js 应用程序中需要 perf_hooks 获得性能对象。比如，const {performance} = require('perf_hooks')。它在下列情况下是有用的:
- 测量请求（Request）和响应（Response）之间的处理时间。（浏览器）
- 在从数据库中检索数据时计算持续时间。（Node.js 应用程序）
- 抽象精确的时间信息，使用 Paint Timing API，比如 First Paint 或 First Contentful Paint 时间
- 使用"User Timing API"、"Navigation Timing API"、"Network Information API"、"Resource Timing API"和"Paint Timing API"访问性能指标
3.什么是HOOK Hook在程序中可以将其理解为“劫持”，我们可以通过hook技术来劫持某个对象，从而控制它与其他对象的交互。
4.什么是链式调用 所谓链式调用就是调用完一个函数后还能再继续调用其它函数，这样大大减少了代码量，尤其是项目比较大的时候，逻辑集中清晰明了，且易于查看和修改。Hook通过创建一个代理对象，然后把原始对象替换为我们的代理对象，这样就可以在这个代理对象为所欲为，修改参数或替换返回值。
