浏览器缓存策略详解

响应头字段

如何缓存以及采取那种缓存策略，都要由服务器首先告诉浏览器。即在浏览器首次发出请求后，服务器发送给浏览器的响应头字段如下——

1. Cache-Contorl

Cache-Control，即缓存策略，是浏览器读取缓存策略第一站，这个字段告诉了浏览器我们应该采取那种缓存策略——

private 仅允许客户端浏览器缓存
public 代理服务器和客户端浏览器都可以缓存

特别的值，
3. max-age:时间（秒），指定浏览器本地缓存数据的时间。
max-age和private或public可以同时组合存在，例如

Cache-Control: max-age:3000,public
4. no-cache 不使用“本地计时缓存”，但不影响使用“协商缓存”

2. date

既然指定了缓存多久，那么，肯定要记录下当前请求的时间呀，这样才能开始缓存，并计算出什么时候到期嘛。

所以，服务器会在返回的响应中用date字段存下当前的时间提供给浏览器比对。实际上使用Cache-Control:max-age:xxx配合date是一个组合，告诉浏览器当前请求的时间，以及在本地应该缓存多久。这种由服务器告知，而后在本地缓存指定时间的缓存方式我们称之为“ 由本地计时决定的强制缓存 ”。

现在问个很关键的问题，如果本地计时已经超过了我们设置的时间，浏览器会重新请求服务器获得最新的资源吗？

3. Last-Modified

我们仔细观察服务器的响应，发现服务器还会提供一个Last-Modified字段，这个字段是做什么用的呢？

Last-Modified顾名思义，资源上一次编辑的时间，这里我们可以回答前面的提问，如果本地的缓存计时的时间到了，浏览器会重新请求服务器能够获取到最新的数据吗？

不不，虽然确实会重新请求服务器即再次发起请求，但是，浏览器会重新向服务器协商，询问接下来要怎么做。这个阶段我们称之为“ 由向服务器协商后决定的协商缓存 ”，又服务器决定浏览器是否能够拉取到最新数据。

浏览器在再次请求服务器的时候，会带上If-Modified-Since字段，也就是上次服务器提供的Last-Modified里面的时间，服务器收到这个字段以后，会在服务端对数据的实际编辑时间进行比对，检查数据是否有变动，如果有，返回最新的数据，用正常200响应；如果没有，不返回任何实际数据而只返回304-not modified状态码，告诉浏览器资源没有发生更改，继续使用本地的强缓存。同时服务器会提供新的Last-Modified时间，浏览器开始了新的一轮max-age配合Last-Modified缓存计时。

max-age不存在或者为0，则不需要计时，每次提供Last-Modified由服务器比对。实际上提供了max-age只是为了减少请求服务器比对的次数，节约服务器资源。

好了，到此为止浏览器基础的缓存策略的逻辑我们已经了解啦。下面上一张图，还有一些扩充知识。咦这张图里怎么多了一个Etag？

图片描述

实际上Etag是一种新的机制，可以取代Last-Modified，弥补L-m以时间为依据提供给服务器比对数据的一些不足。因为时间差如果很小就很难比对。

那么，类似于Last-Modified对应If-Modified-Sense。
Etag也对应了If-None-match

关于Etag的具体机制和用法可以自行搜索了解，本文不再介绍啦。

4. 总结

本地强缓存配合协商缓存的两种策略
策略一：max-age结合data配合last-modified（响应）和if-modified-sense（请求）
策略二：max-age结合data配合etag（响应）和if-none-match

如果cache-control没有提供max-age或者max-age为0，或者提供了no-cache
说明不采用本地强缓存，转而采用协商缓存。

此时将和服务器协商，依然是两种缓存策略：

仅使用协商缓存的两种策略
策略一：last-modified（响应）和if-modified-sense（请求）
策略二：etag（响应）和if-none-match

注意无论是哪一种方式，最终都要和服务器协商，即本地计时的强制缓存是可选的，而协商缓存是必然的。

[查看全文]

喵の守护

展开Biu

div如果有背景，滚动条部分会有一个白条，有办法让它透明吗

在CSS中，可以设置滚动条的样式以实现透明效果。以下是一个示例：

div::-webkit-scrollbar {
  width: 10px; /* 定义滚动条宽度 */
}

div::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3); /* 这里设置滚动条滑块的颜色和透明度，你可以调整最后一个参数（这里是0.3）来改变透明度 */
  border-radius: 5px; /* 可选，定义圆角 */
}

div::-webkit-scrollbar-track {
  background-color: transparent; /* 这里设置滚动条轨道（也就是你说的白条部分）为透明 */
}

这段代码是针对Webkit内核浏览器（如Chrome、Safari）的滚动条样式的设置。对于Firefox等其他浏览器，可能需要使用不同的前缀或者更复杂的解决方案。

请注意，Internet Explorer浏览器不支持自定义滚动条样式，因此在IE上无法直接实现此效果。另外，对于非Webkit内核的现代浏览器，你可能需要查询并应用相应的CSS样式规则。

对了，两个冒号是什么意思

在CSS中，两个冒号 :: 用于表示伪元素选择器。与单个冒号 : 用于伪类（如:hover、:active等）不同，双冒号 :: 主要用来区分新的伪元素和旧的CSS1时代引入的伪元素。

例如：

::before 和 ::after 用于在元素内容的前后插入额外的内容（通常通过content属性定义）。
::-webkit-scrollbar、::-webkit-scrollbar-thumb 和 ::-webkit-scrollbar-track 是Webkit内核浏览器特有的伪元素，用于自定义滚动条样式。

这种双冒号语法在CSS3中被推荐使用，以明确区分伪类和伪元素，尽管大多数现代浏览器对两者都支持单冒号形式。但在某些情况下，为了确保兼容性和明确性，建议使用双冒号 ::。

那我如果写的是行内样式，怎么办，不支持伪选择器

行内样式（即HTML元素的style属性）不支持伪元素选择器，因为它们只能设置单个元素的基本样式，而无法影响到元素内的伪元素或伪类。

对于滚动条样式的自定义，由于其需要用到伪元素选择器，所以无法通过行内样式实现。你必须在CSS文件或者HTML文档 *HTML标签不可使用噢* 标签中编写CSS规则来改变滚动条的样式。

如果你确实需要在行内样式中控制某个元素的滚动条样式，那么很遗憾，目前的标准和浏览器实现都不支持这样的做法。你只能将样式移到外部CSS文件或内部样式表（*HTML标签不可使用噢*标签）中进行定义。

[查看全文]