缓存与浏览器运行速度优化指南

2023-09-21 19:36:19

作为前端，不得不面对 “面试官：304是什么状态码，可以具体说说么？”，“非前端伙伴：这个地方你改了么，怎么没有变化呀；前端伙伴：亲，强制刷新试试”······等等诸多痛点，而今天我们对症下药，来讲一讲浏览器缓存术。

缓存，即数据交换中暂时存放数据的部件。在计算机中，缓存被定义为一段时间内存储计算结果的部件，提高数据访问速度，减少计算开销。而浏览器缓存，便是浏览器为了减少带宽浪费，提升页面加载速度而采用的一项技术。

浏览器在解析 HTML 页面时，会先将静态资源（如图片、视频、JS 文件等）下载到本地硬盘中，之后再将其呈现在页面上。下次访问该页面时，浏览器会首先检查这些静态资源是否在本地硬盘中，如果存在，则直接从本地硬盘中加载，而不需要再从服务器端下载。

这种机制可以有效减少带宽的使用，加快页面的加载速度，从而提升用户体验。

内存缓存：
内存缓存是存储在计算机内存中的缓存，以键值对的形式存储数据，访问速度极快，但是当计算机重启或内存不足时，缓存中的数据将会丢失。
磁盘缓存：
磁盘缓存是存储在计算机硬盘中的缓存，以文件的形式存储数据，访问速度比内存缓存慢，但存储容量更大，并且当计算机重启或内存不足时，缓存中的数据也不会丢失。
服务端缓存：
服务端缓存是指存储在服务器端的缓存，当客户端访问某个资源时，服务器会先检查缓存中是否有该资源，如果有则直接从缓存中返回，而无需重新生成该资源。

可以使用 HTTP 头来控制浏览器缓存行为。常用的 HTTP 头有：

Expires：
Expires 头指定了资源的过期时间，当资源过期后，浏览器会从服务器端重新下载该资源。
Cache-Control：
Cache-Control 头可以指定多种缓存行为，包括：
- max-age=seconds： 指定资源的缓存时间，以秒为单位。
- no-cache： 禁止浏览器缓存该资源。
- no-store： 禁止浏览器和服务器缓存该资源。
ETag：
ETag 头是资源的唯一标识符，当资源发生变化时，ETag 头也会发生变化。浏览器在请求资源时，会将 ETag 头发送给服务器，服务器会根据 ETag 头判断资源是否发生变化。如果资源没有发生变化，则服务器会返回 304 状态码，浏览器会直接从缓存中加载该资源，而无需重新下载。

合理设置缓存时间：
合理设置缓存时间可以有效减少带宽的使用，提升页面加载速度。一般来说，静态资源的缓存时间可以设置得较长，而动态资源的缓存时间可以设置得较短。
使用强缓存：
强缓存是指浏览器在缓存有效期内不会向服务器端发送请求，即使服务器端资源已经更新。强缓存可以有效减少带宽的使用，提升页面加载速度。可以使用 Expires 头或 Cache-Control 头的 max-age 参数来设置强缓存。
使用协商缓存：
协商缓存是指浏览器在缓存有效期内向服务器端发送请求，服务器端根据资源的 ETag 头判断资源是否发生变化。如果资源没有发生变化，则服务器会返回 304 状态码，浏览器会直接从缓存中加载该资源，而无需重新下载。如果资源发生变化，则服务器会返回 200 状态码，浏览器会重新下载该资源。可以使用 Cache-Control 头的 no-cache 参数来设置协商缓存。