程序员必知的缓存套图

文章目录

  • 1. 线程与进程
    • 1.1 进程:
    • 1.2. 线程:
    • 1.3. 关系
  • 2. 浏览器内核模块组成
  • 4. 事件循环机制
  • 5. 缓存
    • 5.1. 缓存理解
    • 5.2. 缓存分类
    • 5.3. 缓存使用示意图
    • 5.4. 缓存中的header参数

1. 线程与进程

1.1 进程:

进程是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础。
在这里插入图片描述

1.2. 线程:

线程是操作系统能够进行运算调度的最小单位,被包含在进程之中,是进程中的实际运作单位。一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务。

1.3. 关系

在这里插入图片描述
每个进程都有相应的线程,在执行程序时,实际上是执行相应的一系列线程。进程是资源分配的最小单位,线程是程序执行的最小单位。

在这里插入图片描述

2. 浏览器内核模块组成

在这里插入图片描述
在这里插入图片描述

4. 事件循环机制

在这里插入图片描述

在这里插入图片描述
模型的运转流程:

执行初始化代码, 将事件回调函数交给对应模块管理
当事件发生时, 管理模块会将回调函数及其数据添加到回调列队中
只有当初始化代码执行完后(可能要一定时间), 才会遍历读取回调队列中的回调函数执行

5. 缓存

在这里插入图片描述

5.1. 缓存理解

  1. 缓存定义:
  2. 浏览器在本地磁盘上将用户之前请求的数据存储起来,当访问者再次需要改数据的时候无需再次发送请求,直接从浏览器本地获取数据
  3. 缓存的好处:
  4. 减少请求的个数
  5. 节省带宽,避免浪费不必要的网络资源
  6. 减轻服务器压力
  7. 提高浏览器网页的加载速度,提高用户体验
var dt = new Date();
dt.setSeconds(dt.getSeconds() + 60);
document.cookie = "cookietest=1; expires=" + dt.toGMTString();
var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
//是否启用cookie
if(!cookiesEnabled){alert("没有启用cookie ");
}else{alert("已经启用cookie ");
}

5.2. 缓存分类

  1. 强缓存
  2. 不会向服务器发送请求,直接从本地缓存中获取数据
  3. 请求资源的的状态码为: 200 ok(from memory cache)
  4. 协商缓存
  5. 向服务器发送请求,服务器会根据请求头的资源判断是否命中协商缓存
  6. 如果命中,则返回304状态码通知浏览器从缓存中读取资源
  7. 强缓存 & 协商缓存的共同点
  8. 都是从浏览器端读取资源
  9. 强缓存 VS 协商缓存的不同点
    1. 强缓存不发请求给服务器
    2. 协商缓存发请求给服务器,根据服务器返回的信息决定是否使用缓存

5.3. 缓存使用示意图

在这里插入图片描述

5.4. 缓存中的header参数

在这里插入图片描述

强缓存的header参数

  1. expires:
  2. 这是http1.0时的规范;它的值为一个绝对时间的GMT格式的时间字符串,如Mon, 10 Jun 2015 21:31:12 GMT,如果发送请求的时间在expires之前,那么本地缓存始终有效,否则就会发送请求到服务器来获取资源
  3. cache-control:max-age=number
  4. 这是http1.1时出现的header信息,主要是利用该字段的max-age值来进行判断,它是一个相对值;资源第一次的请求时间和Cache-Control设定的有效期,计算出一个资源过期时间,再拿这个过期时间跟当前的请求时间比较,如果请求时间在过期时间之前,就能命中缓存,否则就不行;
  5. cache-control常用的值(做一个简单了解即可):
  6. no-cache: 不使用本地缓存,需要使用协商缓存。先与服务器确认返回的响应是否被更改,如果之前的响应中存在Etag,那么请求的额时候会与服务器端进行验证,如果资源为被更改则使用缓存。
  7. no-store: 直接禁止游览器缓存数据,每次用户请求该资源,都会向服务器发送一个请求,每次都会下载完整的资源。
  8. public:可以被所有的用户缓存,包括终端用户和CDN等中间代理服务器。
  9. private:只能被终端用户的浏览器缓存,不允许CDN等中继缓存服务器对其缓存。
  10. 注意:当cache-control与Expires共存的时候cache-control的优先级高

协商缓存的header参数

