两者可以同时存在于一次请求中，但是不会同时在一次请求中起作用。 在HTTP1.0的环境下，Cache-Control不起作用，Expires起作用； 在HTTP1.1的环境之下， Expires不起作用，而Cache-Control起作用。当前一般都是http1.1的情况，所以Expires是作为一种向下兼容的形式而存在的。
Cache-Control的选择更多，功能更为强大，推荐使用。 Expires作为强缓存，功能单一，不推荐使用。
例如：下图（华为云官网首页）中，文件global.js的Cache-Control指定的缓存失效时间max-age为86400s（1天）：
协商缓存一般是使用 if-modified-since/Last-Modified 和 if-none-match/Etag 由服务器来决定浏览器缓存的资源是否可以使用。
1. Last-Modified / If-Modified-Since
Last-Modified：服务器响应请求时，告诉浏览器资源最后的修改时间。
If-Modified-Since：浏览器再次请求资源时，浏览器通知服务器，上次请求时，返回的资源最后修改时间。
若最后修改时间小于等于If-Modified-Since，则response header返回304，告知浏览器继续使用所保存的cache。若大于If-Modified-Since，则说明资源被改动过，返回状态码200；
2. If-none-match / Etag
Etag：服务器响应请求时，告诉浏览器当前资源在浏览器的唯一标识（生成规则由服务器确定）
If-None-Match：再次请求服务器时，通过此字段通知服务器客户端缓存数据的唯一标识。服务器收到请求后发现有If-None-Match 则与被请求资源的唯一标识进行比对，不同，说明资源又被改动过，则响应整片资源内容，返回状态码200；相同，说明资源无新修改，则响应HTTP 304，告知浏览器继续使用所保存的cache。
Etag与Last-Modified对比：
在精确度上，Etag优于Last-Modified。Last-Modified精确到s，如果1s内，资源多次改变，Etag是可以判断出来并返回最新的资源。
在性能上，Last-Modified优于Etag，因为Last-Modified只需要记录时间，而Etag需要服务器重新生成hash值，所以性能上略差。
在优先级上，Etag优于Last-Modified，Etag和Last-Modified可同时存在。本地缓存时间到期后，浏览器向服务端发送请求报文，其中Request Header中包含If-none-match和Last-Modified-Since（与服务端Etag和Last-Modified对比，Etag优先级高），用以验证本地缓存数据验证是否与服务端保持一致。在服务器端会优先判断Etag。如果相同，返回304；如果不同，就继续比较Last-Modified，然后决定是否返回新的资源。若服务端验证本地缓存与服务端一致，返回304，浏览器加载本地缓存；否则，服务器返回请求的资源，同时给出新的Etag以及Last-Modified时间。
3.3 缓存请求以下为浏览器缓存的流程：
对于客户端来说，浏览器在使用本地缓存数据时，需要对齐本地与服务器的资源；但是，对于服务端，服务器将资源下发给客户端，服务端就失去了对齐的控制权。比如，服务端设定缓存失效的max-age，在这段时间内，哪怕服务端资源已发生更改，服务端也无法通知客户端资源更新通知。所以，对于一个网页来说，需要合理的指定缓存的废弃与更新的响应策略，从而既能提升页面加载速度，同时确保页面的准确性。
以下结合华为云官网各部件，分析缓存的废弃和更新的响应策略：
4.1 官网首页：
注释：
Html：缓存有效时间为0s，页面加载时，强制浏览器每次向源服务器确认数据；
Css：改动频率较低，允许使用本地缓存，且存在强制缓存时间（各个css文件不同，按需设置）；强制缓存失效再进行协商缓存；
Js：允许使用本地缓存，且存在强制缓存时间（各个js文件不同，按需设置）；强制缓存失效再进行协商缓存；
Image：图片修改频率更低，允许使用本地缓存，且存在强制缓存时间（各个image文件不同，按需设置）；强制缓存失效再进行协商缓存；
Gif：官网中gif主要存在于banner轮播，因此确保时效性，使用no-cache，不允许缓存，强制每次向源服务器确认数据。
注意（以下已官网首页为例，介绍缓存与版本号的关系，其余各部件都存在相同问题，后续不一一解释。）：