前端性能指标及优化
前言
我们前端性能统计到底是以什么衡量？速度与内存。
所谓的性能统计，就是在合适的时机，打上合适的时间戳，或者暴露出事件。然后通过这些时间戳之间的差值，得出一个耗时时间。这个耗时时间就可以反映出我们页面的相关性能。那么我们如何知道知道这些时间点呢？这就需要我们去了解Performance。
前端几个性能指标
白屏时间 FP
指的是当我输入URL开始，到页面开始有变化，只要有任意像素点变化，都算是白屏时间的完结。
function getFP() {
new PerformanceObserver((entryList, observer) => {
let entries = entryList.getEntries();
console.log(entries);
for (let i = 0; i < entries.length; i++) {
if (entries[i].name === 'first-paint') {
console.log('FP', entries[i].startTime);
}
}
const lastEntry = entries[entries.length - 1];
// observer.disconnect();
}).observe({entryTypes: ['paint']});
};
首次内容绘制FCP
指的是页面上绘制了第一个元素。
FP与FCP的最大的区别
FP 指的是绘制像素，比如说页面的背景色是灰色的，那么在显示灰色背景时就记录下了 FP 指标。但是此时 DOM 内容还没开始绘制，可能需要文件下载、解析等过程，只有当 DOM 内容发生变化才会触发，比如说渲染出了一段文字，此时就会记录下 FCP 指标。因此说我们可以把这两个指标认为是和白屏时间相关的指标，所以肯定是最快越好。
首次有效绘制FMP
这个东西具有一定的争议性，他指的是页面中有效内容绘制，对于每个网站对于有效内容的定义是不同的，因此一般不做研究。
首页时间
首页时间指的是，当onload事件触发的时候，也就是整个首页加载完成的时候。\
最大内容绘制LCP
用于记录视窗内最大的元素绘制的时间，该时间会随着页面渲染变化而变化，因为页面中的最大元素在渲染过程中可能会发生改变，另外该指标会在用户第一次交互后停止记录。
首次可交互时间TTI
- 从 FCP 指标后开始计算
- 持续 5 秒内无长任务（执行时间超过 50 ms）且无两个以上正在进行中的 GET 请求
- 往前回溯至 5 秒前的最后一个长任务结束的时间
首次输入延迟（FID）
记录在 FCP 和 TTI 之间用户首次与页面交互时响应的延迟。
累计位移偏移(CLS)
页面渲染过程中突然插入一张巨大的图片或者说点击了某个按钮突然动态插入了一块内容等等相当影响用户体验的网站。这个指标就是为这种情况而生的，计算方式为：位移影响的面积 * 位移距离。
CLS 推荐值为低于 0.1。
现在前端框架中检测
web-vitals：是一个前端框架，他可以不需要你书写上面代码只需要轻松的引用即可。
缺点是：目前只能统计'CLS' | 'FCP' | 'FID' | 'LCP' | 'TTFB'。如果需要扩充的话，就可以使用上面的Performance进行更改。
在谷歌的标准中，一般我们只需要关心以上几个，分别是LCP, FID, CLS;
改进方法
对于白屏
- 部署CDN，缩短用户与节点之间的距离（网速）
- 提高带宽（网速）
- 不要在头部添加任何script标签等。
- 建立缓存，提高下次加载速度。
- 开启gzip压缩。
- 对于少量小图标（单个尽量不要超过10K的），我们可以使用url-loader打包。或者使用将图标转化为字体库，异步进行加载。
- 对于大图标的话，需要做到在展示的时候再去加载。也就是当图片出现到浏览器窗口的时候再去加载，而不是首屏的图片全部加载。
对于CLS
- 如果经常需要变动的元素，脱离文档流，或者是占据位置，只是隐藏。
- 对于位移等操作，使用动画代替。
- 在定义图片的时候，就应该给出具体的宽高。
对于用户可操作时间
- 对文件进行懒加载，不要一次性把所有的JS加载出来。这就需要使用路由懒加载，在跳转到某个路由的时候，再去加载他的脚本资源。这样就可以保证JS加载速度的优化。
- 不要在响应事件里有过多的运算，导致卡顿。如果确有需要，应当开启webWorker，新起线程运算。
bigpipe技术
bigPipe是由facebook提出来的一种动态网页加载技术。它将网页分解成称为pagelets的小块，然后分块传输到浏览器端，进行渲染。它可以有效地提升首屏渲染时间。
可以看出，bigpipe的适用是服务端进行渲染，然后将一块一块的文件传递给前端。
