如何优化CSS和JS缓存以提升网站性能？

一、CSS缓存

1、缓存方式

内联样式：通过style属性直接在HTML标签中定义样式，这种方式下的样式不会被浏览器单独缓存，而是随着HTML文档一起被缓存。<div style="color: red;">Hello</div>。

内部样式表：使用<style>标签在HTML文档的头部或底部定义样式，整个样式表会作为HTML文档的一部分被缓存，如：<style>body { background-color: lightblue; }</style>。

外部样式表：将CSS代码保存为独立的.css文件，通过<link rel="stylesheet" href="styles.css">引入到HTML文件中，这种方式是最常见的缓存方式，浏览器会将外部样式表文件缓存起来，当再次访问包含相同样式表的页面时，可直接从缓存中读取样式信息，加快页面加载速度。

2、缓存设置方法

设置过期时间：在CSS文件的响应头中添加“Expires”字段来设置文件的过期时间。<link rel="stylesheet" href="styles.css" Expires="Mon, 31 Dec 2024 12:00:00 GMT">，浏览器会在到期日期之前将文件保留在缓存中，避免每次访问都重新下载该文件。

设置缓存控制：通过设置“Cache-Control”标头更精确地控制缓存。<link rel="stylesheet" href="styles.css" Cache-Control="max-age=3600">，max-age”指示浏览器在访问该文件后的3600秒内将其保留在缓存中。

使用版本号：为了避免用户访问旧版本的CSS文件，可以在文件链接中添加一个版本号。<link rel="stylesheet" href="styles.css?v=1.1">，当CSS文件发生更改时，只需更新版本号即可，这将迫使浏览器重新下载并缓存新版本的文件。

二、JS缓存

1、缓存方式

内联脚本：使用<script>标签在HTML文档中直接编写JavaScript代码，这种方式下的脚本不会被浏览器单独缓存，而是随HTML文档一起被缓存。<script>console.log("Hello, world!");</script>。

外部脚本文件：将JavaScript代码保存为独立的.js文件，通过<script src="script.js"></script>引入到HTML文件中，浏览器会将外部脚本文件缓存起来，当再次访问包含相同脚本的页面时，可直接从缓存中读取脚本，提高页面加载速度。

2、缓存设置方法

设置过期时间：在JS文件的响应头中添加“Expires”字段来设置文件的过期时间。<script src="script.js" Expires="Mon, 31 Dec 2024 12:00:00 GMT"></script>。

设置缓存控制：通过设置“Cache-Control”标头更精细地控制缓存策略。<script src="script.js" Cache-Control="max-age=3600"></script>。

使用版本号：为了避免用户访问旧版本的JS文件，可以在文件链接中添加一个版本号。<script src="script.js?v=1.1"></script>，当JS文件发生更改时，只需更新版本号即可，这将迫使浏览器重新下载并缓存新版本的文件。

三、常见问题及解答

1、为什么需要缓存CSS和JS？

缓存CSS和JS文件可以加快网页加载速度，减少服务器负载，改善用户体验，因为浏览器可以直接从本地缓存中读取已缓存的文件，而无需再次向服务器发送请求获取这些文件，从而节省了时间和网络带宽。

2、如何验证CSS和JS是否被缓存？

可以使用浏览器开发者工具来验证CSS和JS是否被缓存，在网络面板中，查看资源的响应头信息，如果看到“Cache-Control”或“Expires”头，并且指定了适当的缓存时间，那么说明文件已成功缓存，如果请求的响应头信息中“Status Code”显示为200（OK），而不是304（Not Modified），则表示文件是从缓存中获取的。