浏览器缓存机制是前端性能优化中至关重要的一环,它通过缓存之前请求过的文件,以提高页面再次访问时的加载速度。
一、浏览器缓存的作用
- 减少数据传输:缓存减少了不必要的数据传输,节省了带宽。
- 减轻服务器负担:通过缓存,服务器不需要处理重复的请求,从而减轻了负担。
- 提升访问速度:缓存使得页面加载更加迅速,提升了用户体验。
二、浏览器缓存的类别
浏览器缓存主要分为两类:强制缓存(也称为强缓存)和协商缓存(也称为弱缓存)。
三、强制缓存
1. 定义
强制缓存是指浏览器在发起请求前,会先检查本地缓存中是否有满足条件的资源。如果有,则直接使用缓存资源,不再向服务器发起请求。
2. 控制字段
- Expires:HTTP/1.0引入,表示资源会在某个绝对时间后过期。由于它依赖于客户端时间,可能存在误差,因此HTTP/1.1中引入了Cache-Control来替代它。
- Cache-Control:HTTP/1.1引入,用于控制缓存的行为。它包含多个指令,如
max-age
(表示资源在多少秒内有效)、no-cache
(表示需要协商缓存)、no-store
(表示不缓存任何内容)等。Cache-Control的优先级高于Expires。
3. 缓存位置
- 内存缓存(Memory Cache):存储当前页面中已经抓取到的资源,如样式、脚本、图片等。读取速度快,但缓存持续性短,随进程释放而释放。
- 硬盘缓存(Disk Cache):覆盖面最广,绝大部分的缓存都来自Disk Cache。读取速度相对较慢,但持久性强。
四、协商缓存
1. 定义
当强制缓存失效后,浏览器会携带缓存标识(如Last-Modified或ETag)向服务器发起请求,由服务器根据缓存标识决定是否使用缓存。
2. 控制字段
- Last-Modified / If-Modified-Since:HTTP/1.0引入。Last-Modified表示资源在服务器上的最后修改时间;If-Modified-Since是浏览器在请求时携带的字段,表示资源在客户端的最后修改时间。服务器通过比较这两个时间来决定是否返回304状态码(表示资源未修改,使用缓存)或200状态码(表示资源已修改,返回新资源)。
- ETag / If-None-Match:HTTP/1.1引入,用于替代Last-Modified / If-Modified-Since。ETag是服务器为资源生成的一个唯一标识(hash值);If-None-Match是浏览器在请求时携带的字段,表示资源在客户端的唯一标识。服务器通过比较这两个标识来决定是否返回304或200状态码。ETag / If-None-Match的优先级高于Last-Modified / If-Modified-Since。
五、浏览器缓存过程
- 浏览器发起请求:首先检查本地缓存中是否有满足条件的资源。
- 强制缓存判断:如果有,则根据Cache-Control或Expires字段判断资源是否过期。
- 如果未过期,则直接使用缓存资源。
- 如果已过期,则进入协商缓存阶段。
- 协商缓存判断:浏览器携带缓存标识向服务器发起请求。
- 服务器根据请求头中的If-Modified-Since或If-None-Match字段判断资源是否修改。
- 如果未修改,则返回304状态码,浏览器使用缓存资源。
- 如果已修改,则返回200状态码和新资源,浏览器更新缓存。
六、缓存机制的优缺点
优点:
- 减少了不必要的数据传输,节省了带宽。
- 减轻了服务器的负担,提升了网站性能。
- 加快了客户端加载网页的速度,提升了用户体验。
缺点:
- 如果资源有更改,而缓存未及时更新,可能导致用户获取到滞后的信息。