为什么要进行性能优化？
57%的⽤户更在乎⽹⻚在3秒内是否完成加载
52%的在线⽤户认为⽹⻚打开速度影响到他们对⽹站的忠实
每慢1秒造成⻚⾯ PV 降低11%，⽤户满意度也随之降低降低16%
近半数移动⽤户因为在10秒内仍未打开⻚⾯从⽽放弃
PV: 一天网站一个页面被访问的次数，即浏览量
UV: 独立访问人数，即用户量
性能优化学徒工
- 雅虎军规
- 缓存策略
- 网站协议
- 小字优先
雅虎军规践行
可以用一张图来表示，能压缩的尽量压缩，谁大压缩谁。
- Google浏览器同一个域下请求并发为6，大小100k左右，压缩后30k
- 使用CDn，是因为不会携带多余的cookie。使用多个CDN，解决浏览器对同一域名的并发。
缓存策略
强缓存 > 协商缓存
cache-control > expires > etag > last-modified
平时实际例子：
- 常用的库 Jquery，对版本要求不是很高，一般设置为强缓存，只需要跟服务器校验
- 业务代码，通常是本地缓存，md5发生改变重新请求。
a. 首先先查看本地是否有该文件的缓存 b. 有，判断是否过期 i. 未过期，直接取缓存里的代码 ii. 已过期，删除key值，拉取文件。储存响应回来的etag、last-modified 等，增加新的key code c. 无，直接拉取文件，并增加key code、etag等 - 浏览器中 localStorage 5M, web SQL 50M
网络协议
通过升级http协议，HTTP2 多路复用
浏览器请求顺序：
- 解析域名
- http连接
- 服务器处理文件
- 返回数据
- 浏览器解析、渲染文件
http1.0 中没有keep-alive 长连接，所以每次发送请求时，都需要建立http请求。
http1.1 中添加了 keep-alive，默认长连接。就是为了解决，同一域名内多次请求数据，只建立一次http请求。其他请求可复用每一次建立的连接通道，以达到提高请求效率的问题。
但还是存在问题：
串行的文件传输
连接数过多
http2.0 多路复用是基于流，同一域名下不管访问多少文件，都只建立一路连接。
同样的Apache的最大连接为300， 有个这个新特性后，最大并发数就可以提升到300， 比原来提升了60倍！🎉
计算并发数
拿Google来做例子，浏览器发起最大的连接数为6。那么服务器能承载的最高并发数为50（300/6），当第51个人访问的时候，就需要前面的某个请求处理完成。
http2.0
渲染加载
详细流程参考 DOM 渲染过程
资料参考参考 现代浏览器渲染过程
结论
尽量避免 DOM 大量的 重绘/重排
CSS阻塞问题
详细流程参考 CSS I/O 阻塞优化
结论
CSS 会堵塞 DOM 渲染<但不会影响 DOM 的解析>
CSS 加载会阻塞后⾯的 js 语句的执⾏<已⾃⼰实际看到的为准>
CSS 会堵塞 DOMContentLoaded<同时存在css和js的时候>
页面加载
各项指标信息，移步至 页面性能指标
根据不同的情况做调优
白屏原因
主要分为
- css & js 文件获取 阻塞
- js 文件解析
- dom 生成
- cssom 生成
优化调优
- 包含基本 dom
- 基本的 css
- 骨架屏
vue 中的各个阶段
created 阶段 为 FP 阶段，只有空节点
mounted 节点 为 FCP 节点，包含基本的空节点，没有数据
update 阶段 为 FMP 阶段 挂载数据，视图更新
优化调优
在 FP 阶段，创建简单的骨架片，基本的 dom 结构
结论
主要由一下几点出发
几种对比
| 优/缺 | CSR | 预渲染 | SSR | 同构 |
|---|---|---|---|---|
| 优点 |
|
|
|
|
| 缺点 |
|
|
|
|