面试神器之你要知道的header操作

最新推荐文章于 2022-08-10 22:05:53 发布

前端优选

最新推荐文章于 2022-08-10 22:05:53 发布

阅读量322

点赞数

文章标签： java js css javascript http

戳蓝字"

Web前端严选

关注我们哦

！

不仅是前端性能优化，在常见开发中也会涉及到header的配置操作，那么header中都有哪些需要了解的呢？

首先就要说到请求的缓存，与强缓存相关的 header 字段有两个：

1、expires

「expires：」 这是 http1.0 时的规范，它的值为一个绝对时间的 「GMT」 格式的时间字符串，如 Mon,10Jun201521:31:12GMT，如果发送请求的时间在 「expires」 之前，那么本地缓存始终有效，否则就会发送请求到服务器来获取资源。

2、Cache-Control

「cache-control」：max-age=number ，这是 http1.1 时出现的 header 信息，主要是利用该字段的max-age 值来进行判断，它是一个相对值；资源第一次的请求时间和 「Cache-Control」 设定的有效期，计算出一个资源过期时间，再拿这个过期时间跟当前的请求时间比较，如果请求时间在过期时间之前，就能命中缓存，否则未命中， 「cache-control」 除了该字段外，还有下面几个比较常用的设置值：

「no-cache：」 不使用本地缓存。需要使用缓存协商，先与服务器确认返回的响应是否被更改，如果之前的响应中存在 ETag ，那么请求的时候会与服务端验证，如果资源未被更改，则可以避免重新下载。
「no-store：」 直接禁止游览器缓存数据，每次用户请求该资源，都会向服务器发送一个请求，每次都会下载完整的资源。
「public：」 可以被所有的用户缓存，包括终端用户和 CDN 等中间代理服务器。
「private：」 只能被终端用户的浏览器缓存，不允许 CDN 等中继缓存服务器对其缓存。

❝
如果 cache-control 与 expires 同时存在的话，cache-control 的优先级高于 expires。
❞

3.协商缓存

协商缓存都是由浏览器和服务器协商，来确定是否缓存，协商主要通过下面两组 header 字段，这两组字段都是成对出现的，即第一次请求的响应头带上某个字段（ 「Last-Modified」或者 「Etag」 ），则后续请求会带上对应的请求字段（「If-Modified-Since」 或者 「If-None-Match」 ），若响应头没有 「Last-Modified」 或者 「Etag」字段，则请求头也不会有对应的字段。

「1、Last-Modified/If-Modified-Since」

二者的值都是 GMT 格式的时间字符串，具体过程：

浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在 response 的 header 加上 「Last-Modified」字段，这个 header 字段表示这个资源在服务器上的最后修改时间。
浏览器再次跟服务器请求这个资源时，在 request 的 header 上加上 「If-Modified-Since」 字段，这个 header 字段的值就是上一次请求时返回的 「Last-Modified」 的值。
服务器再次收到资源请求时，根据浏览器传过来 「If-Modified-Since」 和资源在服务器上的最后修改时间判断资源是否有变化，如果没有变化则返回 304NotModified ，但是不会返回资源内容；如果有变化，就正常返回资源内容。当服务器返回 304NotModified 的响应时， response header 中不会再添加 「Last-Modified的header」 ，因为既然资源没有变化，那么 「Last-Modified」 也就不会改变，这是服务器返回 304 时的 response header。
浏览器收到 304 的响应后，就会从缓存中加载资源。
如果协商缓存没有命中，浏览器直接从服务器加载资源时，「Last-Modified」 的 Header 在重新加载的时候会被更新，下次请求时，「If-Modified-Since」 会启用上次返回的「Last-Modified」 值。

「2、Etag/If-None-Match」

这两个值是由服务器生成的每个资源的唯一标识字符串，只要资源有变化就这个值就会改变；其判断过程与 「Last-Modified、If-Modified-Since」 类似，与 「Last-Modified」 不一样的是，当服务器返回 304NotModified 的响应时，由于 「ETag」重新生成过， response header中还会把这个「ETag」 返回，即使这个 「ETag」 跟之前的没有变化。

❝
Tips：Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。
❞

4.immutable - 从不请求资源两次

在现代前端应用程序中，样式表和脚本文件通常具有唯一的文件名，如styles.123abc.css。此文件名取决于特定文件的内容。当这些文件的内容发生更改时，会生成不同的文件名。

这些唯一文件可能会被永久缓存，包括用户刷新页面时的情况。不可变特征可以告诉浏览器不要在特定时间范围内重新验证资源。这对指纹验证的资源很有意义，有助于避免重新验证请求。

Cache-Control: max-age=31536000, public, immutable

5.Accept-Encoding - 压缩到最大值

使用 「Cache-control」，我们可以保存请求并减少重复通过线路传输的数据量。我们不仅可以保存请求，还可以缩小转移的内容。在提供资源时，开发人员应确保尽可能少地发送数据。对于像HTML这样的基于文本的资源，CSS和javascript压缩在保存传输数据方面起着重要作用。目前最常用的压缩是GZIP。服务器足够快，可以动态压缩文本文件，并在请求时提供压缩数据。GZIP不再是最好的选择了。如果您检查浏览器对基于文本的文件（如HTML，CSS和JavaScript）所做的请求，并查看请求标头，您将找到「accept-encoding」 Header。