缓存优化配置和测试结果

最新推荐文章于 2025-04-01 11:11:34 发布

原创最新推荐文章于 2025-04-01 11:11:34 发布 · 476 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

28 篇文章

订阅专栏

浏览器缓存

2 篇文章

订阅专栏

本文详细介绍了如何在Apache服务器上通过配置HTTP响应头来优化网页缓存策略，包括设置ETag、Last-Modified和Max-Age参数，以及如何在HTML中加入版本控制以确保资源更新后客户端能获取最新资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

服务器配置

服务器：apache2.4.6 centos

在http.conf中

开启模块

LoadModule headers_module /etc/httpd/modules/mod_headers.so

增加缓存配置

配置etag、last-modified和max-age，这个地方对于js、css、png、jpeg等配置的7天的过期时间，对接系统可以自行调整

配置html页面的过期时间是1分钟，但是必须和服务器进行校验

#Etag MAXage SETTINGS 
<IfModule mod_headers.c>
<FilesMatch "\.(js|css|png|swf|pdf|xml|flv|gif|ico|jpeg)$">
RequestHeader edit "If-None-Match" "^(.*)-gzip(.*)$" "$1$2"
Header edit "ETag" "^(.*)-gzip(.*)$" "$1$2"
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
<FilesMatch "＼.(html|htm|php|shtml)$">
Header set Cache-Control "max-age=3600, must-revalidate"
</FilesMatch>
</IfModule>

这样配置之后页面第一次加载后，后续会使用浏览器的缓存，在过期之前不会请求服务器，除非浏览器因为缓存容量缓存清除。

页面设置

服务器配置了cache-control之后，页面还是需要考虑更新的问题，在html中建议对页面的资源增加md5或者时间戳，保证资源更新后客户端能够请求到最新的资源，例如：

<html>
    <head>
      <meta charset="utf-8">
    </head>
    <link href="./css/demo.css?20180905" rel="stylesheet">
    <script src="./js/jquery.js?20180905"></script>
<body></body>
</html>

当页面更新后，例如修改了css，需要同时修改html，然后把修改后的css和html一起上传到服务器

<html>
    <head>
      <meta charset="utf-8">
    </head>
    <link href="./css/demo.css?20180906" rel="stylesheet">
    <script src="./js/jquery.js?20180905"></script>
<body></body>
</html>

测试结果

为了保证测试结果，在页面中增加了部分图片，这里只有部分的关键代码

<html>
    <head>
      <meta charset="utf-8">
    </head>
    <link href="./css/demo.css" rel="stylesheet">
    <script src="./js/jquery.js"></script>
    <script src="./js/app.upchat.js" ></script>
    <script src="./js/vconsole.min.js"></script>
    <script type="text/javascript">
    	 var vConsole = new VConsole();
    	 console.log('test');
    </script>
    <body>
      <img src="./img/1.png" style="width: 200px" />
      <img src="./img/2.png" style="width: 200px"  />
      <img src="./img/3.png" style="width: 200px" />
      <img src="./img/4.jpeg" style="width: 200px"  />
    </body>
</html>

第一次加载：
在这里插入图片描述
可以看到地址加载用了20.86s

看返回的headers是有cache-control的