美文网首页
浏览器缓存和压缩优化技术

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

作者: 你与时光终会散 | 来源:发表于2019-07-08 17:22 被阅读0次

    一、HTTP缓存机制

    高并发下只能通过提升服务器负载解决?
    缓存只能做数据库缓存?
    启用浏览器缓存

    缓存分类
    HTTP缓存模型中,如果请求成功会有三种情况

    • 1、200 from cache:直接从本地缓存中获取响应,最快速,最省流量,因为根本没有向服务器发送请求。
    • 2、304 Not Modified:协商缓存浏览器在本地没有命中的情况下,请求头中发送一定的教验数据到服务端,如果服务端数据没有改变浏览器从本地缓存响应,返回304。
      快速,发送的数据很少,只返回一些基本的响应头信息,数据量很小,不发送实际响应体。
    • 3、200 OK:以上两种缓存全部失败,服务器返回完整响应。没有用到缓存相对最慢。

    常见状态码

    状态码 说明
    200 服务器成功返回网页
    301/2 永久/临时重定向
    304 Not Modified 未修改
    307 重定向中保持原有的请求数据
    404 请求的网页不存在
    503 服务器暂时不可用
    500 服务器内部错误

    本地缓存
    浏览器如果认为本地缓存能使用,不会去请求服务端。
    相关header
    Pragma:HTTP1.0时代的,该字段被设置未no-cache时,会告知浏览器禁用本地缓存。
    Expires:HTTP1.0时代的,缓存过期时间。浏览器与服务器时间无法保持一致,如果差距过大,就会影响缓存结果。
    Cache-Control:HTTP1.1,缓存过期的时间间隔。
    优先级 Pragma > Cache-Control > Expires

    协商缓存
    浏览器在本地没有命中的情况下,请求头中发送一定的教验数据到服务端,如果服务端数据没有修改,浏览器使用本地缓存
    相关header
    Last—Moidfied
    If-Modified-Since
    ETag HTTP1.1推出,文件的指纹标识符。
    If-None-Matche:本地缓存失败,会携带此值去请求服务端

    缓存策略的选择
    适合缓存的内容
    不变的图像、js、css、可下载的内容、媒体文件

    建议使用协商缓存
    HTML文件、经常替换的图片、经常修改的js、

    二、Nginx配置缓存策略

    add_header指令:添加状态码为2XX和3XX的响应头信息
    add_header name value [awalys’];
    可以设置Progma/Expires/Cache-Control,可以继承

    本地缓存配置
    expires指令:通知浏览器过期时长
    expires time;
    为负值时表示Cache-Control: no-cache
    为正值或者0就表示Cache-Control:max-age=指定的时间

    协商缓存配置
    etag 默认开启

    三、前端代码和资源的压缩

    让资源文件更小,传输更快
    js、css、图片、html
    Gzip压缩

    • js 去除空白符和注释,替换长变量名
    • css类似js
    • html 不建议压缩可以用Gzip压缩
    • 图片压缩 tinypng jpegMini ImageOptim
    • Gzip压缩 nginx配置 gzip on|off

    相关文章

      网友评论

          本文标题:浏览器缓存和压缩优化技术

          本文链接:https://www.haomeiwen.com/subject/wneahctx.html