安科网

浏览器之HTTP缓存的那些事

zaocha

zaocha

2019-06-28

关注 关注

缓存是提升用户访问速度，节省带宽，减轻服务器压力的必经之道。

下面都是针对的Http 1.1来说明，HTTP缓存都是针对浏览器客户端，其他第三方客户端不考虑。

什么是浏览器缓存

简单来说，浏览器缓存就是把一个已经请求过的Web资源（如html，图片，js）拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候，如果是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求（当然还有304的情况）。

缓存是根据url来处理的，只要url不一样就是新的资源。

浏览器HTTP执行机制

浏览器对于请求资源, 拥有一系列成熟的缓存策略。

只要有相应的缓存响应头（要求缓存），浏览器客户端都会对资源缓存一份，当然缓存响应头也有优先级的。

缓存模式

浏览器缓存可以分为两种模式，强缓存和协商缓存。

  • 强缓存（无HTTP请求，无需协商）

    直接读取本地缓存，无需跟服务端发送请求确认，http返回状态码是200（from memory cache或者from disk cache ，不同浏览器返回的信息不一致的）。

    对应的Http header有:

    • Cache-Control
    • Expires

  • 协商缓存（有HTTP请求，需协商）

    浏览器虽然发现了本地有该资源的缓存，但是不确定是否是最新的，于是想服务器询问，若服务器认为浏览器的缓存版本还可用，那么便会返回304（Not Modified） http状态码。

    对应的Http header有:

    • Last-Modified
    • ETag

流程图

流程图只考虑了200和304的状态码，其他异常状态码不考虑。
浏览器之HTTP缓存的那些事

缓存相关的Http Header

Http header包括请求头和响应头，http1.1会向前兼用的，会兼容http1.0的Http header，浏览器还有web服务一般都会考虑进去。

Http Header描述
Cache-Control指定缓存机制，优先级最高
Pragmahttp1.0字段，已废弃，为了兼容一般使用no-cache
Expireshttp1.0字段,指定缓存的过期时间（为了兼容）
Last-Modifiedhttp1.0字段，资源最后一次的修改时间
ETag唯一标识请求资源的字符串，会覆盖Last-Modified

Cache-Control

浏览器缓存里, Cache-Control是金字塔顶尖的规则, 它藐视一切其他设置, 只要其他设置与其抵触, 一律覆盖之.

不仅如此, 它还是一个复合规则, 包含多种值，同时在请求头和响应头都可设置（基本都可以）。

下面列举了常用的Cache-Control用法。

Cache-Control描述
no-store请求和响应都不缓存
no-cache相当于max-age:0，即资源被缓存,
但是缓存立刻过期, 同时下次访问时强制验证资源有效性
max-age缓存资源, 但是在指定时间(单位为秒)后缓存过期

Expires

http1.0中存在的字段，该字段所定义的缓存时间是相对服务器上的时间而言的，如果客户端上的时间跟服务器上的时间不一致（特别是用户修改了自己电脑的系统时间），那缓存时间可能就没啥意义了。在HTTP 1.1版开始，使用Cache-Control: max-age=秒替代，这样就不存在不一致问题了。

Last-Modified

Last-Modified和If-Modified-Since是一对的。

当浏览器第一次请求一个url时，服务器端的返回状态码为200，同时HTTP响应头会有一个Last-Modified标记着文件在服务器端最后被修改的时间。

浏览器第二次请求上次请求过的url时，浏览器会在HTTP请求头添加一个If-Modified-Since的标记，用来询问服务器该时间之后文件是否被修改过。

但是Last-Modified是http1.0的产物，有两个缺点：

  • 只能精确到秒级别
  • 内容完全没改变的资源文件，无法识别出来（只要修改时间变了，就算变动）。

所有就有了ETag。

ETag

ETag解决了Last-Modified的缺点，http1.1的字段，优先级高于Last-Modified。

理论上是ETag优先于Last-Modified，但是Nginx一会把这两个一起开启一起验证，而且Nginx ETag的计算方式把最后修改时间也算进去了（所有这个算是弱ETag）。

Nginx ETag计算方式：计算页面文件的最后修改时间，将文件最后修改时间的秒级Unix时间戳转为16进制作为etag的第一部分 计算页面文件的大小，将大小字节数转为16进制作为etag的第二部分。

