为什么要做性能优化
- 应用加载慢
- 打开应用时间过长，用户需要等待很长时间之后，才可以看到画面，进行操作。
- 操作响应慢
- 用户的每一次操作，都不能立即响应，例如用户点击了登录按钮，页面无响应20s之后，提示用户名密码错误。
- 操作时页面卡顿
- 用户在进行操作时，由于进程阻塞/客户端性能瓶颈等原因，导致页面卡死，用户再进行其他操作时，无法得到响应。
然而这些用户体验问题，都可能降低应用的用户粘性。
Web 性能是客观的衡量标准，是用户对加载时间和运行时的直观体验。Web 性能指页面加载到可交互和可响应所消耗的时间，以及页面在交互时的流畅度——滚动是否顺滑？按钮能否点击？弹窗能否快速打开，动画是否平滑？Web 性能既包括客观的度量如加载时间，每秒帧数和到页面可交互的时间；也包括用户的对页面内容加载时间的主观感觉。
页面响应时间越长，越多的用户就会放弃该网站。重要的是，通过使体验尽可能早地变得可用和交互，同时异步地加载长尾体验部分，来最大程度地减少加载和响应时间，并添加其他功能以降低延迟。
有很多工具，API 和最佳实践帮助我们测量和改进网页性能。
网站性能优化及监控方案
网站性能的指标
Google Web性能指标
良好 | 欠佳 | 百分位数 |
| 最大内容绘制 LCP | ≤2500ms | >4000ms | 75 |
| 首次输入延迟 FID | ≤100ms | >300ms | 75 |
| 累积布局偏移 CLS | ≤0.1 | >0.25 | 75
网站性能指标介绍
- FP：页面首个像素点渲染时间
- FCP：页面首次内容渲染时间
- LCP：最大内容渲染时间
- FID：用户首次和网站进行交互到浏览器响应该事件的实际延时时间
- TTI：首次可交互时间
- CLS：页面累计布局偏移总和
如何监控网站性能
本地自查
远程监控&上报
api介绍
Performance接口可以获取到当前页面中与性能相关的信息。它是 High Resolution Time API 的一部分，同时也融合了 Performance Timeline API、Navigation Timing API、User Timing API 和 Resource Timing
详情看下方引用
# Performance | MDN
# Performance.timing | MDN
# PerformanceTiming | MDN
# 详解 PerformanceResourceTiming API，这货真干真硬！
Performance应用
性能指标
页面性能指标是通过 performance.getEntriesByType(‘navigation’)[0] 或 performance.timing 来计算的，
前者为最新计算方式，后者为旧版本计算方式。以下 navigationTiming 表示前者返回的值， timing 表示后者返回的值，
没有指定，表示这两个对象中都包含该字段。
重定向个数
- 指当前页面经过几次重定向到达的，如果没有重定向，该值为 0
- 计算方式：navigationTiming.redirectCount 或 performance.navigation.redirectCount
重定向耗时
- 指重定向所用时间
- 计算方式：redirectEnd-redirectStart
读取缓存耗时
- 指读取缓存数据所用时间
- 计算方式：domainLookupStart-fetchStart
DNS解析耗时
- 指通过域名解析服务（DNS），将指定的域名解析成IP地址所消耗的时间，例如把 www.jd.com 解析成 111.206.231.1 的耗时，一般 2 到 3 毫秒
- 计算方式：domainLookupEnd - domainLookupStart
TCP连接耗时
- 指浏览器和WEB服务器建立TCP/IP连接所用的时间
- 计算方式：connectEnd - connectStart
SSL安全连接耗时
- 只在 HTTPS 下有效，属于TCP连接耗时的一部分，指安全连接握手耗时 (www.w3.org/TR/resource…)
- 计算方式：location.protocol === ‘https:’ ? connectEnd - secureConnectionStart : 0
网络请求耗时
- 指开始发送请求到服务器返回第一个字节所需要的时间
- 计算方式：responseStart - requestStart
数据传输耗时
- 指页面返回第一个字节到最后一个字节所用的时间
- 计算方式：responseEnd-responseStart
DOM解析耗时
- 指页面请求完成（responseEnd）后，到整个 DOM 解析完所用的时间，页面的复杂度决定了 DOM 解析耗时
- 计算方式：domContentLoadedEventEnd - responseEnd
资源加载耗时
- 指 DOM 解析完成后到页面完全加载完所用的时间
- 计算方式：loadEventEnd - domContentLoadedEventEnd
页面渲染耗时
- 该指标目前没有上报
- 指页面请求完成（responseEnd）后，到页面完全加载完间隔的时间（包含DOM解析和资源加载），页面渲染时间等于页面完全加载时间 - HTML 加载完成时间（见下面指标）
- 计算方式：loadEventEnd - responseEnd
首包时间
- 从页面请求到浏览器开始接收到数据所用的时间
- 计算方式：responseStart - startTime
白屏时间
- 也指首次渲染时间，指页面出现第一个文字或图像所花费的时间
- 计算方式：优先使用最新标准 performance.getEntriesByType(‘paint’)[0].startTime，不支持的话使用 Chrome、IE 提供的 firstPaintTime，chrome.loadTimes().firstPaintTime 或 performance.msFirstPaint，还没有获取到计算 head 中 link 和 script 下载时间，然后取其最大值，最后如果 head 中没有 link 或 script 时，取 domInteractive - startTime
- 说明：老版本 chrome 浏览器可以使用 chrome.loadTimes().firstPaintTime，新版本中该 api 已被废弃，详情查看 developers.google.cn/web/updates…
以下为官方给出的计算方式
function firstPaintTime() {
if (window.PerformancePaintTiming) {
const fpEntry = performance.getEntriesByType('paint')[0];
if (fpEntry) {
return fpEntry.startTime;
}
return 0;
}
}
首次可交互时间
- 指页面 DOMContentLoaded 事件触发的开始时间，这时候页面可以交互
- 计算方式：domInteractive - startTime
HTML 加载完成时间
- 指页面所有 HTML 加载完成（不包括页面渲染时间），即包括 DNS、TCP、Request和 Response
- 计算方式：responseEnd - startTime
页面完全加载时间
- 指页面完全加载完所用的时间，这时候触发完成了 onload 事件
- 计算方式：loadEventEnd - startTime
首屏时间
- 首屏时间，也称用户完全可交互时间，即整个页面首屏完全渲染出来，用户完全可以交互，一般首屏时间小于页面完全加载时间，该指标值可以衡量页面访问速度
- 计算方式：有两种方式：第一种通过计算首屏区域内的所有图片加载时间，然后取其最大值；第二种方式：通过 window.MutationObserver 来监听首屏所有元素变化情况，并记录时间，最后取其最大值（会去掉得分相同重复的值），算出的时间需要加上 domInteractive（可交互时间），目前系统采用第二种实现方式
- 说明：对于首屏中出现的动画或者轮播图等，不会影响实际计算时间
性能指标计算方式参考图
Apdex指标
Apdex 指标也称页面满意度，全称 Application Performance
Index，他是一个国际通用的页面性能计算标准，该标准将用户对于页面的满意度分为三个等级
满意（0 ~ T） 可容忍（T ~ 4T） 不满意（大于 4T）
计算公式为：
Apdex = (满意样本数量 + 可容忍样本数量 / 2) / 所有样本数量
Copy
{width=“2.6666666666666665in”
height=“1.1583333333333334in”}
计算结果为 0 到 1
之间的数值，数值越大，表示页面满意度越高。页面满意度主要取决于 “T”
值的设定和计算指标
“T” 值的设定：比如设为 2 秒，则 02 秒表示满意，28 秒表示可容忍，超过
8 秒表示不满意
计算指标：比如取页面白屏时间（页面首次渲染时间）作为计算指标
SGM 前端监控中，默认 “T” 为 2 秒，计算指标取页面白屏时间
