FP 首次绘制，FCP 首次内容绘制，FMP 首次有效绘制，TTI 交互时间
CDN 七牛云 又拍云
图片
1、格式问题
jpg png webp
方法：
gzip
1.node 压缩图片
npm i compression
2. CDN里定制格式
防止重复打包
webpack analizy包图
性能优化工具
1. lighthouse 报告
2. chrome :show coverage / performance
统计
重定向 fetch redirect
DNS domainLookup
TCP connection
发送请求 Request
响应 Response
Dom parse Ddomloading DomInteractive domContentLoaded
render domComplete
首屏
1.prerenderer
2.静态化 ？
3.同构（SSR+SPA）综合体
http2 雪碧图 反模式
可以算出的指标都是硬性的
和交互相关的，需要别的方式来统计FMP, first meaningful paint
dom 体积变化最大的元素 useful
设计FMP 的算法
所有html出来后，没法知道谁是最重要的节点
1. 页面进入 使用mutationObserver
2.对变化的dom打上标记
3. 文档的load触发
4.遍历dom tree
5. 根据元素的可视区域，计算元素的权重
6.遍历父元素，对比合并
7.get一下权重最高的
8.判断是否加载完毕
是不是img video audio 这种资源标签，资源加载时间performace.getEntries
只是单纯的dom，时间-dom变化
算出fmp
简单粗暴的计算：
mutationObserver首屏load出来80% 就算
