12 传输优化

GZIP压缩

启用keep alive

默认http1.1以后默认开启

  • keepalive-timeout 保持时间 s
  • keepalive-requests 链接数

http 缓存

  • cache control 1.1 / expires 1.0
  • Last-modified if-modified-since 1.0
  • Etag if-none-match 1.1

一般设置:html 不缓存, css、js缓存过期时间可以设置的很长,因为一般使用hash命名文件

图片、字体不经常更换的话,缓存时间设置长一点

server-work和HTTP2 都依赖https,可以生成自签名的证书

http2

  • 二进制传输(http1.1是基于文本的,传输效率慢且不安全)
  • 请求响应多路复用
  • server push (服务器直接推送,没有请求过程)
  • 只能部署在https
  • 适合较高的请求量

资源优先级

  • 浏览器默认安排资源加载优先级
  • 使用preload,prefetch调整优先级
  • preload 提前加载较晚出现,但对于当前页面非常重要的资源
    • 就是通过标签显式声明一个高优先级资源,强制浏览器提前请求资源,同时不阻塞文档正常onload
    • preload link必须设置as属性来声明资源的类型(font/image/style/script等),否则浏览器可能无法正确加载资源。
  • prefetch 提前加载后继路由需要的资源,优先级低

文章写的相当好
pre系列讲解
同上,防止链接挂掉

接口缓存策略

  1. ajax/fetch缓存
    • 前端请求的时间带上cache,依赖浏览器本身缓存机制
  2. 本地缓存
    • 异步接口数据优先使用本地localStorage中的缓存数据
  3. 多次请求
    • 接口数据本地无localStorage缓存数据,重新再次发出ajax请求

使用CDN

CDN优点

cdn回源

回源是指浏览器访问cdn集群上静态文件时,文件缓存过期,直接穿透cdn集群而访问源站机器的行为。(发生这种情况后,cdn会更新文件及缓存标记)

cdn缓存

cdn缓存

cdn灰度发布

减少http请求

减少http请求