在当今互联网时代，网站性能优化已经成为了网站开发和运维工作中至关重要的一环。而利用浏览器缓存可以是一种简单有效的优化方式。本文将为大家介绍利用浏览器缓存提升网站性能的技巧及实现方法，以帮助开发者优化网站的性能表现。
什么是浏览器缓存
浏览器缓存指的是浏览器在向服务器请求资源时，将该资源缓存到本地硬盘或内存中，此后再次请求该资源时不必从服务器重新获取，而是通过本地缓存提供服务。在浏览器缓存中，每一个缓存条目都由一个缓存键（URL）及对应的缓存值（响应）组成。
浏览器缓存可以分为两种：强缓存和协商缓存。
强缓存
强缓存是指浏览器在缓存时间内直接从本地缓存中获取资源，无需再向服务器发送请求。强缓存可以通过设置 Expires、Cache-Control 这两个请求头来实现。
Expires
Expires 是 HTTP/1.0 的产物，它的作用是告诉浏览器缓存的过期时间，即在该时间之前再次访问该资源，直接读取缓存。但是，由于 Expires 是 GMT 格式的时间，如果服务器与浏览器时间相差较大，则会造成缓存失效，因此这种控制方式已逐渐被弃用。
Expires: Thu, 01 Dec 2022 16:00:00 GMT
Cache-Control
Cache-Control 是 HTTP/1.1 的产物，它提供了更多的控制选项，在前端开发中使用更为广泛。Cache-Control 的值可以包含以下指令：
- no-cache：不使用本地缓存，每次都从服务器端请求最新的资源；
- no-store：不使用本地缓存，也不存储缓存内容，每次都从服务器端请求最新的资源；
- max-age：缓存的时间，以秒为单位。
Cache-Control: max-age=3600
协商缓存
当缓存过期时，浏览器需要向服务器发送请求以获得最新资源。此时，服务器可以选择返回最新资源，也可以选择返回“未修改”状态码，告知浏览器直接使用本地缓存。协商缓存可以通过设置 Last-Modified、If-Modified-Since、ETag、If-None-Match 这些响应头来实现。
Last-Modified 和 If-Modified-Since
Last-Modified 表示最后修改时间，If-Modified-Since 表示本地缓存的最后修改时间。服务器在收到请求时，同时将资源的最后修改时间通过 Last-Modified 返回给浏览器。浏览器再次请求该资源时，会带上 If-Modified-Since 头信息，表示本地缓存的最后修改时间。服务器收到请求后，会判断资源的最后修改时间是否晚于 If-Modified-Since 所指定时间。若最后修改时间晚于 If-Modified-Since，则返回新的资源；否则返回 304 Not Modified 状态码，让浏览器使用本地缓存。
Last-Modified: Tue, 21 Dec 2021 07:28:00 GMT If-Modified-Since: Tue, 21 Dec 2021 07:28:00 GMT
ETag 和 If-None-Match
ETag 是对文件进行哈希计算后得到的唯一标识符。服务器在收到请求时，同时将资源的 ETag 通过 ETag 头返回给浏览器。浏览器再次请求该资源时，会带上 If-None-Match 头信息，表示上次获取到的资源的 ETag 标识符。服务器收到请求后，会判断资源的 ETag 是否与 If-None-Match 所指定的 ETag 相同。若相同，则返回 304 Not Modified 状态码，让浏览器使用本地缓存，否则返回新的资源。
ETag: "f28c5-5b051114461c0" If-None-Match: "f28c5-5b051114461c0"
利用浏览器缓存提升网站性能
利用浏览器缓存可以大大降低重新请求资源的次数，进而提高页面的加载速度和响应时间。下面介绍几种利用浏览器缓存提升网站性能的技巧。
静态资源缓存
静态资源指的是 css、js、图片等不会频繁变化的资源。这些资源可以被缓存起来，以节省页面加载时间。静态资源缓存在服务器端生成缓存策略并应用于资源之后，可以让浏览器在请求同一资源时直接从缓存中读取，无需再次从服务器获取，进而提高页面加载速度。
静态资源缓存可以通过设置 Cache-Control 或 Expires 头信息来实现。因为静态资源一般都不会频繁改变，所以它们的缓存时间可以设置较长，以减少重复请求。
Cache-Control: max-age=604800 Expires: Fri, 31 Dec 2021 23:59:59 GMT
动态资源缓存
动态资源指的是页面数据、接口数据等根据请求不同而发生变化的资源。由于动态资源的变化无法通过缓存策略来控制，因此需要使用协商缓存来优化它们的请求。使用协商缓存可以让浏览器直接使用本地缓存，避免不必要的请求和响应，提高页面的加载速度。
协商缓存可以通过设置 Last-Modified、ETag 头信息来实现。当浏览器请求动态资源时，服务器返回资源的 Last-Modified 或 ETag，表示该资源的唯一标识符。浏览器下一次请求该资源时带上相应的头信息，服务器根据头信息比较得出是否需要返回新资源的数据。
Last-Modified: Tue, 21 Dec 2021 07:28:00 GMT ETag: "f28c5-5b051114461c0"
启用 Gzip 压缩
启用 Gzip 压缩可以减少页面传输的数据量，从而提高页面的加载速度。Gzip 是一种文件压缩技术，可以将文件的体积压缩到原始大小的一半以下，极大地减少数据传输的时间。
在启用 Gzip 压缩之前，需要先检查服务器是否支持 Gzip 压缩。如果支持，则可以通过设置响应头开启 Gzip 压缩。
Content-Encoding: gzip
媒体资源优化
媒体资源包括图片、音频、视频等文件，它们占据了大量的带宽和存储空间。为了提高页面的加载速度，需要对媒体资源进行相应的优化。
- 图片优化：使用 WebP 格式、调整图片大小、去除图片元数据等。WebP 是 Google 推出的一种新型图片格式，可以比传统格式更好地压缩图片，减少带宽占用和加载时间；
- 音频和视频优化：使用压缩格式、缩短时长、提高码率等。可以选择一些压缩格式，如 MP3、AAC、H.264 等，减少带宽占用，同时通过缩短时长、提高码率等方式让媒体资源更小、更快。
示例代码
下面是利用浏览器缓存优化静态资源的示例：
-- -------------------- ---- ------- --------- ----- ------ ------ ----------------------- ----- ---------------- ----- --------------- ---------------------------- ------------------- ----- ---------------- ---------------------- ------- ----------------------------- ------- ------ ----------------- ---------------------- ---- ---------------------- ----------- ------- --------------------------- ------- -------
服务器端设置响应头：
HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 Cache-Control: max-age=604800 Expires: Fri, 31 Dec 2021 23:59:59 GMT
总结
利用浏览器缓存可以有效地提高网站的性能表现。前端开发者可以通过设置缓存策略、启用 Gzip 压缩、媒体资源优化等方法，优化网站的页面加载速度和响应时间。强烈建议开发人员熟悉这些技巧，以获得更流畅、更快速的用户体验，提升网站的竞争力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649537ef48841e9894278c8d