ETag有两种类型：

  • 强ETag

    强ETag值，不论实体发生多么细微的变化都会改变其值。

    强ETag表示形式："22FAA065-2664-4197-9C5E-C92EA03D0A16"。

  • 弱ETag

    弱 ETag 值只用于提示资源是否相同。只有资源发生了根本改变产 生差异时才会改变 ETag 。这时，会在字段值最开始处附加 W/。

    弱ETag表现形式：W/"22FAA065-2664-4197-9C5E-C92EA03D0A16"。

ETag和If-None-Match是一对:

当浏览器第一次请求一个url时，服务器端的返回状态码为200，同时HTTP响应头会有一个Etag，存放着服务器端生成的一个序列值。

浏览器第二次请求上次请求过的url时，浏览器会在HTTP请求头添加一个If-None-Match的标记，用来询问服务器该文件有没有被修改。

一般网站都会把Last-Modified和ETag一起用，同时对对比，两个条件都满足了才会返回304。

Nginx实例

用实例来说明，Nginx的安装和使用请自行网上学习，例子的环境是在Mac系统运行的，然后在谷歌浏览器上访问（不同浏览器的表现会有点不一样的，而且浏览器还有快捷键直接刷新跳过缓存的）。

注意：nginx在没有设置Cache-Control：max-age=xxx和expires时，谷歌访问后，后面会变成200(from memory cache)，然后就造成了文件修改后无法更新的问题（不知道什么时候过期）。这个也很好解决，只要设置过期时间为0，这样就一定不是强缓存，就不存在这些问题。

下面的例子Http header只需要关注上面提到的相关字段。

ETag和Last-Modified例子

Nginx默认开启ETag和Last-Modified。

由于Nginx ETag可知，ETag比Last-Modified多了文件大小比较，理论上有ETag就可以不用Last-Modified，但是为了兼容http1.0，很多web服务器都会带上Last-Modified。

ETag关闭如下:

etag off;

Last-Modified关闭如下（没有找到具体关闭方式，只好在响应头中直接赋值为空）：

add_header 'Last-Modified' '' always;

这些配置，可以随便设置在不同层级，http、server、location都可以。

默认的Nginx是同时开启的，所以不用处理什么。

server {
  listen       80;
  server_name  localhost;
  location / {
    #定义自己的web服务根目录
    root   /Users/Sam/www;
    #默认访问文件夹时，访问index.html或者index.htm文件
    index  index.html index.htm;
    location ~* \.(jpg|jpeg|gif|bmp|png|js|css){
      #nginx在没有设置Cache-Control：max-age=xxx和expires时，
      #谷歌访问后，后面会变成200(from memory cache)，
      #然后就造成了文件修改后无法更新的问题。
      #这个很好解决，只要设置过期时间为0，这样就一定不是强缓存，就不存在这些问题
        expires 0s;
    }
  }
}

然后在根目录index.html中引入./test.js文件，然后访问index.html。

首次访问，返回200，然后再次访问才会返回304。然后无论如何修改，只要文件被保存（即使内容不变），再次访问浏览器返回200，然后再次访问返回304（内容没修改）。

首次访问 Http Header(先清理缓存，才算首次访问)

#通用的header
Request URL: http://localhost/test.js
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:80
Referrer Policy: no-referrer-when-downgrade

#响应头
Cache-Control: max-age=0
Connection: keep-alive
Content-Encoding: gzip
Content-Type: application/javascript
Date: Thu, 27 Sep 2018 03:21:00 GMT
ETag: W/"5bab7b36-15"
Expires: Thu, 27 Sep 2018 03:21:00 GMT
Last-Modified: Wed, 26 Sep 2018 12:27:34 GMT
Server: nginx/1.10.1
Transfer-Encoding: chunked

#请求头
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Connection: keep-alive
Host: localhost
Referer: http://localhost/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36

第二次访问 Http Header（无修改）

#通用的header
Request URL: http://localhost/test.js
Request Method: GET
Status Code: 304 Not Modified
Remote Address: 127.0.0.1:80
Referrer Policy: no-referrer-when-downgrade

#响应头
Cache-Control: max-age=0
Connection: keep-alive
Date: Thu, 27 Sep 2018 03:23:22 GMT
ETag: "5bab7b36-15"
Expires: Thu, 27 Sep 2018 03:23:22 GMT
Last-Modified: Wed, 26 Sep 2018 12:27:34 GMT
Server: nginx/1.10.1

