传输加载优化

一 、启用 Gzip 压缩

考虑因素:

  1. 压缩比
  2. 压缩时间

通过 Nginx 配置可以启用 Gzip 压缩,压缩率可高达90%。

通过响应头 Content-encoding 可以查看所启用的压缩格式。

二、启用 Keep-alive

keep-alive 是用来复用 TCP 连接的,如此,与同一台服务器就不需要重新建立 TCP 连接了,从而节省了 Initial Connection。(见 Chrome Dev Tools Network timeline)。

在 HTTP 1.1 后的版本默认使用 keep-alive,在响应头 connection 中可以看到是否启用了 keep-alive。

keep-alive 有两个关键项需要配置(以 Nginx 举例):

  1. keepalive_timeout,连接超时时间,超过后则断开。
  2. keepalive_requests, 利用该连接可发起的请求数,超过之后则断开。

三、HTTP 缓存

提高重复访问时资源加载的速度。

  1. Cache-Control/Expires
  2. Last-Modified + If-Modified-Since,兼容 HTTP1.0
  3. Etag + If-None-Match

详细参考:HTTP Caching

四、Service workers

有两个作用:

  1. 加速重复访问
  2. 提供离线支持

Service workers 在客户端中建立起中间层,拦截发往服务端的请求,进行细粒度的缓存控制。

使用 Service workers 需要注意的事项:

  1. 延长了首屏加载时间,但页面总加载时间减少
  2. 兼容性问题
  3. 只能在 localhost 和 HTTPS 下使用

五、HTTP/2 的提升

优势:

  1. 二进制传输
  2. 请求响应多路复用
    HTTP1 尽管也可以复用连接,但其实请求响应是有次序的;而HTTP2的多路复用可以做到一个连接上同时发起多个请求并接受多个响应,请求响应之间没有阻塞。
  3. Server push

Nginx 开启 HTTP2 的前提:

  1. Nginx1.10.0以上版本才支持Http2.0,如果使用的是Tengine,版本需要大于2.2.1
  2. Http2.0只支持Https协议的网站,且openssl版本需要高于1.0.2

六、服务端 SSR

好处:

  1. 加载首屏渲染
  2. 更好的 SEO

是否要使用SSR?

  • 架构 - 大型,动态页面,面向公众用户
  • 搜索引擎排名很重要
用户头像
登录后发表评论