Navigation Timing API
- Navigation Timing API 提供了可用于衡量一个网站性能的数据
1、navigationStart 表示上一个页面开始要进行跳转的最初钩子
2、unloadEventStart / End 表示前一个页面unload的时间节点
3、redirectStart / End 页面重定向发生的事件开始 | 结束
4、fetchStart / End 浏览器准备好使用http请求抓取文档的时间
5、domainLookupStart / End http开始/重新建立连接的时间 => http 版本 | 长短连接
6、connectStart / End 开始连接的时间 => 纯数据连接的时间
7、secureConnrctionStart / End https加密连接开始 | 结束时间
8、requesStart / End 请求花费时间
9、resqonseStart / End 返回花费时间
10、domLoading：开始渲染DOM树的时间 / domInteractive：完成DOM解析的时间 / domContentLoadedEventStart/End:网页内部内容加载时间 / domComplete：DOM渲染完成
11、loadEventStart / End load事件回调函数执行完毕
(function() {
var prefDate = window.performance.timing;
// 页面加载总耗时
var pageLoadTime = prefDate.loadEventEnd - prefDate.navigationStart;
})()
Core Web Vitals - 网页性能核心指标
- 可衡量，切反映真实用户体验 -- 加载性能、交互性、视觉稳定性
largest Contentful Paint (LCP)
-- 衡量页面的装载性能
- 前2.5s内进行最大内容渲染
1、最大内容渲染包含哪些？
图片
- 视频
- svg
- 通过url()函数记载的背景图片
- 包含了文本节点或者其他内联文本元素子集的块级元素 2、LCP值低下的原因
- 服务响应慢
- 阻断渲染的js和css
- 资源的加载
- 项目渲染 3、针对性改造
- 缓存：离线页面、资源缓存、请求内容缓存 --> 减少浏览器对服务的请求 | 减少服务的查询 --> 强缓存、协商缓存 | 缓存机制 对于渲染阻断：css | JS进行压缩、合并、级联、内联；后置js逻辑 对于文件的优化：格式的优化、转化图片格式为jpg|webp 工程化：打包优化：压缩、分片、异步、懒加载；架构层面：拆分、异步模块、统一封装；写法：减少网络请求、及时清理垃圾
First Input Delay （FID）
衡量交互
- 页面首次输入延迟应该小于100ms
1、js执行时间过长
- 压缩缩小js文件
- 延迟加载不需要的js逻辑
- 尽量减少未使用的polyfill 2、分解耗时任务
- 50ms长任务
- 长任务拆分成前置或后置及多个短任务 3、workers 通过worker提高执行效率，且实时同步
Cumulative Layout Shift (CLS)
衡量视觉稳定性
- 元素布局移动端可能发生的位置偏移量 1、不适用无尺寸元素 2、减少内部内容的插入 3、字体控制：默认字体 > 本地替换字体 > 加载字体
CWV工具 - Croe Web Vitals Annotations
大厂监控体系
1、埋点上报：点到点 + 信息采集汇总
2、数据处理：阈值设置 | 数据分类 | 数据重组
3、可视化展现：grafana（可视化监控软件） | 自研
4、告警处理（触发分派）：通过 钉钉、邮件、企业微信
未来可能 - bigpipe：页面分解为若干pagelet
1、服务前端接收自客户端的https请求
2、从存储层获取数据
3、生成HTML，座位部分模块的基础
4、浏览器回去解析内容，遗留区域作为展示面板进行客户端渲染
5、加载渲染生成