#请求头
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Connection: keep-alive
Host: localhost
If-Modified-Since: Wed, 26 Sep 2018 12:27:34 GMT
If-None-Match: W/"5bab7b36-15"
Referer: http://localhost/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36

第三次访问 Http Header（有修改）

#通用的header
Request URL: http://localhost/test.js
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:80
Referrer Policy: no-referrer-when-downgrade

#响应头
Cache-Control: max-age=0
Connection: keep-alive
Content-Encoding: gzip
Content-Type: application/javascript
Date: Thu, 27 Sep 2018 03:25:14 GMT
ETag: W/"5bac4d98-15"
Expires: Thu, 27 Sep 2018 03:25:14 GMT
Last-Modified: Thu, 27 Sep 2018 03:25:12 GMT
Server: nginx/1.10.1
Transfer-Encoding: chunked

#请求头
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Connection: keep-alive
Host: localhost
If-Modified-Since: Wed, 26 Sep 2018 12:27:34 GMT
If-None-Match: W/"5bab7b36-15"
Referer: http://localhost/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36

第四次访问 Http Header（无修改）

#通用的header
Request URL: http://localhost/test.js
Request Method: GET
Status Code: 304 Not Modified
Remote Address: 127.0.0.1:80
Referrer Policy: no-referrer-when-downgrade

#响应头
Cache-Control: max-age=0
Connection: keep-alive
Date: Thu, 27 Sep 2018 03:26:46 GMT
ETag: "5bac4d98-15"
Expires: Thu, 27 Sep 2018 03:26:46 GMT
Last-Modified: Thu, 27 Sep 2018 03:25:12 GMT
Server: nginx/1.10.1

#请求头
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Connection: keep-alive
Host: localhost
If-Modified-Since: Thu, 27 Sep 2018 03:25:12 GMT
If-None-Match: W/"5bac4d98-15"
Referer: http://localhost/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36

Cache-Control 和 Expires

server {
  listen       80;
  server_name  localhost;
  location / {
    #定义自己的web服务根目录
    root   /Users/Sam/www;
    #默认访问文件夹时，访问index.html或者index.htm文件
    index  index.html index.htm;
    location ~* \.(jpg|jpeg|gif|bmp|png|js|css){
      #设置30秒缓存有效期
        expires 30s;
    }
  }
}

然后在根目录index.html中引入./test.js文件，然后访问index.html。

首次访问，浏览器会返回200，然后再次访问才会返回200（from memory cache），然后30秒后过期访问，如果文件没修过过，会返回304，否则返回200，继续访问如果没过期期，返回200（from memory cache）。

具体请看上面的浏览器缓存流程图。

首次访问 Http Header（先清理缓存，才算首次）

#通用的header
Request URL: http://localhost/test.js
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:80
Referrer Policy: no-referrer-when-downgrade

#响应头
Cache-Control: max-age=30
Connection: keep-alive
Content-Encoding: gzip
Content-Type: application/javascript
Date: Thu, 27 Sep 2018 03:28:03 GMT
ETag: W/"5bac4d98-15"
Expires: Thu, 27 Sep 2018 03:28:33 GMT
Last-Modified: Thu, 27 Sep 2018 03:25:12 GMT
Server: nginx/1.10.1
Transfer-Encoding: chunked

#请求头
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Connection: keep-alive
Host: localhost
Referer: http://localhost/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36

第二次访问 Http Header（不能过期，上面设置的是30秒，要在上次访问的30秒内再次访问）

#通用的header
Request URL: http://localhost/test.js
Request Method: GET
Status Code: 200 OK (from memory cache)
Remote Address: 127.0.0.1:80
Referrer Policy: no-referrer-when-downgrade

#响应头
Cache-Control: max-age=30
Connection: keep-alive
Content-Encoding: gzip
Content-Type: application/javascript
Date: Thu, 27 Sep 2018 03:28:03 GMT
ETag: W/"5bac4d98-15"
Expires: Thu, 27 Sep 2018 03:28:33 GMT
Last-Modified: Thu, 27 Sep 2018 03:25:12 GMT
Server: nginx/1.10.1
Transfer-Encoding: chunked

