前端缓存案例

最新推荐文章于 2024-05-17 14:32:46 发布

Joe Kittinger 。

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量250

点赞数

分类专栏： HTTP 文章标签：前端缓存 nginx http

本文链接：https://blog.csdn.net/qq_45601687/article/details/126266185

版权

HTTP 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

⼀、情况说明

有⼀个1年前开发好的⻚⾯，使⽤html+css，后端使⽤nginx部署，内容和配置如下：

⻚⾯⽂件
⻚⾯内容

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Index</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div class="txt">Hello World!</div>
</body>
</html>

index.css

*{
 margin:0;
 padding:0;
}
.txt{
 background:#f1f1f1; 
 color:#ccc;
 font-size:70px; 
 display:flex; 
 align-items:center;
 justify-content:center;
 width:100vw;
 height:100vh; 
 }

nginx配置

#user nobody; 
worker_processes 1; 
#error_log logs/error.log; 
#error_log logs/error.log notice; 
#error_log logs/error.log info; 
#pid logs/nginx.pid; 
events { worker_connections 1024; }
http {
    include mime.types; 
    default_type application/octet-stream; 
    #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' 
    # '$status $body_bytes_sent "$http_referer" ' 
    # '"$http_user_agent" "$http_x_forwarded_for"'; 
    #access_log logs/access.log main; 
    sendfile on; 
    #tcp_nopush on; 
    #keepalive_timeout 0; 
    keepalive_timeout 65; 
    #gzip on; 
    server { 
        listen 80; 
        server_name localhost; 
        location / { 
            root html; 
            index index.html index.htm; 
            }
        }
    }

运⾏效果

⼆、缓存复现

浏览器中输⼊地址访问
打开浏览器在地址栏输⼊http://localhost进⾏⻚⾯访问（此次打开的⻚签记为Tab1，此时css文件是访问的memory cache），访问结果为：

将访问后的地址，添加到书签便于后续访问。
2. 内容修改
对index.html和index.css分别进⾏以下内容修改

index.html
将Hello World!修改为Hello

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Index</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div class="txt">Hello!</div>
</body>
</html>

index.css
将color:#ccc 修改为color:red

*{
 margin:0;
 padding:0;
}
.txt{
 background:#f1f1f1; 
 color:red;
 font-size:70px; 
 display:flex; 
 align-items:center;
 justify-content:center;
 width:100vw;
 height:100vh; 
 }

新开⻚签访问（由于是一年前文件且服务器未配置请求头，首次会出现启发式缓存，所以当在地址栏输入、点击书签跳转会访问启发式缓存的内容，所以会出现以下两种情况）
1）新开⻚签（记为Tab2），输⼊http://localhost 效果如下：（此时css读取的是disk cache的缓存）

2）新开⻚签（记为Tab3）, 点击书签进⾏访问效果如下：（此时css读取的是disk chace的缓存）

3）分别点击地址栏右侧刷新按钮，刷新Tab2和Tab3效果：（此时协商缓存HTML更新，但是css依旧访问disk chace）
tab2

tab3 在这里插入图片描述

4）ctrl+F5强制刷新Tab3后，分别点击地址栏右侧刷新按钮，刷新Tab1，Tab2效果：（强刷后，css文件重新请求，由于tab3的是disk cache 所以同时更新到访问disk cache的tab2，所以tab2刷新后css文件也重新加载，而tab1访问的是自有的memory cache 所以更新到disk cache的css并不会更新到tab1，所以tab1的颜色依旧是#ccc）
tab3
在这里插入图片描述
tab2

tab1

4. 内容修改
⽂字改回Hello World! 颜⾊改为blue, 后分别刷新Tab1,Tab2,Tab3
（因为tab1访问的是自有的memory cache 且并未ctrl+F5强制刷新，所以memory cache缓存中的css文件并未更新，还是原始的文件#ccc灰色，而tab2、tab3访问的是disk cache（并且ctrl+F5强制刷新过），tab3点击刷新时，会通过协商缓存访问服务器是否修改，如果修改则更新页面并重新缓存到disk cache，所以tab2，tab3都变蓝）
tab1 在这里插入图片描述
tab2

tab3

三.总结

1.上述的情况的结果会因为缓存类型不同导致不同显示效果：（至于何时出现何种缓存类型由浏览器策略决定：内存缓存少时使用硬盘缓存，反之优先）

1.如果三个tab的缓存类型都为memory cache:在tab3使用ctrl+F5强制刷新后，tab2的情况就会像tab1一样，并不会随着tab3进行变化，因为tab1，2，3都访问的自有缓存memory cache
2.如果三个tab的缓存类型都为disk cache:在tab3使用ctrl+F5强制刷新后，tab1也会像tab2、tab3的情况一致进行变化，因为tab1，2，3都访问的同一个缓存disk cache
3.其他情况可以根据以上两点自行测试

Joe Kittinger 。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端缓存案例

1.上述的情况的结果会因为缓存类型不同导致不同显示效果：（至于何时出现何种缓存类型由浏览器策略决定：内存缓存少时使用硬盘缓存，反之优先）1.如果三个tab的缓存类型都为memory cache:在tab3使用ctrl+F5强制刷新后，tab2的情况就会像tab1一样，并不会随着tab3进行变化，因为tab1，2，3都访问的自有缓存memory cache。...
复制链接

扫一扫