重点:协商缓存都是由服务器来确定缓存资源是否可用的,所以客户端与服务器端要通过某种标识来进行通信,从而让服务器判断请求资源是否可以缓存访问

  • Last-Modified/If-Modified-Since:二者的值都是GMT格式的时间字符串
  1. 浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在respone的header加上Last-Modified的header,这个header表示这个资源在服务器上的最后修改时间
  2. 浏览器再次跟服务器请求这个资源时,在request的header上加上If-Modified-Since的header,这个header的值就是上一次请求时返回的Last-Modified的值
  3. 服务器再次收到资源请求时,根据浏览器传过来If-Modified-Since和资源在服务器上的最后修改时间判断资源是否有变化,如果没有变化则返回304 Not Modified,但是不会返回资源内容;如果有变化,就正常返回资源内容。当服务器返回304 Not Modified的响应时,response header中不会再添加Last-Modified的header,因为既然资源没有变化,那么Last-Modified也就不会改变,这是服务器返回304时的response header
  4. 浏览器收到304的响应后,就会从缓存中加载资源
  5. 如果协商缓存没有命中,浏览器直接从服务器加载资源时,Last-Modified的Header在重新加载的时候会被更新,下次请求时,If-Modified-Since会启用上次返回的Last-Modified值
  6. 图例:
    在这里插入图片描述
  • Etag/If-None-Match

    1. 这两个值是由服务器生成的每个资源的唯一标识字符串,只要资源有变化就这个值就会改变
    2. 其判断过程与Last-Modified/If-Modified-Since类似
  • 既生Last-Modified何生Etag

    1. HTTP1.1中Etag的出现主要是为了解决几个Last-Modified比较难解决的问题
    2. 一些文件也许会周期性的更改,但是他的内容并不改变(仅仅改变的修改时间),这个时候我们并不希望客户端认为这个文件被修改了,而重新GET
    3. 某些文件修改非常频繁,比如在秒以下的时间内进行修改,(比方说1s内修改了N次),If-Modified-Since能检查到的粒度是s级的,这种修改无法判断(或者说UNIX记录MTIME只能精确到秒);
    4. 某些服务器不能精确的得到文件的最后修改时间。

小结:
利用Etag能够更加准确的控制缓存,因为Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符。

Last-Modified与ETag是可以一起使用的,服务器会优先验证ETag,一致的情况下,才会继续比对Last-Modified,最后才决定是否返回304。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/248499.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

安装webpack及使用

前言 你是否也是只会运用框架中集成好的Webpack配置呢?你明白每一项的意义么?你懂多少Webpack的个性化配置项呢?本篇文章为你讲解Webpack中的各种配置项参数及作用! 文章目录了解Webpack相关开启项目编译打包应用使用webpack配置…

php单例型(singleton pattern)

搞定&#xff0c;吃饭 <?php /* The purpose of singleton pattern is to restrict instantiation of class to a single object. It is implemented by creating a method within the class that creates a new instance of that class if one does not exist. If an obje…

助你提高效率的几个Vue指令

前言 很多使用Vue的同学往往最容易忽略的指令&#xff0c;由于在这里考虑到很多初学甚至还没有开始接触Vue的同学呢&#xff0c;在介绍v-clos之前呢就先以大家都熟知的v-model编写小demo v-model 相信大家对v-model并不陌生&#xff0c;简单来讲他就是用于在表单控件以及组建…

掌握Mock摆脱后端同学的束缚

文章目录前言Mock概述mock.js安装Mock规范Mock的使用总结前言 当下采用前后端分离模式开发Web应用已经成为气候&#xff0c;在开发阶段有一个不成文的规定则是 项目开发后端先行 但是作为前端开发工程师的我们&#xff0c;难道在搭建完页面后只能等待后端的接口么&#xff1f;…

Vue技能树上线啦

前言 前端现在越来越多样化&#xff0c;语言众多&#xff0c;大家使用的框架也比较杂&#xff0c;在广泛的前端技术栈面前我唯爱Vue&#xff08;仅代表个人观点勿喷小伙伴们&#xff09;可能很多人觉得我是因为简单&#xff0c;其实并不然&#xff0c;我尝试过很多框架&#x…

《SpringMVC从入门到放肆》一、概述

一、SpringMVC概述 ViewServiceDaoDBSpring MVCinterfaceinterfaceMysqlimplsimplsSpringMVC也叫Spring web mvc&#xff0c;属于表现层框架。SpringMVC是Spring框架的一部分&#xff0c;是在Spring3.0后发布的。 二、第一个SpringMVC程序功能描述&#xff1a;  用户提交一个…

手握流量密码,万粉不是梦

前言 可能大家来到CSDN的目的初衷都是不一样的&#xff0c;像我注册CSDN的时候完全是为了解决自己项目中的各种问题&#xff0c;能够有一个为我提供正确答案、正确解决方案的一个平台&#xff0c;简单的了解后我选择CSDN&#xff0c;直到成为现在的创作者也说明我的选择是对的…

秋季学期学习总结

转载于:https://www.cnblogs.com/zx666/p/10408950.html

一文带你了解React框架

