前端性能优化-传输过程1.启用Gzip 用nginx对除了图片的资源开启传输层的压缩 2.启用keep-alive ht

1.启用Gzip

用nginx对除了图片的资源开启传输层的压缩

2.启用keep-alive

http的keep-alive 我们对tcp连接进行复用比如我们连接一个服务器我们就可以复用tcp连接如果连接量大的话很好用有益无害 http1.1之后默认开启

瀑布流的intial connect 默认情况下keep-alive会开启一般对同一台服务器的请求只有第一个请求有intial connect 其他都复用

可以在requestheaders里面看到connection:keep-alive

也可以在ngix里面配置开启不开启keep-alive

维护tcp连接也有开销所以keep-alive不是越长时间越多越好

3.http缓存减少网络开销

强制缓存/协商缓存

ngnix做配置

html文件:不做缓存因为单页应用html很重要所以每次都是最新的

cache-control:no-cache表示没有缓存 expires:0即没有过期时间

css/js文件：强制设置时间为7天，但是我们webpack本来就有contenthash作为文件标识当内容变化啦我们文件旧变化啦之前的名的文件的过期时间就没用啦相当于一个新的文件设置7天的过期时间

图片文件：一般可以设置长点

天猫官网的设置:

max-age=0：表示立即失效不要缓存

s-maxage=109:是给中间代理服务器的缓存

知乎的:

public:表示中间代理服务器可以缓存 private表示不需要中间代理服务器缓存我们不可以获取代理服务器上的文件缓存

no-store:完全强制让缓存失效我不关心文件有没有发生变化我一致要去服务器上拿数据之前的no-cache文件不变的话还是可以有304的文件不变读取缓存这个全是200 所以就没有etag这种判断文件有没有变化过期这种头部啦之前如果tag一样的话是返回304用缓存的

must-revalidate:表示我们需要重新和服务器确认资源有没有过期

谷歌的:

浏览器这一端建立一个serviceworker缓存

虽然设置了no-cache,revalidate表示要和服务器去确认资源是不是最新，但是没真正到服务器而是到servive-worker,直接告诉你命中缓存啦因为默认是public 是可以中间层缓存的

强缓存：设置这两个头部

Expires：过期时间，如果设置了时间，则浏览器会在设置的时间内直接读取缓存，不再请求

Cache-Control：当值设为max-age=300时，则代表在这个请求正确返回时间（浏览器也会记录下来）的5分钟内再次加载资源，就会命中强缓存。 max-age：用来设置资源（representations）可以被缓存多长时间，单位为秒；

4.serviceWorker

1.加速重复访问

2.离线支持:我们可以离线情况下也能让用户进行访问,资源可以从缓存里面拿

react工程里面自动就有service-worker，对应的webpack也有相关的配置

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

serviceworker会缓存所有需要的资源这一层在客户端当没服务端的时候会直接从这一层获取

缺点：

1.延迟首屏加载时间但是整体时间会缩小

2.兼容性问题

3.只能在localhost和https下使用

5.http2的提升

适合请求多的项目

使用https才能使用http2

https需要开启ssl 即安全证书 ssl-certificate(安全证书)ssl-certificate-key是私钥

1.多路复用：

http1.1:虽然我们可以用keep-alive减少建立连接的时间但是我们的资源还是串行的一个一个请求的

http2:实现啦真正的并行请求和多路复用，不同资源可以并行发起请求然后一起返回回来，且图片请求多个可以减少为一个请求

2.服务器推送

服务器可以提前把这些资源推送到浏览器端，浏览器把他们放到缓存里当他们要使用的时候就读取缓存里的

优势总结1.二进制传输(http1传输的是文本 http2传输的二进制更快和安全) 2.多路复用 3.server push 4.头部进行压缩保证更快

6.ssr渲染

1.加速首屏渲染

2.更好的seo

客户端渲染:我们需要先请求页面然后再去加载相关的js解析然后再去看到内容

服务端渲染我们拿到的页面已经是现成的页面啦直接看到内容不要加载js啦且更好seo 因为内容已经有了总之你的项目是需要去加载很多东西的用服务端渲染会加快很多因为已经加载好了，比如你要去加载动画读取数据库之类的

seo也可以前面采用静态的页面后面采用react 这样提高seo

前端性能优化-传输过程