浏览器缓存和压缩优化技术

HTTP缓存分类

  • 200 from cache:直接从本地缓存中获取响应,最快速,最省流量,因为根本没有向服务器发送请求
  • 304 Not Modified:协商缓存,浏览器在本地没有命中的情况下请求头中发送一定的校验数据到服务端,如果服务端数据没有改变浏览器从本地缓存响应,返回304。快速,发送的数据很少,只返回一些基本的响应头信息,数据量很小,不发送实际响应体
  • 200 OK:以上两种缓存全部失败,服务器返回完整响应。没有用到缓存,相对最慢
  • 本地缓存:浏览器认为本地缓存可以使用,不会去请求服务端
  • 协商缓存:当浏览器没有命中本地缓存,如本地缓存过期或者响应中声明不允许直接使用本地缓存,那么浏览器肯定会发起服务端请求。服务端会验证数据是否修改,如果没有则通知浏览器使用本地缓存

相关Header

  • Pragma:HTTP1.0时代的遗留产物,该字段被设置为no-cache时,会告知浏览器禁用本地缓存,即每次都向服务器发送请求
  • Expires:HTTP1.0时代用来启用本地缓存的字段,expires值对应一个形如Thu,31 Dec 2037 23:55:55 GMT的格林威治时间,告诉浏览器缓存实现的时刻,如果还没到该时刻,表明缓存有效,无需发送请求(浏览器与服务器的时间无法保持一致,如果时间差距大,就会影响缓存效果)
  • Cache-Control:HTTP1.1针对Expires时间不一致的解决方案,运用Cache-Control告知缓存过期的时间间隔而不是时刻,即使具体时间不一致,也不影响缓存的管理。
    • no-store:禁止浏览器缓存响应
    • no-cache:不允许直接使用本地缓存,先发起请求和服务器协商
    • max-age=delta-seconds:告知浏览器该响应本地缓存有效的最长期限,以秒为单位

优先级:Pragma > Cache-Control > Expires

  • Last-Modified:通知浏览器资源的最后修改时间
  • If-Modified-Since:得到资源的最后修改时间后,会将这个信息通过If-Modified-Since提交到服务器做检查,如果没有修改,返回304状态码
  • ETag:HTTP1.1推出,文件的指纹标识符,如果文件内容修改,指纹会改变
  • If-None-Match:本地缓存失效,会携带此值去请求服务端,服务端判断该资源是否改变,如果没有改变,直接使用本地缓存,返回304

缓存策略的选择

  • 适合缓存的内容
    • 不变的图像(logo、图标等)
    • js、css静态文件
    • 可下载的内容,媒体文件
  • 建议使用协商缓存
    • HTML文件
    • 经常替换的图片
    • 经常修改的js、css文件
    • js、css文件的加载可以加入文件的签名来拒绝缓存(xxx.css?【签名】)
  • 不建议缓存的内容
    • 用户隐私等敏感数据
    • 经常改变的api数据接口

前端代码和资源的压缩

优势:让资源文件更小,加快文件在网络中的传输,让网页更快的展现,降低带宽和流量开销

  • 压缩方式:js、css、图片、html代码的压缩
    • JavaScript代码压缩:去掉多余的空格和回车、替换长变量名、简化一些代码写法等(常见压缩工具:UglifyJS、YUI Compressor、Closure Compiler)
    • CSS代码压缩:去除空白符、注释并且优化一些CSS语义规则等(常见工具:YUI Compressor、CSS Compressor)
    • 图片压缩:压缩工具Tinypng、JpegMini、ImageOptim
    • Gzip压缩(Nginx配置):
      • gzip on|off #是否开启gzip
      • gzip_buffers 32 4k|16 8k #缓存(在内存中缓冲几块,每块多大)
      • gzip_comp_level[1-9] #推荐6压缩级别(级别越高,压的越小,越浪费CPU计算资源)
      • gzip_disable #正则匹配UA 什么样的URI不进行gzip
      • gzip_min_length 200 #开始压缩的最小长度
      • gzip_http_version 1.0|1.1 #开始压缩的http协议版本
      • gzip_proxied #设置请求者代理服务器,该如何缓存内容
      • gzip_types text/plain application/xml #对那些类型的文件进行压缩 如txt、xml、html、css
      • gzip_vary on|off #是否传输gzip压缩标志