#请求头
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Connection: keep-alive
Host: localhost
Referer: http://localhost/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36

第三次访问 Http Header（需要过期，上面设置的是30秒，上一次访问等待30秒后访问）

#通用的header
Request URL: http://localhost/test.js
Request Method: GET
Status Code: 304 Not Modified
Remote Address: 127.0.0.1:80
Referrer Policy: no-referrer-when-downgrade

#响应头
Cache-Control: max-age=30
Connection: keep-alive
Date: Thu, 27 Sep 2018 03:32:44 GMT
ETag: "5bac4d98-15"
Expires: Thu, 27 Sep 2018 03:33:14 GMT
Last-Modified: Thu, 27 Sep 2018 03:25:12 GMT
Server: nginx/1.10.1

#请求头
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Connection: keep-alive
Host: localhost
If-Modified-Since: Thu, 27 Sep 2018 03:25:12 GMT
If-None-Match: W/"5bac4d98-15"
Referer: http://localhost/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36

第四次访问 Http Header（不能过期，上面设置的是30秒，要在上次访问的30秒内再次访问修改后的文件）

访问获取的还是旧文件，文件虽然修改了，但是浏览器直接缓存中获取，没发出请求，无法获取最新的内容。

#通用的header
Request URL: http://localhost/test.js
Request Method: GET
Status Code: 200 OK (from memory cache)
Remote Address: 127.0.0.1:80
Referrer Policy: no-referrer-when-downgrade

#响应头
Cache-Control: max-age=30
Connection: keep-alive
Content-Encoding: gzip
Content-Type: application/javascript
Date: Thu, 27 Sep 2018 03:28:03 GMT
ETag: W/"5bac4d98-15"
Expires: Thu, 27 Sep 2018 03:28:33 GMT
Last-Modified: Thu, 27 Sep 2018 03:25:12 GMT
Server: nginx/1.10.1

#请求头
Transfer-Encoding: chunked
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Connection: keep-alive
Host: localhost
Referer: http://localhost/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36

第五次访问 Http Header（需过期，在第四次访问后等待30秒访问修改后的文件）

访问后获取到了最新文件。

#通用的header
Request URL: http://localhost/test.js
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:80
Referrer Policy: no-referrer-when-downgrade

#响应头
Cache-Control: max-age=30
Connection: keep-alive
Content-Encoding: gzip
Content-Type: application/javascript
Date: Thu, 27 Sep 2018 03:36:51 GMT
ETag: W/"5bac4fcc-15"
Expires: Thu, 27 Sep 2018 03:37:21 GMT
Last-Modified: Thu, 27 Sep 2018 03:34:36 GMT
Server: nginx/1.10.1
Transfer-Encoding: chunked

#请求头
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Connection: keep-alive
Host: localhost
If-Modified-Since: Thu, 27 Sep 2018 03:25:12 GMT
If-None-Match: W/"5bac4d98-15"
Referer: http://localhost/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36

不需要缓存的场景

缓存是会提升访问速度、节省带宽、减轻服务器压力，但是也不能滥用，否则会出现一些意想不到的问题。图片、css、js等资源文件一般都是需要缓存的，但是像接口数据等数据会变动的http请求都是不需要缓存的，否则会造成无法访问到新数据的情况。

场景

  • html文件不需要强缓存，协商缓存就行了。

    这些都是特殊情况，html文件可以返回304状态，但是不要返回200（from memory cache）。html文件最好设置过期时间为0，强制跟服务器做文件修改对比（当然具体场景具体分析）。

    因为js文件和css文件是可以使用版本做控制或者随机数。

  • js代码版本迭代更新

    这个场景不是不需要缓存，而是更新了js代码版本，但是如果用户还在缓存期内，就会导致页面出错。

    这种情况就需要进行js类库版本控制，如：

    <script src="../js/jquery.js?version=1.8.9"></script>

    升级到到2.0.0时，我们需要把代码改成

    <script src="../js/jquery.js?version=2.0.0"></script>

    这样就不会访问到缓存的jquery.js。缓存是根据url来处理的，只要url不一样就是新的资源。

  • 前后端使用ajax请求接口数据

