https://www.jianshu.com/p/4bf31b7bb432
\
\
为什么要进行前端性能优化？
Performance is about improving conversions （转化率）
-
对于Mobify来说，首页加载速度每降低100毫秒，基于会话的转化率就提高了1.11％，平均每年的收入增加了近380,000美元。此外，结帐页面加载速度降低100毫秒，基于会话的转化率提高了1.55％，这反过来又使年均收入增长了近$ 530,000\
-
AutoAnything 发现当他们减少一半的页面加载时间，会提升12%-13%的成交额。
Performance is about user experience（用户体验）
- 性能是好的用户体验的基础。
- 现代web应用，前端承载了越来越多的逻辑和职责，导致应用越来越大（相反，真实用户的网络和设备性能却千差万别）
其中引用的一篇《流式传输会延迟智能手机用户的心理负担：爱立信移动报告》非常有意思。
调研报告显示: 视频加载的延迟会使用户的心率平均上升37%，等同于看恐怖电影或者参加数学考试一样给人带来的压力（恐怖电影 没啥感觉，数据考试可能大家都有比较深的感触~）
Performance is about people（以人为中心）
- 减少你站点加载的资源大小，不要没到月底，流量套餐就用完了，或者被限速！！！（同样也会为公司减少CDN支付的费用哦~）
- 医院，诊所和危机中心等公共资源具有在线资源，这些资源为用户提供了危机期间所需的重要和特定的信息。尽管设计对于在紧张时刻有效地展示重要信息至关重要，但快速提供这些信息的重要性不可低估
****\
如何衡量前端性能？
FCP
Fisrt Contentfull Paint 指标测量了从开始加载到第一次绘制任何的text（包含引用加载中字头文件的text）、image（包括背景图）非白色的canvas、svg元素的时间。
含义
衡量的维度：Is it happening? Did the navigation start successfully? Has the server responded?
FCP 和 FP 的区别
- First Paint 发生在导航阶段完成之后的第一次渲染. 不包含默认背景色（比如默认背景色的body）但是包含非默认背景色（设置背景色的body）
- Fisrt Contentfull Paint 发生在导航阶段完成之后，第一次绘制任何的text、image（包括背景图）非白色的canvas、svg元素、包含引用加载中字头文件的text。
- FP 在 FCP 之前或者同时触发。
- 触发FP的第一次绘制 不一定触发FCP，触发FCP的条件一定能触发FP。
\
\
LCP
Largest contentfull paint 指标上报可视窗口内，最大的图片或者文本绘制时间。
含义
衡量的维度： Is it useful? Has enough content rendered that users can engage with it?
计算逻辑
哪些元素被被考虑作为最大元素
- img
- svg中的image
- 一个元素 使用background-image (但是不是使用 CSS gradient)
- 块级元素（包含了 文本内容或者是行内文本元素）
- 使用了poster属性的video元素
\
元素的大小如何计算？
- 只计算用户可视区域范围的可见元素：如果元素设置了visibility opacity display不可见 是不会计算在内的。
- 如果一个元素一部分超出了可视区域，或者被父容器使用overflow等属性隐藏掉，则这部分不可见的部分不会计算在内。
- 对于image图片元素，有两个大小：图片真实的大小和在可视区域内的展示的大小，上报时候取两者的最小值进行计算。
- 对于text文本元素，只考虑能包含文本的最小矩形区域。
- 对于所有的元素，任何通过css设置的margin、padding、border都不会计算在内。
\
什么时候会上报LCP？
因为web 页面加载是分阶段的，在渲染的过程中，largest element 可能会变化。 所以Largest Contentful Paint API 会在largest element发生变化的变化的时候 不断的触发上报。
具体哪些情况下 ****最大元素可能发生变化
- 新添加DOM元素（元素属于最大内容的备选项）
- 删除一个DOM元素（元素属于最大内容的备选项）
- 修改DOM元素的属性：opacity display visibility, src（元素属于最大内容的备选项）
注意： 改变元素的大小和位置 不会再次触发LCP 上报，对于图片资源在加载完成之后 修改大小和位置不会再次触发LCP上报。
什么时候停止上报？
- 用户在页面上发生交互（因为用户操作经常会修改元素的可见性）
\
TTI
Time to interactive 指标测量从页面开始加载到页面依赖的主要的子资源加载完毕并且能够快速可靠的响应用户的输入
含义
衡量的维度：Is it usable? Can users interact with the page, or is it busy?
计算逻辑
TTI 定义上比较抽象，那么是怎么测量：主要的子资源加载完毕并且能够快速可靠的响应用户的输入
- 从FCP时间点开始
- 向前（时间线上其实是指之后的时间）立即搜索一个长达5秒钟的静默窗口
- 从找到的静默窗口之前，向后（时间线上其实是指之前的时间）搜索最近的一次long task ，如果没有找到就停在FCP发生的时间点
- TTI 就是静默窗口之前的最近一次long task的结束时间，如果没有找到long task 那就是FCP的时间点。
5秒钟的静默窗口被定义为:
1. 期间没有long task运行
- 没有超过两个的进行中的网络请求
\
TBT
Total block time 指标统计了从FCP开始到TTI结束之间的所有long task超过50ms部分的时间总和。
含义
衡量的维度：Is it usable? Can users interact with the page, or is it busy?
怎么计算
\
\
假设下面是FCP -> TTI 之间的所有运行的tasks
\
