浏览器缓存问题Cache-Control
发布时间
阅读量：
阅读量
阅读此文章：你将更易理解浏览器缓存问题，并可直观观察到一个简单的HTTP服务与客户端之间的交互关系。该方法能够帮助我们更高效地加载资源，并减少重复请求的发生。然而，在服务器端更新资源时会遇到一个问题：由于客户端通常会先访问缓存副本以获取已有的数据包而不主动重传新版本的内容包。这会导致网页无法及时更新以反映最新的服务器端变更信息。
针对这一问题提供了解决方案：在构建打包流程时，在文件名后附加基于内容的一串哈希码（Hash Code）。这些哈希码是根据JavaScript、HTML和CSS内容进行编码生成的。对于JS文件或静态文件而言，在其内容未发生变化的情况下（即代码逻辑、样式和功能保持一致），对应的哈希值也不会变化；从而在Web应用中表现为URL地址未发生变化的状态。然而当内容发生变化时（如代码逻辑更新、新增或删除功能模块等），相应的哈希值也会随之改变；这就导致URL路径发生变化并触发新的HTTP请求过程。这种机制能够有效地实现旧版资源不再被客户端缓存的现象，并确保只有最新的数据包才会被发送给客户端系统以完成更新任务的目标。
const http = require('http')
const fs = require('fs');
http.createServer(function(request,response){
console.log('request come',request.url)
if( request.url === '/'){
const html =fs.readFileSync('test.html','utf8')
response.writeHead(200,{
'Content-Type':'text/html'
})
// 服务器返回内容
response.end(html)
}
if( request.url === '/script.js'){
response.writeHead(200,{
'Content-Type':'text/javascript',
'Cache-Control':'max-age=20'
})
// 服务器返回内容
response.end('console.log("script loaded")')
}
}).listen(8888)
console.log("server listening 8888")
// 2定义了以fs为协议的fs对象
// 6以utf8的方式去读取test.html
// 返回的头是200 文本类型是'Content-Type':'test/html' 来解析的
AI写代码test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
Hello World jajajpfajfpajfpa
</body>
</html>
<script src="/script.js"></script>
AI写代码怎么查看Cache-Control
为服务端页面设置Cache-Control: max-age=20的配置。这将使重新刷新页面时获得之前缓存后的数据。通过本地浏览器读取数据即可避免向服务器发起请求。无需经历网络延迟的操作。Network中可以看到Headers字段中的Cache-Control属性设为max-age=20；请确保禁用Cache选项以允许缓存。其中size表示从内存缓存获取的数据大小，默认值为0ms。
全部评论 (0)
还没有任何评论哟~