zoukankan      html  css  js  c++  java
  • HTTP 笔记与总结(7)HTTP 缓存(配合 Apache 服务器)

    在网络上,有一些缓存服务器,另外浏览器自身也有缓存功能。

    例如:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<img src="./a.jpg" alt="">
    </body>
    </html>
    

    第 1 次访问该页面时,正常下载图片,返回值是 200:  

    响应头的抓包分析:

    基于一个前提——图片不会经常改动,服务器在返回 200 的同时,还返回该图片的特征值(签名 ETag),当浏览器再次访问该图片时,就回去服务器椒盐 ETag,如果图片没有变化,则直接使用缓存中的图片,减轻了服务器的负担:

    响应头的抓包分析:

     自(If-Modified-Since 的)时间点后图片修改过,则重新请求;如果图片最新的签名(ETag)和上次返回(If-None-Match)的值不匹配,则重新请求。此时响应值是 304,浏览器从本地取缓存,节省了图片在网络上传输的时间。

    请求头的 If-None-Match 和 响应头的 Etag 对应,请求头的 If-Modified-Since 和 响应头的 Last-Modified 对应。

    HTTP Cache-Controll 请求头信息

    在大型网站中,如何处理主服务器和缓存服务器之间的问题:要不要缓存和缓存多久,需要用到 HTTP Cache-Controll 请求头信息

    步骤:

    ① 主服务器需要开启 mod_expires 模块(Apache 服务器)

    利用该扩展来控制图片、css、html 等文件是否缓存以及缓存的生命周期,

    ② 在当前目录下新建 .htaccess 文件

    语法

    ExpiresDefault "<base> [plus] {<num> <type>}*"
    ExpiresByType type/encoding "<base> [plus] {<num> <type>}*" 
    

    后面 4 个参数分别表示

    base:基于哪个时间点来计算缓存有效期,有两个值:access/now,now 等价于 access,表示基于请求响应的那一瞬间;另一个值是 modification,表示被请求文件的最后修改日期,比如被修改后的一周内仍然有效

    plus:可选参数

    num:缓存时间的大小(30)

    type:缓存时间的单位(天)

    【例】

    给 jpg 图片设置 1 个月的生存周期  

    .htaccess:

    ExpiresActive On
    ExpiresByType image/jpeg "access plus 1 month"
    

    执行页面,抓包分析:

      

    如果在集群环境中,缓存服务器得到此图片,将会认为在一个月内有效,减轻了主服务器的负担。

    设置服务器不让用缓存

    比如有些个人信息不允许缓存服务器缓存,必须到主服务器请求。

    可以利用 apache 服务器的 mod_headers 模块 

    在 .htaccess 中追加信息

    .htaccess:

    ExpiresActive On
    ExpiresByType image/jpeg "access plus 1 month"
    
    <FileMatch ".(gif|png)$">
    header set Cache-Controll "no-store,must-revalidate"
    <FileMatch>
    

    使用正则表达式,设置当图片是 gif 或 png 格式的图片时,不允许缓存。

    修改 cache-01.html  

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<img src="./a.jpg" alt="">
    	<img src="./php.gif" alt="">
    </body>
    </html>
    

    执行文件,抓包分析:

      

    多次刷新页面,php.gif 的响应值都是 200。

    新浪微博(不允许缓存)的抓包图:

  • 相关阅读:
    使用原生JS封装一个动画函数
    在Vue 中调用数据出现属性不存在的问题
    vs code 如何修改默认主题的注释颜色
    HTML5新标签的兼容性处理
    如何在Vue中使用Mockjs模拟数据的增删查改
    call、apply和bind的用法
    JS原型继承的几种方式
    JavaScript基础部分经典案例
    运算符与基本数据类型
    python安装与初始
  • 原文地址:https://www.cnblogs.com/dee0912/p/4652964.html
Copyright © 2011-2022 走看看