http缓存机制

前言

本文是阅读文章所做笔记。意在加深记忆也便于日后查找

强缓存和协商缓存

http的缓存机制可以分为两种类型:

  • 强缓存:浏览器判断本地缓存未过期,就直接使用,无需发起http请求
  • 协商缓存: 浏览器判断本地缓存过期,发送http请求,服务器返回304告诉浏览器文件未改变,浏览器继续使用本地缓存

缓存头部

如何区分缓存类型呢?主要根据http头部字段 属于强缓存控制:

  • http1.0: Pragma/Expires
  • http1.1: Cache-Control/Max-Age ps: Max-Age不是一个头部,而是Cache-Control的值

属于协商缓存控制:

  • http1.0: If-Modified-Since/Last-Modified
  • http1.1: If-None-Match/E-tag

http1.0和http1.1缓存头部控制的区别

在http1.0中:

  • Pragma: 严格说,他不属于专门控制缓存的头部,但是当其值为no-cache时可以让本地强缓存失效
  • Expires: 在服务端配置,用于强缓存。用来控制在规定时间之前,浏览器不需要在发出请求,直接使用本地缓存。切Expires是服务端时间
  • If-Modified-Since/Last-Modified: 这两个是成对出现。属于协商缓存。其中浏览器端头部为If-Modified-Since,服务器端为Last-Modified。在发送请求时,如果If-Modified-SinceLast-Modified匹配,那么表示服务器资源为变化,服务器不会返回当前资源。而是返回头部,告知浏览器使用本地缓存。Last-Modified是指文件的最后修改时间。只能精确到1s以内。

在http1.1中:

  • Cache-Control:缓存控制的头部。有no-cache, max-age,no-store等值。
  • Max-Age:服务器端配置,用于强缓存,例如Cache-Control=max-age=3600在3600秒内,浏览器无需再次发出请求直接使用本地缓存。他的值是绝对时间,由浏览器自己计算。
  • If-None-Match/E-tag: 这个是成对出现的。属于协商缓存。其中浏览器端头部为If-None-Match,服务器端为E-tag。当浏览器发出请求后两者匹配,则表示服务器端资源未改变,服务器不会返回资源本身,返回头部,浏览器使用本地缓存。和Last-Modified相比。E-tag更精确。没有1s的误差。

Max-Age 和 Expires 区别

Expires 使用的服务器时间。当服务器时间和浏览器时间不同步时,可能会发生缓存无效或一直无法过期的bug。 而E-tag 使用的浏览器时间。就不会存在上述问题。

E-tag 和 Last-Modified 区别

Last-Modified 表示的是文件的最后修改时间,有一个精确1s的缺陷,如果服务端的文件周期性改变,会导致缓存失效。 而E-tag是一种指纹机制。只有文件发生改变才会变化。不存在1s的缺陷。

缓存关系图

本文参考: 从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系

原文链接:juejin.im

上一篇:React随笔
下一篇:使用Vue.js全家桶开发的👉高颜值网易云播放器

相关推荐

  • 马蜂窝推荐系统容灾缓存服务的设计与实现

    数据库突然断开连接、第三方接口迟迟不返回结果、高峰期网络发生抖动...... 当程序突发异常时,我们的应用可以告诉调用方或者用户「对不起,服务器出了点问题」;或者找到更好的方式,达到提升用户体验的目的...

    1 年前
  • 项目中资源缓存机制实践(静态资源和本地数据缓存)

    网络资源的缓存 核心方案 HTML文件 no-cache js,css文件 时间戳/哈希/版本号,长缓存 图片资源 长缓存,更新时使用新链接地址 1. 前后端未分离,且未引入构建工具的项目 方...

    1 年前
  • 页面缓存相关问题,部份页面使用缓存解决方法

    页面部份: <el-main> <!-- 使用单页组件缓存 --> <keep-alive v-if="$route.meta.keepAlive"&g...

    2 个月前
  • 面试官问我:说说你对浏览器缓存的理解

    缓存类型 强缓存 定义: 当发起HTTP请求时,不会向服务器进行请求,只要当前时间在缓存有效期内,则直接从客户端缓存中获得,当缓存过期之后,才会真正想服务器发起请求重新获得资源。

    3 个月前
  • 面试专用:Http和Https之间的区别,及原理分析

    关于HTTP和HTTPS文章原理及分析,我相信已经有很多了,深入的原理我就不一一写出来了。 写这篇文章的目的主要是为了解决面试过程关于HTTP和HTTPS常见问题及怎样用自己话更好的描述出来了。

    7 个月前
  • 面向校招 HTTP与前端缓存知识点总结

    一. 基础概念 HTTP 特点 简单快速:请求服务时,只需传送请求方法和路径 灵活:允许传输任意类型的数据对象,由 Content-Type 标记 无连接:服务端处理完请求就断开连接 无状态:意味着...

    8 个月前
  • 难道不是愚蠢的;一个小的图标,还需要一个HTTP请求?如何使图标进入雪碧吗?

    YahelSam提出了一个问题:Isn't it silly that a tiny favicon requires yet another HTTP request? How to make fa...

    3 年前
  • 除夕小谈浏览器缓存

    更好的阅读体验 => 点击文末左下角的阅读原文 什么是浏览器缓存? Browser Caching 是浏览器将网络资源存储在本地的一种行为。优点有: 减少冗余数据的传输 减轻服务器的压力...

    1 年前
  • 阿贾克斯XMLHttpRequest文件上传

    Sedat Başar提出了一个问题:Upload File With Ajax XmlHttpRequest,或许与您遇到的问题类似。 回答者timdream给出了该问题的处理方式: There ...

    3 年前
  • 防止重定向XMLHttpRequest

    Zim提出了一个问题:Prevent redirection of Xmlhttprequest,或许与您遇到的问题类似。 回答者GiliRelaXNow给出了该问题的处理方式: Not accord...

    3 年前

官方社区

扫码加入 JavaScript 社区