网络性能优化

设计网络方向的主要有三个：

  1. DNS 解析
  2. TCP 连接
  3. HTTP 请求/响应

HTTP 请求/响应

  1. 减少网络请求
  2. 减少单次网络请求所花费的时间

浏览器缓存

MemoryCache

图片全部会放到内存中缓存， 大文件的js或css会放到硬盘内，小的也放到内存中

ServiceWorkCache

独立于浏览器主线程，不能操作DOM，可以实现离线缓存、消息推送、网络代理

HTTPCache

20190802094419.png

  1. 强缓存

利用http请求头中的expires和Cache-Control两个字段来控制。同时出现时Cache-Control优先级更高

Cache-Control关键字理解

no-cache: 直接绕过浏览器缓存，直接请求服务器，响应字段如果有浏览器不缓存
no-store: 浏览器和服务器都不缓存
no-transform: 不要随意转换我发过来的东西
only-if-cached: 缓存中有就返回，没有就不返回
max-age: 用于请求头，超过年龄限制就返回新的
max-stale: 用于请求头，允许返回已经过期的资源，但有最大时间限制
min-fresh: 用于请求头，对即将过期的资源不返回
public: 用于响应头，允许客户端缓存数据，也能给别人使用，比如代理服务器可以缓存
private: 用于响应头，允许客户端缓存数据，不能给别人使用

  1. 协商缓存

依赖Last-Modified,If-Modified-Since和ETag,If-None-Match来实现

Last-Modified: response返回表示资源的最后修改时间
If-Modified-Since: 资源在请求期间是否有修改,如果没有修改，则命中协商缓存，从缓存中拿数据，如果有修改，则返回新的Last-Modified，和服务器资源

问题：

  • 周期性的重写资源，但是资源内容没有改动
  • 修改的内容不重要
  • Last-Modified时间太短无法精确

ETag: 资源的唯一标示，随服务器返回
If-None-Match: 服务器比较If-No-Match和当前资源的ETag比较，如果一样则返回缓存中的，如果不一样，就返回新的ETag和服务器资源

  1. HTTP 缓存决策

20190802111709.png

  • 资源内容是否复用，拒绝一切形式缓存
  • 是否需要向服务器发起请求
  • 是否可以被代理服务器缓存
  • 是否有缓存时间
  1. PushCache

指服务器HTTP2在server push阶段的缓存

  • Memory Cache、HTTP Cache 和 Service Worker Cache 均未命中的情况下才会去询问 Push Cache。
  • 只存在session使用期间
  • 共享同一个HTTP2连接，可以共享同一个PushCache