Appearance

Nginx 缓存最佳实践 ​

对于静态资源 , 我们采用这几个策略

  • 开启 gzip 压缩
  • 开启 Etag , 采用服务器命中模式, 减少服务器数据传输
  • html 文件不缓存
  • js/css/img/font 缓存 2h 并开启 must-revalidate 服务端校验
  • font 文件不启用跨域(除非特定需要)

开启 gzip ​

转发服务器和源服务器 ​

警告

此处密钥信息请妥善留存, 请勿泄露

aliyun 全站加速 ​

警告

此处密钥信息请妥善留存, 请勿泄露

开启 etag ​

警告

此处密钥信息请妥善留存, 请勿泄露

资源文件的缓存配置 ​

不缓存 html, 不记录日志 no-cache = max-age=0,must-revalidate

# html, js, css files
location ~* \.(html)$ {
   add_header Cache-Control "no-cache";
   access_log off;
}

对图片资源, 字体, js, css 采取 2h 缓存, 采用本地缓存过期之后 + 服务端变动验证, 并不对资源文件进行访问日志记录

# img, font files
location ~* \.(jpg|gif|js|css|png|jpeg|bmp|svg|eot|woff|woff2|ico)$ {
  # max-age : 2 hour
  add_header Cache-Control "public, max-age=7200, must-revalidate";
  access_log off;
}

实操问题(加载时间过长) ​

当前存在的问题是加载页面时间过长, 可以从 带宽 , 资源 , 渲染 三方面来说明下

  • 带宽

指的服务器的出口速率

  • 资源

在框架加载完毕之后加载的资源数据

  • 渲染

加载完毕基础 dom 之后渲染骨架的时间

当前服务器拓扑结构如下

查找原因 ​

高防层加载速度对比 ​

这里有个更好的方式来对比, 就是使用 curl 根据不同的主机来下载数据

加入高防层

未加入高防层

对比原因, 高防层加载速度有限制, 当前无法对高防层进行处理, 所以把高防层作为备选通道

服务器 nginx 未开启压缩 ​

经过查看服务器的返回, 发现未对文本类型文件进行压缩处理, 增大了服务器之间的流量流出

解决方案 ​

  • gzip 压缩 : 减少贷款成本
  • 启用缓存 : 减少二次加载成本
  • 线路切换: 首选并非低速高防

全局流量管理 ​

使用全局流量管理, 保留最优线路访问, 在最优线路崩溃的情况下切换到防护线路

启用服务器 gzip ​

因为服务器有两层代理, 服务器之前均需要数据传输所以两边都需要开启压缩

仅开启防护机

开启服务机

发现大小并没有变化, 但是减少了 防护机->服务机 之间的网络流量

结果对比 ​

服务器调整之后

Dom 加载 3.86->1.16, 减少 2.7s