前端技术基础(二):浏览器缓存

浏览器缓存介绍

我们知道,浏览器可以通过http请求获得的资源,根据服务端的设置作一定的缓存处理,以加快下一次再使用同类资源时调出的速度,这便是浏览器缓存。

浏览器缓存分类

浏览器缓存分为以下两类:强缓存和协商缓存(也叫弱缓存)

强缓存

强缓存的命中意为完全不向服务端再次请求该资源,直接从缓存中读取。强缓存对应http头中的Expires与Cache-Control两个字段。

  1. Expires
    Expires,是http1.0规范的字段,它顾名思义,表示该缓存的失效时间。由于它是一个标准时间,如若服务器的系统时间与客户端的系统时间差距过大时,Expires将会在未知的情况下使缓存过期,因此在http1.1出现后,主要以Cache-Control来确定缓存是否有效。
  2. Cache-Control
    Cache-Control是http1.1规范的字段。服务端在配置过程中,Cache-Control所控制的缓存失效时间优先级高于Expires。在这个字段内,我们可以定义多条属性(因此它不只确定缓存的有效期):

    • max-age:相对时间(单位为秒)
    • no-cache:使用协商缓存,不使用强缓存
    • no-store:完全不缓存该内容
    • public:可被中间代理服务器或者终端浏览器等所有的用户缓存
    • private:只能被终端浏览器的用户缓存

协商缓存

协商缓存命中意为向服务端发送请求获取某资源时,服务端认定该资源在客户端的缓存是最新的,返回304状态码通知客户端浏览器直接使用缓存内容。协商缓存对应的http头部字段为两个组合:第一次请求的响应头中有(Last-Modified/ETag),则后续请求头中带上(If-Modified-Since/If-None-Match)。

  1. Last-Modified/If-Modified-Since
    当第一次请求被响应时,浏览器收到了Last-Modified字段(一个标准时间)时,浏览器再后续请求头上带着If-Modified-Since字段,当服务端检测到从上次到现在该资源都未发生变化时,不返回该资源,而返回304状态码,告诉浏览器可以直接从缓存获取资源。
  2. ETag/If-None-Match(优先级相比上者更高)
    ETag(一种校验码)表示唯一的一种资源,如果该资源发生变化,那么它的ETag也会发生变化。浏览器会在后续请求头中带上If-None-Match。此时,无论服务端中该资源是否发生变化,服务端都会返回一个ETag(因为某些资源可能是周期性修改的,也可能重复修改后内容不变,此时ETag会重新生成,但服务端不希望浏览器重新GET这个资源)。

原文地址:https://www.cnblogs.com/BlogOfMotherLyn/p/12333727.html

时间: 2024-08-01 11:23:25

前端技术基础(二):浏览器缓存的相关文章

前端开发JavaScript清除浏览器缓存的方法

查看和删除浏览器缓存的方法=====>打开 最近在开发项目中发现有时候总要频繁地清除浏览器缓存,不然总是显示的过时的信息 浏览器缓存有利有弊,有些数据需要缓存下来使得页面打开更快提高网站性能,但有些缓存内容又必须清除,缓存可能会导致一些错误数据被展示. 介绍一些清除浏览器缓存的方法: 方法一:利用meta标签 <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <META HTTP-EQUIV=&quo

web前端技术基础课程详解之JavaScript面向对象

JavaScript中的面向对象是个老生常谈的话题,但是依然有很多小伙伴处于懵逼状态.面试时候最担心的就是被问到面向对象相关的内容,自己看过无数的资料,依然对面向对象百思不得其解.到底什么是原型?什么是构造函数?什么是继承...一提到这些概念那真是欲哭无泪.悲愤交加,甚至恨的直咬牙!所以有必要谈一次面向对象. 对象在生活中指的是女朋友或者男朋友,而在JavaScript里说的通俗一点就是一个放了很多属性与方法的集合,有很多的属性与方法是一个对象最显著的特点(可以粗暴的认为,但凡有属性与方法的就是

【前端_js】Chrome禁止浏览器缓存

在前端开发中,浏览器缓存使得我们改了代码后页面不变,得经常手动清理缓存. 按如下操作即可禁用浏览器缓存: 原文地址:https://www.cnblogs.com/leiblog/p/10936421.html

微信公众号开发技术基础(二):外网映射工具ngrok的简介和使用

本文结构:(一)用法(二)示例(三)qydev ngrok的下载链接及相关网站 微信公众号开发的时候,微信服务器是需要访问我们的一个公网服务器地址的,但我们又是在本地调试自己的程序的,那怎样让微信服务器能访问到我们本地的服务器呢?那就需要用外网映射工具,将本地IP映射成公网IP,这样就能在公网上访问本地服务了,这里使用ngrok.ngrok原版程序的服务器是在国外的,访问速度极慢或者干脆访问不了,所以这里提供一个服务器搭建在国内的基于ngrok的一个软件:qydev,百度网盘下载链接见文章结尾.

和浏览器并发请求数有关的一些前端技术

节选自 http://www.zhihu.com/question/20474326 前端技术的逐渐成熟,衍生了domain hash, cookie free, css sprites, js/css combine, max expires time, loading images on demand等技术.这些技术的出现和大量使用都和并发资源数有关. 1.按照普通设计,当网站cookie信息有1 KB.网站首页共150个资源时,用户在请求过程中需要发送150 KB的cookie信息,在51

浏览器缓存和压缩优化技术

一.HTTP缓存机制缓存分类1.200 from cache:直接从本地缓存中获取响应,最快速,最省流量,因为根本没有向服务器发送请求:2.304 NOT Modified:协商缓存,浏览器在本地没有命中的情况下,请求头发送一定的校检数据到服务端,如果服务端数据没有改变浏览器从本地缓存响应,返回304快速,发送的数据很少,只返回一些基本的响应头信息,数据量很小,不发送实际的响应体:3.200 OK:以上两种缓存失败,服务器返回完整的响应.没有用到缓存,相对较慢:相关的头信息:Pragma:HTT

oa信用盘源码-Web前端开发所需要的技术基础

Web前端开发所需要的技术基础:1.OA信用盘架设q<319.135.503.1> 2.对常用的一些JS框架了解,如jQuery.YUI等. 3.掌握最基本的JavaScript计算方法编写. 4.对目前互联网流行的网页制作方法(Web2.0)HTML+CSS,以及各大浏览器兼容性有很大的了解. 5.对前沿技术(HTML5+CSS3)的基本掌握. 6.还要对IT其他编程语言有所了解如:PHP,Java,.net!有一些公司还要求懂一点SEO优化. Web前端开发是一项很特殊的工作,涵盖的知识面

Java缓存学习之二:浏览器缓存机制

浏览器端的九种缓存机制介绍 浏览器缓存是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据,整体上加速网页展示给用户.浏览器端缓存的机制种类较多,总体归纳为九种,这里详细分析下这九种缓存机制的原理和使用场景.打开浏览器的调试模式->resources左侧就有浏览器的8种缓存机制. 一.http缓存 http缓存是基于HTTP协议的浏览器文件级缓存机制.即针对文件的重复请求情况下,浏览器可以根据协议头判断从服务器端请求文件还是从

web基础-web工作原理,http协议,浏览器缓存

1,web工作原理 2,http协议 3,浏览器缓存 4,cookie和session -------------------------------------------------------------------------------------------------------------------------------- 1,web工作原理 平时用浏览器,输入网址后回车,页面响应我们想要浏览的内容,简单操作的背后蕴涵了什么原理? 当输入url回车后,客户端(浏览器)会去请求