前端面试常见浏览器缓存（强缓存、协商缓存）代码实操

2024-02-18 17:44:20

在前端面试中，浏览器缓存是一个经常被问到的问题。缓存可以减少服务器的压力，提高网站的访问速度。浏览器缓存有两种类型：强缓存和协商缓存。

强缓存

强缓存是指浏览器直接从本地缓存中读取数据，而不会向服务器发送请求。当浏览器第一次访问一个网站时，它会将网站的资源（如HTML、CSS、JavaScript文件等）下载到本地缓存中。当浏览器再次访问该网站时，它会首先从本地缓存中读取资源，如果资源没有发生变化，则不会向服务器发送请求。

强缓存的优点是速度快，因为浏览器不需要向服务器发送请求。但是，强缓存也有一个缺点，那就是如果资源发生了变化，浏览器仍然会从本地缓存中读取旧的资源。

协商缓存

协商缓存是指浏览器向服务器发送请求，询问资源是否发生变化。如果资源没有发生变化，则服务器会返回一个304 Not Modified状态码，浏览器会继续使用本地缓存中的资源。如果资源发生了变化，则服务器会返回资源的新版本，浏览器会更新本地缓存中的资源。

协商缓存的优点是，它可以确保浏览器总是使用最新的资源。但是，协商缓存的缺点是，它需要向服务器发送请求，因此速度没有强缓存快。

代码实操

下面我们通过一个代码示例来说明如何使用强缓存和协商缓存。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <img src="image.png">
</body>
</html>

当浏览器第一次访问这个页面时，它会将image.png文件下载到本地缓存中。当浏览器再次访问该页面时，它会首先从本地缓存中读取image.png文件。如果image.png文件没有发生变化，则浏览器不会向服务器发送请求。

<?php
  $file = 'image.png';
  $lastModified = filemtime($file);
  header('Cache-Control: max-age=3600');
  header('Last-Modified: ' . gmdate('D, d M Y H:i:s \G\M\T', $lastModified));
?>

上面的代码是一个PHP脚本，它可以用来设置强缓存。Cache-Control头指定了缓存的有效时间为3600秒（1小时）。Last-Modified头指定了资源的最后修改时间。

<?php
  $file = 'image.png';
  $lastModified = filemtime($file);
  $etag = md5_file($file);
  header('Cache-Control: max-age=3600');
  header('Last-Modified: ' . gmdate('D, d M Y H:i:s \G\M\T', $lastModified));
  header('ETag: ' . $etag);
?>