性能优化方法介绍

介绍

近期在学习性能优化的定位，在此总结一下，几种前端常见的性能定位的方式方法。

首先介绍一下显示页面常见的几个量化指标。

FP(First Paint Time)

从页面开始加载到浏览器中检测到渲染(任何渲染)时被触发(例背景改变，样式应用等)。

FCP(First Contentful Paint)

从页面开始加载到页面内容的任何部分呈现在屏幕上的时间。(关注焦点是内容，这个度量可以知道用户什么时候收到有用的信息)

FMP(First Meaning Paint)

表示页面的主要内容，开始出现在屏幕的时间，只是记录加载体验的最开始。如果页面loading，则该时刻毫无意义。

LCP(Largest Contentful Paint)

视窗最大可见图片或者文本块的渲染时间。帮助捕获更多的首次渲染之后的加载性能。

长任务(Long Task)

当一个任务超过50ms耗时，则认定为一个长任务

TTI(Time To Internative)

从页面开始加载主要子资源到能够快速响应用户输入的时间。

FID(First Input Delay)

从用户第一次与页面交互到浏览器实际能够处理事件的时间

总阻塞时间TBT(Total Blocking Time)

衡量从FCP到TTI之间主线程被阻塞时长的总和

DCL(DOMContentLoaded)

当HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，无需等待样式、图像和子框架的完成加载。

L(onLoaded)

当依赖的资源全部加载完毕之后才会出发

CLS(Cumulative Layout Shift)

所有布局偏移分数的汇合，凡是在页面完整生命周期内预料之外的布局偏移都包括。

性能定位

web-vitals

performance API

Performance 是一个浏览器全局对象，提供了一组 API 用于编程式地获取程序在某些节点的性能数据。它包含一组高精度时间定义，以及配套的相关方法。

使用 performance.timing 信息简单计算出网页性能数据

FP：responseStart - navigationStart

重定向耗时：redirectEnd - redirectStart

DNS 查询耗时：domainLookupEnd - domainLookupStart

TCP 链接耗时：connectEnd - connectStart

HTTP 请求耗时：responseEnd - responseStart

解析 dom 树耗时：domComplete - domInteractive

DOM ready 时间：domContentLoadedEventEnd - navigationStart

onload：loadEventEnd - navigationStart

使用performance.getEntries()获取所有资源请求的时间数据

获取所有资源请求的时间数据,这个函数返回一个按 startTime 排序的对象数组

使用performance.getEntriesByName(name)获取特定名称的时间数据

我们可以通过 getEntriesByName(name)提供的 api 去获取 FCP 数据

FCP = performance.getEntriesByName(“first-contentful-paint”)[0].startTime - navigationStart

使用performance.now()精确计算程序执行时间

performance.now方法返回当前网页自从performance.timing.navigationStart到当前时间之间的微秒数（毫秒的千分之一）。也就是说，它的精度可以达到 100 万分之一秒。

使用performance.mark以及performance.measure手动测量性能

一般用于自定义搜集性能数据指标 做前端的性能监控系统。

控制台Performance

1：工具条，包含录制，刷新页面分析，清除结果等一系列操作

2：总览图，高度概括随时间线的变动，包括 FPS，CPU，NET

3：火焰图，从不同的角度分析框选区域 。例如：Network，Frames, Interactions, Main 等

4：总体报告：精确到毫秒级的分析，以及按调用层级，事件分类的整理

Memory

LightHouse

参考链接

最全的前端性能定位总结