图解浏览器缓存,教你提高用户体验
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~
本文由前端林子发表于云+社区专栏
浏览器缓存,是浏览器端保存数据,用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络请求和加快页面速度,从而提高用户体验。
一 强缓存
1.1 区分Expires和Cache-Control
以一个接口返回的响应头为例:
这里我画了张思维导图,对Expires和Cache-Control做比较:
具体介绍Expires和Cache-Control:
Expires:
(1)Expires是HTTP1.0的东西,现在默认浏览器均默认使用HTTP 1.1,所以它的作用基本忽略;
(2)Expires规定了缓存失效时间(Date为当前时间),是绝对时间。由于Expires返回的是一个绝对时间,在服务器时间与客户端时间相差较大的时候,缓存命中不准确;
Cache-Control:
(1)Cache-Control是HTTP1.1的
(2)Cache-Control的max-age规定了缓存有效时间(2552s),是相对时间;
(3)若响应头Expires和Cache-Control同时存在,Cache-Control优先级高于Expires
Cache-Control的常用指令:
no-cache:不使用本地缓存,需要使用协商缓存,也就是先与服务器确认缓存是否可用。
no-store:禁用缓存。用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
public:其他用户也可使用缓存,适用于公共缓存服务器的情况。
private:只有特定用户才能使用缓存,适用于公共缓存服务器的情况。
max-age:客户机可以接收生存期不大于指定时间(以秒为单位)的响应。
min-fresh客户机可以接收响应时间小于当前时间加上指定时间的响应。
max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。
注意:no-cache指令并不是不缓存,no-cache的意思是可以缓存,但每次用应该去向服务器验证缓存是否可用。no-store才是不缓存内容。
1.2 强缓存的过程
**强缓存:**浏览器直接从本地缓存中获取数据,不与服务器进行交互。
· 浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在response的header会加上Expires/Cache-Control的header;
· 浏览器再请求这个资源时,先从缓存中寻找,找到这个资源后,比较Expires或Cache-Control的max-age字段值做比较, 如果在有效期内,则读取缓存内容;若缓存已过期,则重新向服务器发送请求;
· header在重新加载的时候会被更新
这里我画了两张图,浏览器第一次请求:
浏览器第一次请求
浏览器再次请求:
强缓存
对于强缓存,chrome浏览器的状态码:
200 OK(from disk cache)或是200 OK (from memory cache)
例如:请求某个图片后,当浏览器再次访问这个图片时,发现有这个图片的缓存,且缓存没过期,所以就使用缓存。
当浏览器发现缓存过期后,缓存并不一定不能使用了。比如文件虽然过了有效期,但内容并没有发生改变,还是可以用缓存数据。所以,这个时候需要与服务器协商,让服务器判断本地缓存是否还能使用。那么又怎么判断服务端文件有没有更新呢?主要有两种方式:
Last-Modified,If-Modified-since。
二 协商缓存
2.1 区分Last-Modified和If-Modified-Since
以一个返回的接口为例:
Last-Modified的格式:
Last-Modified: Mon, 17 Sep 2018 12:06:18 GMT
If-Modified-Since的格式:
If-Modified-Since: Mon, 17 Sep 2018 12:06:18 GMT
2.2 Etag是什么
web服务器响应请求时,告诉浏览器当前资源在服务器的唯一标识(生成规则由服务器决定)。Apache中,ETag的值默认是对文件的索引节(INode),大小(Size)和最后修改时间(MTime)进行Hash后得到的。
2.3 协商缓存的过程
浏览器第一次请求:
浏览器第一次缓存
浏览器再一次请求:
协商缓存
Last-Modified、If-Modified-Since:
· 浏览器第一次向服务器请求一个资源,服务器在返回这个资源的同时,在respone的header加上Last-Modified字段,表示该资源在服务器上的最后修改时间;
· 浏览器再次向服务器请求这个资源时,在request的header上加上If-Modified-Since字段,这个值就是上一次请求时返回的Last-Modified的值;
·服务器收到资源请求时,比较If-Modified-Since字段值和被请求资源的最后修改时间,若资源最后修改时间较旧,则说明文件没有修改,返回304 Not Modified, 浏览器从缓存中加载资源;若不相同,说明文件被更新,浏览器直接从服务器加载资源, 返回200;
·重新加载资源时更新Last-Modified Header
Etag、If-None-Match
· 浏览器第一次向服务器请求一个资源,服务器在返回这个资源的同时,在respone的header加上ETag字段;
·浏览器再次跟服务器请求这个资源时,在request的header上加上If-None-Match,这个值就是上一次请求时返回的ETag的值;
·服务器再次收到资源请求时,再根据资源生成一个新的ETag,与浏览器传过来If-None-Match比较,如果这两个值相同,则说明资源没有变化,返回304 Not Modified, 浏览器从缓存中加载资源,否则返回200 资源内容。与Last-Modified不一样的是,当服务器返回304 Not Modified的响应时,由于ETag重新生成过,response header中还会把这个ETag返回,即使这个ETag跟之前的没有变化
2.4 为什么有了Last-Modified,还要用Etag呢?
HTTP1.1中ETag的出现主要是为了解决几个Last-Modified比较难解决的问题:
·一些文件也许会周期性的更改,但是他的内容并不改变(仅仅改变的修改时间),这个时候我们并不希望客户端认为这个文件被修改了,而重新GET;
·某些文件修改非常频繁,比如在秒以下的时间内进行修改,(比方说1s内修改了N次),If-Modified-Since能检查到的粒度是s级的,这种修改无法判断(或者说UNIX记录MTIME只能精确到秒);
·某些服务器不能精确的得到文件的最后修改时间。
对于上述情景,利用ETag能够更加准确的控制缓存,因为ETag是服务器自动生成的资源在服务器端的唯一标识符,资源每次变动,都会生成新的ETag值。Last-Modified与ETag是可以一起使用的,但服务器会优先验证ETag。
2.5 比较强缓存和协商缓存
基于上文对强缓存和协商缓存过程的解释,这里我把强缓存和协商缓存绘制在一张图里,方便比较,具体过程可以参照上文:
http缓存
三 小结
本文主要通过图解介绍了http的缓存,具体包括强缓存和协商缓存。如有问题,欢迎指正。
相关阅读 【每日课程推荐】机器学习实战!快速入门在线广告业务及CTR相应知识
此文已由作者授权腾讯云+社区发布,更多原文请点击
搜索关注公众号「云加社区」,第一时间获取技术干货,关注后回复1024 送你一份技术课程大礼包!
海量技术实践经验,尽在云加社区!
图解浏览器缓存,教你提高用户体验相关推荐
- 微信小程序开发11 数据预取:合理缓存提高用户体验
你好,我是俊鹏,今天我带你学习怎么通过微信提供的数据预取能力,提高小程序的用户体验. 数据预取也叫数据预加载,顾名思义,这项能力能提前加载未来要使用的数据,然后缓存到本地.这样一来,你在使用这些数据时 ...
- 四个简单例子教你通过用户行为记录提高用户体验之 “快的用户体验”
写在前面的话 也许你的网站并不销售任何东西,但网站上所有内容抵达给用户,天然就存在一个名词"用户体验".说到用户体验,它给人的第一印象总是:抽象,带有强烈的主观意识:难以量化.不好 ...
- 如何提高用户体验之某费控独角兽公司的分享-现场分享
背景 做了一期观测云有观点后,应某费控公司独角兽邀请,到某费控公司独角兽分享如何提高用户体验.ppt30分钟,答疑一个小时.以下是现场ppt的的实况,(文字后期语音摘录). PPT 讲解 第一页 今天 ...
- 前端如何实现图片懒加载(lazyload) 提高用户体验
定义 图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力. 惰性加载是程序人性化的一种体现,提高用户体验,防 ...
- 手机uc怎么放大页面_手机网站怎样做可以提高用户体验度?——竹晨网络
目前,手机已经占据了人们大多数的闲暇时间,互联网的流量开始逐渐向移动端倾斜,重视移动端的用户体验,就可以给客户端增加很多意想不到的功能.但是还是有很多公司和站长不知道手机网站应该怎么建才能符合用户的使 ...
- 破局-SaaS产品如何提高“用户体验”
随着体验经济时代的到来,用户体验被提上新的高度,何为用户体验呢?通俗点"好的用户体验设计就是围绕着用户目标,设计出让他们觉得真香.还想要的使用感受." 好的用户体验如何衡量呢? 除 ...
- 巧用Ajax的beforeSend 提高用户体验--防止重复数据
巧用Ajax的beforeSend 提高用户体验 jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作. 具体可参考j ...
- 中山网络推广浅谈网站提高用户体验要做好的5点!
中山网络推广表示,企业做网站优化的很大一部分目的是为了能更好地营销.销售自己的产品,而实现销售的工作就需要有客户,所以网站在优化时做好用户体验也非常重要,那么该怎样才能提高用户体验呢?下面中山网络推广 ...
- 网站哪些功能可以提高用户体验度?
点击下方"青年码农"关注 回复"源码"可获取软件,源码等资料 网站用户体验是指用户在使用网站时所感受到的感觉和情感.它包括用户与网站的互动.使用过程中的舒适 ...
最新文章
- Anaconda:虚拟环境
- 得了诺奖的彩色照相术失传100多年,现在终于被找回来了
- Eclipse的java代码出错:The import org.apache cannot be resolved
- Kotlin学习与实践 (十)Kotlin的可空性
- 皮一皮:老板是个学渣...
- P4245 【模板】任意模数NTT
- MySQL中常见的单行函数(上)
- linux点亮硬盘灯命令 简书,威联通NAS交流学习:用虚拟机安装荒野无灯大佬的精简win10系统...
- stringBuffer、StringBuilder、排序、Arrays、Jdk1.5新特性(java基础知识十三)
- echart 饼图每一块间隙_花10分钟做酱香饼,简单方便又美味,酥脆咸香比买的还要好吃...
- iPhone公司为了节约成本,都干过什么事情?
- 遥感基础编程语言IDL介绍
- 你中招了吗?《心理学常见误区》
- badboy 录制脚本,提示:“当前页面的脚本发生错误”
- Task07: 凸优化;梯度下降;优化算法进阶 学习笔记
- storm32云台说明书_俄版SimpleBGC、Storm32开源三轴云台软硬件以及调参软件说明书-V1.02...
- Qt+FFmpeg录屏
- unity 字符串 小技巧
- Centos yum安装Mysql
- 计算机毕业设计SSMJava远程健康数据管理系统【附源码数据库】
热门文章
- eslint解决方案整理
- 计算机网络「二」—— 物理层(多图详解)
- 关于Intel IPP的基本使用方法——参照可设置ipl库
- Modularity(模块化-CMD规范)
- 卡方检验chi-square test
- c语言 office 二级成绩查询,【2019年9月辽宁计算机二级考试成绩查询入口】- 环球网校...
- mysql 命令 utf8_Mysql 统一设置utf8字符
- java数据结构创建树_在java中创建树数据结构?
- 如何把本地yum源给其他机器使用_配置本地yum源以及第3方软件仓库的搭建
- DevExpress v18.2版本亮点——Office File API 篇