前言

vue打包的项目,首次加载时间很慢 想要优化一下速度

1.了解资源加载的时序

根据Tools for Web Developers
Request Timing API生命周期：
1.Redircet(重定向)： starTime,redirectTime,redircetEnd
2.App Cache(应用程序缓存)：fecthStart
3.DNS：domainLookupStart,domainLookupEnd
4.TCP： connectStart,secureConnectionStart,connectEnd
5.Request：requestStart
6.Response: responseStart,responseEnd

在DevTools中查看
Queuing: 某个请求正在排队，在HTTP1上，浏览器只允许每个源拥有6个TCP连接
Stalled/Blocking: 请求等待发送请求的时间
Proxy Negotiation: 与代理服务器协商所用的时间
DNS Lookup: 执行DNS查询所需要的时间，每一个新域都需要完整的往返才能执行DNS查询
Initial Connection/Connecting: 建立连接所需要的时间，包括TCP握手/重试 和协商SSL的时间
SSL: 完成SSL所需要的时间
Requeset Sent/Sending: 发出网络请求所需要的时间，通常不到一毫秒
Waiting(TTFB): 等待初始相应所用时间，也称为第一字节时间
Content DownLoad/DownLoading: 接收响应数据所用的时间

诊断网络问题
1.排队或停止阻塞
单个客户端检索的资源太多，在HTTP1.0/1.1连接协议中限制每个域名最多执行6个TCP连接，前6个请求后面的需要等待
->实现分域，用多个子域名提供服务资源，将资源拆分到多个子域中，均匀分配
HTTP2.0中已经实现了多路复用连接，不需要修改

2.接收到第一个字节时间很慢(绿色很长)
客户端和服务器端网络条件差
优化响应速度,优化数据库查询，缓存，修改web服务器配置
服务器响应程序很慢

3.加载很慢(蓝色很长)
发送更少字节，压缩图片大小

2.避免无效/多余请求

如果发生在网页请求开始阶段,会极大影响首屏渲染

2.1避免不必要的重定向

301,302 303/307重定向比较常见，不必要的重定向浪费时间

trailing slash(末尾斜杠): 是否含斜杠都响应相同内容

2.2尽量避免404

静态资源返回404浪费宽带,拖延页面渲染时间
404浪费一个TCP往返时间 + 其他时间
一个浏览器6个TCP并发，404会占用一个，导致其他会有延迟

favicon 浏览器会请求网址图标,如果不设置404

2.3正确标签的src

3.资源及其规则

主要是指JS/CSS/IMG

3.1资源尽量小,启用压缩

图片压到合适，不同设备不同分辨率
文本内容使用gzip压缩

3.2CDN与域名收敛

CDN与主站不在同一域名，可以避开浏览器同一域名最大6个TCP连接的限制，提高并发下载能力。

3.3合理设计缓存

图片，css和js考虑版本迭代

3.4合理的文件合并

多个文件or图片合并，减少http请求个数

3.5延迟下载

电商图 首屏不加载，按需加载