解决方式

  • Url添加随机数

    这种情况，是前端做处理。

  • 请求头添加Cache-Control: no-cache

    为了兼容http1.0，而外添加Pragma: no-cache，Cache-Control的选项有很多，具体如何选择，看场景。

    前端或者服务端都可以处理。

一些说明

做一些补充说明。

memory cache 和 disk cache

这个两个说明是谷歌浏览器的状态码附加提示语，内存缓存和磁盘缓存。其实很简单，只要页面在网页上打开访问，然后不关闭，刷新的一定是from memory cache，而页面关闭在打开一定是from disk cache。这是浏览器自身的缓存手段，磁盘缓存一定会有一份备份的，然后页面访问的时候也会在内存中缓存一份，这样刷新当前页面就不会读取硬盘，而是直接内存中获取（减少访问磁盘的次数）。

不同浏览器的一些表现差异

不同浏览器的缓存手段是一致的，但是文案展现形式，和刷新页面的方式会有差异（如火狐浏览器点击刷新按钮和回车刷新是不一样的）。

下面是针对已经强缓存，同时访问文件无修改的情况下，不同刷新方式返回的状态码总结（mac系统）：

浏览器点击地址栏刷新按钮回车刷新cmd + r刷新
谷歌200（from memory cache）200（from memory cache）200（from memory cache）
火狐304200，其他地方说明已缓存304
safari200，其他地方说明已缓存200，其他地方说明已缓存200，其他地方说明已缓存

这里只说明下可能会遇到的疑惑。浏览器软件自身的处理方式，跟http缓存挂不上钩，我们也无法处理。

参考文章

浏览器缓存 缓存服务器 缓存 http请求

zaocha

zaocha

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

前端api请求缓存方案

在开发 web 应用程序时，性能都是必不可少的话题。对于webpack打包的单页面应用程序而言，我们可以采用很多方式来对性能进行优化，比方说 tree-shaking、模块懒加载、利用 extrens 网络cdn 加速这些常规的优化。而事实上，缓存一定是提

学习web前端 2020-11-09

原来缓存也会雪崩、击穿、穿透啊

仅靠着超高配置的服务器资源，还是很难支撑高并发的场景。因此我们需要缓存。比如双十一的时候，iPhone12在凌晨00:00-01:00可1分钱抢购，哇，这个可是真便宜呢，程序员们也预测到了商品的火爆，于是将iPhone12的商品信息缓存到redis中，设置

天空一样的蔚蓝 2020-10-23

ajax缓存机制

只要是POST请求，浏览器都不会缓存。Https的请求，浏览器不会缓存。在URL中拼入随机的查询字符串可以使浏览器认为这是一个新的请求，从而不使用缓存。

curiousL 2020-08-03

深入浅出从根上理解 HTTP 缓存机制及原理！

HTTP 缓存，对于前端的性能优化方面来讲，是非常关键的，从缓存中读取数据和直接向服务器请求数据，完全就是一个在天上，一个在地下。我们最熟悉的是 HTTP 服务器响应返回状态码 304，304 代表表示告诉浏览器，本地有缓存数据，可直接从本地获取，无需从服

sochrome 2020-07-29

DNS域名解析过程

当在浏览器中输入URL时，DNS解析是怎样的的过程呢？浏览器缓存有大小和时间限制，域名被缓存的时间限制可以通过TTL属性来设置。

leodengzx 2020-07-18

缓存策略

缓存穿透，查询无数据时2，导致缓存不生效，查询都落到数据库 **建议：强制返回一个默认值，缓存击穿，缓存失效瞬间，大量请求访问到数据库：比如同一个页面并发量比较大，建议：使用二级缓存策略，当一级缓存失效时，我们允许一个请求去落到数据库上面，更新缓存数据，其

SoarFly00 2020-06-28

http缓存

HTTP 缓存是我们日常开发中最为熟悉的一种缓存机制。优先级较高的是强缓存，在命中强缓存失败的情况下，才会走协商缓存。在浏览器发送请求时,会先去查看是否有expriss和cache-Control,以此来判断是否命中“强缓存”,协商缓存依赖于服务端与浏览器

LeoHan 2020-06-02

HTML5 应用程序缓存

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。减少服务器负载 - 浏览器将只从服务器下载更新过或更改

GimmeS 2020-05-15

ASP.NET Core中的Http缓存使用

