以下是关于让浏览器缓存 CSS 和 JS 的相关内容:
基础概念: 浏览器缓存是指浏览器将网页中的静态资源(如 CSS、JS 文件)存储在本地,以便在后续访问相同页面时能够更快地加载,而无需重新从服务器获取。
优势:
类型:
Expires
或 Cache-Control
来指定资源的过期时间。Last-Modified
或 ETag
来判断资源是否更新,如果没有更新则使用缓存。应用场景: 适用于不经常修改的静态资源,如网站的通用样式表和脚本。
要让浏览器缓存 CSS 和 JS ,可以在服务器端设置相应的 HTTP 头信息。
例如,在 Node.js 中使用 Express 框架,可以这样设置:
const express = require('express');
const app = express();
// 设置强缓存,缓存时间为 1 小时
app.use('/static/css', express.static('public/css', {
maxAge: '1h',
setHeaders: (res, path) => {
res.setHeader('Cache-Control', 'public, max-age=3600');
}
}));
app.use('/static/js', express.static('public/js', {
maxAge: '1h',
setHeaders: (res, path) => {
res.setHeader('Cache-Control', 'public, max-age=3600');
}
}));
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
如果使用 Nginx 服务器,可以在配置文件中这样设置:
location /static/css {
alias /path/to/public/css;
expires 1h;
add_header Cache-Control "public, max-age=3600";
}
location /static/js {
alias /path/to/public/js;
expires 1h;
add_header Cache-Control "public, max-age=3600";
}
当遇到缓存导致资源更新不及时,用户看到的是旧样式或功能的问题时,可以通过给资源的 URL 添加版本号或者哈希值来解决。例如:
style.css
改为 style.v1.css
或者 style.abc123.css
(其中 v1
或 abc123
是根据文件内容生成的哈希值)。
这样当资源内容更新时,URL 也会变化,浏览器就会重新请求新的资源而不是使用缓存。
领取专属 10元无门槛券
手把手带您无忧上云