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

前端监控SDK实战 ｜ 青训营笔记

本堂课重点内容：

性能指标

性能指标

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

• 传统的性能指标

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

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

• FP (First Paint) : 首次渲染的时间点。 FP 时间点之前，用户看到的都是没有任何内容的白色屏幕。
• FCP (First Contentful Paint) : 首次有内容染的时间点。
• FMP(First Meaningful Paint) : 首次绘制有意义内容的时间点。
• TTI (Time to Interactive) : 测量页面从开始加载到主要子资源完成渲染并能够快速、可靠地响应用户输入所需的时间。
• TTI 反映页面可用性的重要指标。TTI 值越小，代表用户可以更早地操作页面，用户体验就更好。

• FID (First Input Delay) : 测量从用户第一次与页面交互(比如当他们单击链接、点按按钮等等)]直到浏览器对交互作出响应，实际能够开始处理事件时处理程序所经过的时间。

• LCP (Largest Contentful Paint):最大的内容在可视区域内变得可见的时间点
• 最大的元素，例如一篇文章中的一大段文宁或产品页面上的一张图片，大概就是让你理解页面内容的最有用的元素。
• LCP 优点: 1.容易理解 2.给出与FMP相似的结果 3.容易计算和上报