首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

让浏览器缓存css js

以下是关于让浏览器缓存 CSS 和 JS 的相关内容:

基础概念: 浏览器缓存是指浏览器将网页中的静态资源(如 CSS、JS 文件)存储在本地,以便在后续访问相同页面时能够更快地加载,而无需重新从服务器获取。

优势

  1. 提高页面加载速度,改善用户体验。
  2. 减少服务器的负载和网络带宽的消耗。

类型

  1. 强缓存:通过设置 HTTP 头信息中的 ExpiresCache-Control 来指定资源的过期时间。
  2. 协商缓存:通过 Last-ModifiedETag 来判断资源是否更新,如果没有更新则使用缓存。

应用场景: 适用于不经常修改的静态资源,如网站的通用样式表和脚本。

要让浏览器缓存 CSS 和 JS ,可以在服务器端设置相应的 HTTP 头信息。

例如,在 Node.js 中使用 Express 框架,可以这样设置:

代码语言:txt
复制
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 服务器,可以在配置文件中这样设置:

代码语言:txt
复制
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 (其中 v1abc123 是根据文件内容生成的哈希值)。

这样当资源内容更新时,URL 也会变化,浏览器就会重新请求新的资源而不是使用缓存。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

14分52秒

099-浏览器的强制缓存与协商缓存

22分44秒

43.尚硅谷_JS高级_浏览器内核.avi

8分57秒

53.尚硅谷_HTML&CSS基础_浏览器默认样式.avi

16分1秒

102-浏览器缓存额外需要注意的事项和应用场景

7分12秒

72. 尚硅谷_佟刚_JavaWEB_禁用浏览器缓存的过滤器.wmv

13分54秒

04. 尚硅谷_JS模块化规范_commonjs基于浏览器端应用.avi

43分9秒

Web前端入门教程 22 CSS教程 17 浏览器私有前缀、圆角边框 学习猿地

11分20秒

Web前端框架通用技术 webpack5 11_处理CSS的浏览器兼容性 学习猿地

4分48秒

day05/上午/087-尚硅谷-尚融宝-安装谷歌浏览器中的Vue.js devtools

19分51秒

Web前端框架通用技术 webpack5 18_去除项目里的死代码(无用的js和css代码) 学习猿

1分29秒

开源JS加密工具:U加密

8分9秒

CSS实现炫酷的霓虹灯按钮动画,CSS霓虹灯按钮动画

24.7K
领券