1. 引入性能指标的意义
长久以来，我们碰到了一系列的前端性能问题，在不断的修复和优化中我们也发现了流程中的一些不足。
-
我们没有能提前发现问题，都是在用户通过售后支持上报后，进行远程或者在客户现场实地跟踪才能发现用户遇到的问题。这样给用户的感觉都是后知后觉，如何才能先于客户感知并防患于未然，是我们要追求的方向；
-
目前解决性能问题的衡量标准都是内存占用和cpu占用，但是对于一个流畅、顺滑的使用体验来说，这两个标准过于粗糙了。不同的页面、不同的业务流程都会对内存和cpu产生影响。我们没有办法更加细致的针对某个业务场景进行优化。
因此，我们需要更加细致的衡量标准和监控机制。这个标准需要可以衡量我们优化的效果，同时也需要能够指引我们针对特定场景和业务流程的体验进行优化，并且让我们在问题出现苗头的时候就能及时发现。
2. 怎么衡量一个网页体验的好坏
我们所在的行业是客户联络中心行业，即客服场景。对于客服人员，工作中经常遇到的，就是： 打开浏览器输入网址-等待网页加载-输入账号密码-等待首页加载-点击进入在线客服或者呼叫客服-回复访客消息-进行其他业务操作。
- 如果首页加载的时间过长...
- 如果首页加载出来了却点不动...
- 如果回复访客信息的过程中响应慢，有卡顿的感觉...
- 进行一些经常会使用的业务操作的时候（比如快捷回复），非常复杂，需要点很多下...
那我觉得这个体验就是非常差的了，因此反过来说，我们可以把这些维度作为衡量标准，来指导我们进行优化。
下面我们将针对这些问题，提出我们的解决方案。但在此之前，需要先明确几种业内通用的的指标体系。
3. 基础：常用核心web指标：LCP/FID/CLS
- LCP，用来衡量页面加载性能，为了提供良好的用户体验，LCP应该在页面首次开始加载后的2.5秒内发生
- FID，衡量交互性能，为了提供良好的用户体验，页面的FID应该小于100毫秒。
- CLS，测量视觉稳定性。为了提供良好的用户体验，页面应该保持CLS小于0.1。
3.1 LCP 衡量页面加载时间
Largest Contentful Paint (LCP): 该指标会根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或文本块完成渲染的相对时间。 
什么是一个好的LCP分数?
官方推荐测量阈值 2.5秒，即75%的用户LCP在2.5秒内，即可认为该指标达到良好。
3.2 FID 衡量交互性能
First Input Delay (FID):测量从用户第一次与页面交互 (用户点击链接、点击按钮等操作) 直到浏览器对交互做出响应，并能够实际开始处理，所经过的时间。
注意：FID只测量事件处理过程中的延迟，FID既不测量处理事件本身所花费的时间，也不测量处理事件后更新UI所花费的时间。
什么是一个好的FID分数？
一个拥有良好用户体验的网站的FID得分应该尽可能的小于100ms。
3.3 CLS 视觉稳定性
Cumulative Layout Shift (CLS) :测量真实用户体验中页面布局在加载时的偏移程度。这个值过大，说明页面布局在加载的时候不断变化，如果这种变化刚好发生在用户与网页交互时，可能会导致用户点击了错误元素，进行了非本意的操作，造成用户体验下降。
注意：布局更改只有在现有元素更改其起始位置时才会发生。如果一个新的元素被添加到 DOM 中，或者一个现有的元素改变了大小，那么只有当这个改变导致其他可见元素改变了它们的开始位置时，它才算是布局变化。
什么是一个好的CLS分数？
75%以上的用户小于0.1。
4. 解决方案------对齐业务颗粒度
上面所述的是页面基础指标，对与我们页面加载，打开起到了至关重要的作用。但对于一个SPA（Single Page Application）单页面应用来说，上面的经典指标，适用范围就显得捉襟见肘了。 我们的客服场景，是客户在一个WEB工作台页面（SPA页面）一直工作8～12小时，那么进入工作台工作流畅度，该如何衡量呢？我们提出更符合业务，粗颗粒度的指标------工作台指标。（未完待续...）