Http响应缓存可减少客户端或代理对web服务器发出的请求数。响应缓存还减少了web服务器生成响应所需的工作量。响应缓存由Http请求中的header控制。而ASP.NET Core对其都有相应的实现，并不需要了解里面的工作细节，即可对其进行良好的控制。H

逸璞丷昊 2020-03-08

阿里P8架构师谈：数据库、JVM、缓存、SQL等性能调优方法和原则

性能优化基本是BAT等一线互联网公司程序员必备的技能，以下为大家完整揭晓性能完整的优化方案和方法：包含web网站调优、数据库、JVM调优、架构调优等方案。这一条要灵活运用，把js和css提取出来放在外部文件的优点是：减少html体积，提高了js和css的复

DAV数据库 2020-05-07

测试人员需要了解的缓存知识

减少服务器的访问压力。减少客户端的网络延时。最近最不经常使用。数据库中的热数据。主被动删除缓存后，相应的业务逻辑是否符合期望。首次访问后，再次访问速度是否快了。数据一致性问题的验证。对本地缓存文件无读写权限。手动主动触发缓存刷新机制

Vampor 2020-05-01

http缓存

设置expires值表示缓存会在这个时间后失效，过期时间是绝对日期，如果修改本地日期，ETag和Last-Modified比较：ETag更准确，如果打开文件但没有修改，last-Modified也会改变；而且Last-Modified只能。精确到秒，不适合

ROES 2020-04-22

手写一个静态资源中间件，加深了解服务器对文件请求的缓存策略

我们从理论上介绍了浏览器和服务器是如何对静态资源做缓存的，这篇文章我们把它做成一个node服务器的静态资源中间件。服务器接收到请求，先解析地址path;检查缓存头标志，如果内容没过期，仅修改头信息，304状态返回，如果内容过期了，就要正常返回内容。如果设置

lifeforbug 2020-03-18

h5应用缓存

manifest文件主要分为三个部分。CACHE MANIFEST: 在此标题下列出的文件将在首次下载后进行缓存。FALLBACK：在此标题下列出的文件规定当页面无法显示时的回退页面。1 用户清空浏览器缓存。3 由程序来更新应用缓存。用户可在应用离线时使用

zhangwentaohh 2020-03-04

PHP ob缓存以及ob函数原理实例解析

ob是output buffering的简称，输出缓冲区，缓冲区是通过php.ini中的output_buffering变量控制的。其默认值是off,可以设置为on来打开buffer。打来buffer后，即便程序中没有用ob函数，实际上代码也是使用了缓冲区

ThinkMake 2020-11-13

JS惰性删除和定时删除可过期的localStorage缓存，或sessionStorage缓存

使用localStorage可以在浏览器中存储键值对的数据。但是它们之间的区别是：存储在localStorage的数据可以长期保留；而当页面会话结束时，存储在sessionStorage的数据会被清除。另外需要注意的是，localStorage中的键值对总

拭血 2020-06-02

没有最全只有更全的关闭浏览器缓存的&lt;meta&gt;标签

meta是html语言head区的一个辅助性标签。类似地height指令使用device-height标记指示视区高度为设备的屏幕高度。与initial-scale相同，这些指令的值是应用于视区内容的缩放比例。E、Window-target说明：强制页面在

lengyu0 2020-05-20

net core WebApi——缓存神器Redis

中秋过完不知不觉都已经快两周没动这个工程了，最近业务需要总算开始搞后台云服务了，果断直接net core搞起，在做的中间遇到了不少问题，这个后续会一点点列出来包括解决方法，今天就先把之前挖的坑填一个。引入完之后，我们在appsettings.json来配置

lengyu0 2020-05-10

前端性能优化建议

CSS&JS&图片：使用强缓存，文件命名带上hash值，使用chunkhash或contenthash，不使用hash。以nodejs为例，如果需要浏览器强缓存，我们可以这样设置：res.setHeader;如果需要协商缓存，则可以这样设置

viewerlin 2020-05-10

第六章：Django 综合篇 - 15：Django与缓存

接收请求 -> url路由 -> 视图处理 -> 数据库读写 -> 视图处理 -> 模版渲染 -> 返回请求。以Django一站式服务的尿性，像缓存这么重要的功能，怎么可能不具备？Django提供不同粒度不同层级的缓存：

程序员俱乐部 2020-05-06
zaocha

zaocha

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号