本博客 hjy-xh，转载请申明出处
基本概念
优化首次加载页面，使得用户能够更快速和页面进行交互
常见指标
FP: First Paint，首次绘制，表示浏览器首次绘制出像素的时间点
FCP: First Content Paint，首次内容绘制，表示浏览器首次渲染内容，内容可以是文本，图片等（空白的canvas或者SVG不算）
FP 和 FCP 是衡量白屏的主要指标。
FP 指的是绘制像素，比如说页面的背景色是灰色的，那么在显示灰色背景时就记录下了 FP 指标。但是此时 DOM 内容还没开始绘制，可能需要文件下载、解析等过程，只有当 DOM 内容发生变化才会触发，比如说渲染出了一段文字，此时就会记录下 FCP 指标。
FMP: First Meaningful Paint，首次有效绘制，表示首次渲染有意义的内容的时间，这是一个较为重要的指标，对于什么是有意义因项目而定，而从FP到FMP这个过程均为白屏
LCP：Largest Content Paint，最大内容区域绘制，指页面中最大的内容模块被渲染出来的时间，一般会是内容最多，视口内最大元素渲染出来的时间
TTI：Time to Interactive，可交互时间，表示用户能与界面进行交互的时间点（点击、输入）
介绍TTI之前，需要讲一下长任务，一个任务耗时超过50ms，就可以被认为是长任务，而执行用户交互的操作也在主线程执行，因而当发生长任务时，用户的输入很可能无法及时执行，此时用户就会感受到卡顿（页面响应时间超过100ms时，用户就能感受到）
FID：First Input Delay，首次输入延迟，表示用户首次与页面进行交互是，页面给予反馈的耗时
记录在FCP和TTI之间用户与页面交互时响应的延迟，这个延迟出现的原因是浏览器主线程可能在忙于其它工作，比方说解析JS文件
优化手段
- 提升用户体验
- 网络层面
- 图片优化
- 减少体积
- 代码层面
提升用户体验
白屏可以进行 loading 提示或者股价平，让用户感知到页面存在
如果项目使用了 webpack ，那么可以添加插件html-webpack-plugin，进行loading的配置
网络层面
开启 HTTP2
- HTTP2 采用二进制分帧的方式进行通信，而 HTTP1.x 是用文本，HTTP2 的效率更高
- HTTP2 可以进行多路复用，即跟同一个域名通信，仅需要一个 TCP 建立请求通道，请求与响应可以同时基于此通道进行双向通信，而 HTTP1.x 每次请求需要建立 TCP ，多次请求需要多次连接，还有并发限制，十分耗时
- HTTP2 可以头部压缩,能够节省消息头占用的网络的流量,而HTTP1.x每次请求，都会携带大量冗余头信息，浪费了很多带宽资源
开启浏览器缓存（配对使用以下响应头字段）
- If-Modified-Since 和 Last-Modified
- Etag 和 If-None-Match
静态资源使用 CDN
图片优化
对图片进行懒加载处理，或者对小图片进行 base64 编码处理，可以减少网络请求
减少体积
- 按需加载
在项目中往往会使用到各种UI组件，可以进行按需引入 - Tree Shaking
通过程序流分析找出你代码中无用的代码并剔除 - 路由懒加载
当打包构建应用时，JS 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效
代码层面
- 使用节流、防抖
- 减少DOM操作
- 使用Web Worker
- 避免重排与重绘