前言 由于 React的设计思想极其独特&#xff0c;属于革命性创新&#xff0c;性能出众&#xff0c;代码逻辑却非常简单。所以&#xff0c;越来越多的人开始关注和使用&#xff0c;认为它可能是将来 Web 开发的主流工具。 这个项目本身也越滚越大&#xff0c;从最早的UI引擎变成…

Web前端JQuery面试题(一)

Web前端JQuery面试题&#xff08;一&#xff09; 一&#xff1a;选择器 基本选择器 什么是#id&#xff0c;element&#xff0c;.class&#xff0c;*&#xff0c;selector1, selector2, selectorN&#xff1f;答&#xff1a; 根据给定的id匹配一个元素&#xff0c;用于搜索&…

前端云原生——微信小程序云服务配置

前端同样涉及云原生前言创建使用云开发项目搭建云环境测试云服务1. 获取openid&#xff08;上传本地login云函数&#xff09;1.1 创建部署login文件时报错2. 自定义sum函数并创建部署3. 上传图片4. 前端操作数据库5. 即时通信demo面试法宝欢迎各位小伙伴们&#xff01; 为大家推…

45天带你玩转Node(第一天)初探Node.js

45天带你玩转Node 粉丝要求博主系统的写一篇关于Node.js的学习资料&#xff0c;但其实我们的Node.js知识点并不少&#xff0c;所以博主为大家搭建了一个专栏&#xff0c;为了方便大家系统的学习Node.js&#xff0c;大家记得订阅哦&#xff01;虽然我们的Node.js还很年轻&#…

【转载】 安卓版手机微信如何清理微信空间

在手机微信的使用过程中&#xff0c;随着手机微信使用的时间越长&#xff0c;手机微信占用的空间越大&#xff0c;其实手机微信存储了很多聊天记录包括图片、视频等大文件信息&#xff0c;此时如果手机存储空间比较紧张&#xff0c;可以使用微信自带的清理工具对手机微信空间进…

45天带你玩转Node(第二天)走进Node.js

45天带你玩转Node 粉丝要求博主系统的写一篇关于Node.js的学习资料&#xff0c;但其实我们的Node.js知识点并不少&#xff0c;所以博主为大家搭建了一个专栏&#xff0c;为了方便大家系统的学习Node.js&#xff0c;大家记得订阅哦&#xff01;虽然我们的Node.js还很年轻&#…

深入Vue原理_数据响应式

欢迎各位小伙伴们&#xff01; 为大家推荐一款刷题神奇哦 点击链接访问牛客网 各大互联网大厂面试真题。从基础到入阶乃至原理刨析类面试题 应有尽有&#xff0c;赶快来装备自己吧&#xff01;助你面试稳操胜券&#xff0c;solo全场面试官 数据响应式响应式是什么如何实现数据响…

python scipy样条插值函数大全(interpolate里interpld函数)

scipy样条插值 scipy样条插值1、样条插值法是一种以可变样条来作出一条经过一系列点的光滑曲线的数学方法。插值样条是由一些多项式组成的&#xff0c;每一个多项式都是由相邻的两个数据点决定的&#xff0c;这样&#xff0c;任意的两个相邻的多项式以及它们的导数(不包括仇阶导…

EKS独领风骚

前言 随着公司的逐渐发展&#xff0c;开拓了更加多的子项目与小程序&#xff0c;这些都需要进行宣传&#xff0c;但是管理以及部署新的应用是一个繁琐的工程&#xff0c;部署麻烦而且更新业务的时候非常不方面。尤其面向用户的时候&#xff0c;体验感很差。于是想要使用docker…

Linux进程管理之ps的使用

主题Linux进程管理之ps工具的使用 一ps工具的介绍 ps: process state 进程状态ps - report a snapshot of the current processesLinux系统各进程的相关信息均保存在/proc/PID目录下的各文件中 默认显示的内容很少 [rootcentos65 ~]# psPID TTY TIME CMD2018 pts/0 …

openstack Q版部署-----安装报错问题

1、实例开机提示找不到磁盘Booting from Hard Disk... GRUB. 开启 CPU 虚拟化支持。 将计算节点 nova.conf 配置修改如下即可&#xff1a; [libvirt] cpu_mode none virt_type qemu重启服务 systemctl restart libvirtd.service openstack-nova-compute.service 2、错误: 超过…

深入Vue原理_双向数据绑定(视图/数据)

欢迎各位小伙伴们&#xff01; 为大家推荐一款刷题神奇哦 点击链接访问牛客网 各大互联网大厂面试真题。从基础到入阶乃至原理刨析类面试题 应有尽有&#xff0c;赶快来装备自己吧&#xff01;助你面试稳操胜券&#xff0c;solo全场面试官 文章目录数据的变化反应到视图命令式操…