性能优化之传输加载优化

本文最后更新于：2021/07/05 , 星期一 , 21:32

传输压缩方案-GZip

对传输资源进行体积压缩，可以高达90%

以下为nginx配置

gzip on;
gzip_min_length 1k; # 文件最小启用压缩大小
gzip_comp_level 6; # 压缩级别1-9 等级越高CPU消耗越高
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/xml text/javascript application/json; # 文件压缩类型，一般重点压缩文本类型，图片压缩使用gzip消耗大，收益小。
gzip_static on; # 已经压缩过的资源可以直接用
gzip_vary on;# 响应头添加vary属性，告知客户端启用gzip压缩
gzip_buffers 4 16k; #使用buffer优化压缩过程
gzip_http_version 1.1; #使用gzip的http版本

复用TCP链接-Keep Alive

不需要重复建立链接，节省了链接创建时间。

Chrome-DevTools-NetWork-waterfall-Initial connection只出现在第一个请求，后续没有这段消耗的时间。

可以通过response Headers-connection：keep-alive查看是否开启

以下为nginx配置：

1 2	`keepalive_timeout 65; # 超时时间，超过该时间不使用就会关闭。0表示不启用 keepalive_requests 100; # 利用该TCP链接可以发起多少个请求。`

HTTP资源缓存

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

Cache-Control/Expires
Last-Modified + If-Modified-Since：等价于第三种，但没有第三种好用：跟时间有关的，如果本地和服务器时间不同步会有坑。
ETag + If-None-Match：服务端先对文件生成唯一标识ETag，在第一次请求的时候带回来，第二次请求的时候请求头会有If-None-Match：ETag值的形式，如果ETag不匹配就拿新资源，匹配就返回304。

if($request_filename ~* .*\.(?:htm|html)$) # 匹配HTML，所有的资源都是通过html进行加载的，缓存可能导致用户拿不到最新内容。
{ 
    add_header Cache-Control "no-cache, must-revalidate"; # HTTP1.1 告知浏览器不需要缓存，需要的时候就去获取，获取完成后重新验证。
    add_header "Pragma" "no-cache"; # 考虑兼容性，告知HTTP1.0的浏览器不要缓存
    add_header "Expires" "0"; # 0或者负数代表告知浏览器立即过期。
  }
if($request_filename ~* .*\.(?:js|css)$) # 匹配js和css
{
  expires 7d; # 浏览器缓存7天
}
if($request_filename ~* .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm)$) # 匹配图片资源等
{
  expires 7d; # 浏览器缓存7天
}