前端面试——浏览器存储浏览器缓存(http缓存机制)
浏览器存储
cookie和session的区别
cookie数据存放在浏览器上,session存放在服务器上
cookie一般在客户端有大小限制,一般为4K,session没有限制,但是考虑到服务器性能,一般不能存放太多数据
cookie可以设置过期时间,否则一直有效,session在超过一定的时间(通常30min)后就会失效,当关闭浏览器时,会自动调用session.invalidate()方法,清除掉session中的信息
cookie安全性较低,可以通过分析本地的cookie并进行cookie欺骗,所以一般不用于存放敏感信息(如用户密码),session存储在服务器上,不存在敏感信息泄露的问题,安全性较高
cookie中只能保管ASCII字符串,并需要通过编码方式存储为Unicode字符或二进制数据,session中能够存储任何类型的数据,包括但不限于string,integer,list,map等
cookie
cookie是客户端的解决方案,是一种网络服务器存储在计算机或移动设备上的纯文本文件,是服务器发送到浏览器上的一小块数据,是一个在服务器和客户端之间来回传送文本值的内置机制,服务器可以根据cookie追踪用户在不同页面的访问信息
cookie的用处:
- 会话管理:用户账号密码
- 个性化:用户偏好设置
- 追踪:记录和分析用户行为
cookie的特点:
大小限制在4k以内
不加密则不安全
会消耗网络的带宽
使用JS操作cookie比较复杂
session
session是一种服务端解决方案,是服务器为了保存用户状态而创建的一个特殊对象,客户端请求服务端,服务端会为请求开辟一块空间,session弥补了HTTP无状态特性
session的创建过程:
- 当浏览器第一次访问服务器时,服务器会创建一个session对象(该对象有唯一的ID,即SessionID),服务器会将SessionID以cookie的方式返回浏览器,当浏览器再次访问服务器时,会将SessionID发送过来,服务器依据SessionID就可以找到对应的session对象
session的缺点:
- A服务器存储了session,做了负载均衡后,加入一段时间内A的访问量激增,会转发到B进行访问,但是B服务器中没有存储A的session,会导致session的失效
cookie,localStorage,sessionStorage的区别
- cookie可设置失效时间,默认为关闭浏览器后失效,sessionStorage仅在当前网页会话下有效,关闭页面或浏览器后就会被清除,localStorage除非手动清除,否则永久有效
- cookie存储数据大小在4K以内,sessionStorage和localStorage可以保存5M的信息
- 在进行请求时,cookie每次都会携带在请求头中,浪费带宽,如果cookie保存过多数据会产生性能问题,sessionStorage和localStorage仅在浏览器中保存,不参与和服务器的通信
- 从安全性来说,cookie安全性较低,所以一般不用来保存敏感信息,其他两个似乎也不安全。
- cookie区分域,不区分端口,同ip下的不同端口cookie是共享的,sessionStorage和localStorage不可共享
- 应用场景:
- cookie可以用于识别用户登录
- sessionStorage可用来保存一些临时的数据,防止用户刷新页面之后丢失了一些参数
- localStorage可以用来传递在页面传递参数
浏览器缓存(HTTP缓存机制)
强制缓存
- 浏览器初次请求或者缓存过期,服务端返回资源和Cache-Control(max-age=12321214s)
- 再次请求的时候,会判断Cache-Control信息是否还生效(时间是否过期),决定从本地拿缓存还是继续向服务器请求
Cache-Control的值
- max-age:时间限制
- no-cache:不做本地缓存,交给服务端
- no-store:不做本地强制缓存,也不让服务端做缓存,一请求一返回
- private:只允许最终用户访问(电脑、手机等)
- public:允许中间的一些路由、代理等访问
协商缓存
- 服务端缓存策略
- 服务器判断客户端资源,是否和服务端资源一样,一致则返回304,否则返回200和最新的资源
- 资源标识: 在Response Header中,有Last-Modified(资源的最后修改时间)和Etag(资源的唯一标识)两种:
- 可以两者一起使用,必须两者都有效服务端才会返回304
- 会优先使用Etag,因为Last-Modified只能精确到秒级,如果资源被重复生成,而内容不变,则Etag更精确
- 对于更改文件而文件内容不变的情况,用Etag更精确
- 某些服务器不能精确地得到文件最后修改的时间
按资源标识Etag(根据资源内容计算而来)
按Last-Modified(最后修改时间)
综述
- 第一次进入页面,请求服务器,然后服务器进行应答,浏览器会根据responseHeader(cache-control、expires等)来判断是否是对资源进行缓存,代表这是强制缓存
- 客户端再次发起请求时,先查询浏览器是否有缓存,若没有则直接向服务器请求
- 若有缓存,根据Cache-Control判断缓存是否过期,若未过期,则直接读取缓存(强制缓存)
- 若缓存过期,判断是否有Etag和Last-Modified,若没有,则直接向服务器请求,服务器返回资源+
Etag/Last-Modified
- 若有,则向服务器请求并带上
If-No-Match(key: Etag)、If-Modified-Since(key: Last-Modified)
字段(协商缓存) - 服务器根据If-None-Match、If-Modified-Since判断资源是否改变(根据Etag/最后修改时间是否相同判断)
- 若资源发生改变,则返回200状态码+资源+新的
Etag/Last-Modified
- 若未发生改变,则读取缓存+304状态码
浏览器缓存行为和用户行为的关系
用户操作 | Expires/Cache-Control | Last-Modified/Etag |
---|---|---|
地址栏回车 | 有效 | 有效 |
页面链接跳转 | 有效 | 有效 |
新开窗口 | 有效 | 有效 |
前进、后退 | 有效 | 有效 |
F5刷新 | 无效 | 有效 |
Ctrl+F5刷新 | 无效 | 无效 |
缓存位置
Service Worker、Memory Cache、Disk Cache、Push Cache,各自有优先级,依次查找缓存都没有命中的时候才去请求网络
- 内存缓存(memory cache):内存缓存具有两个特点,分别是快速读取和时效性
- 快速读取:内存缓存会将编译解析后的文件,直接存入该进程的内存中,以方便下次运行使用时的快速读取。
- 时效性:关闭页面时,缓存的资源就会被进程释放
- 硬盘缓存(disk cache):硬盘缓存则是直接将缓存写入硬盘文件中,读取缓存需要对该缓存存放的硬盘文件进行I/O操作,然后重新解析该缓存内容,读取复杂,速度慢,持久化。
- Service Worker:间于浏览器和服务器的中间人角色,运行在浏览器背后的独立线程,基于h5的web worker,一般可以用来缓存文件。可以拦截当前网站的请求,进行判断,如果可以使用缓存就直接返回缓存,否则将请求转给服务器,传输协议必须为https
- 推送缓存(Push Cache):是HTTP/2的内容
- 所有资源都能够被缓存、推送(Edge和Safari支持相对比较差)
- 可以推送no-cache和no-store的资源
- 一旦连接关闭Push Cache就会被释放
- 多个页面可以使用同一个Http/2连接,也就可以使用同一个push cache(有的浏览器会对同域不同tab使用同一个Http连接)
- push cach中的缓存只能被使用一次
- 浏览器可拒绝接受已存在的资源推送
- 可以给其他域名推送资源
在浏览器中,浏览器会在js和图片等文件解析执行后直接存入内存缓存中,那么当刷新页面时只需直接从内存缓存中读取(from memory cache);而css文件则会存入硬盘文件中,所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。
Etag生成原理
在HTTP1.1协议中并没有规范如何计算ETag,可以是能够唯一标识资源的任何东西,如一个或多个文件属性。计算Etag开销最大的一般是采用哈希算法获取资源的表述值,可以只计算资源的哈希值,也可以包含头信息和头信息的值(应该避免包含Expires、Cache-Control等),先要组装资源的表述,若组装比较耗时,可以采用GUID的方式
Etag有两种类型:强Etag和弱Etag,与Apache服务器计算Etag的方式有关
- 强Etag表现形式:“22FAA065-2664-4197-9C5E-C92EA03D0A16”
- 弱Etag表现形式:w/“22FAA065-2664-4197-9C5E-C92EA03D0A16”
前端面试——浏览器存储浏览器缓存(http缓存机制)相关推荐
- 2020最全前端面试系列(浏览器原理)(最容易忽视的面试隐藏大杀器)
2020前端面试系列(浏览器原理) 浏览器输入URL到返回页面的全过程 浏览器渲染步骤 重排和重绘 触发reflow情形 减少reflow方法 浏览器本地存储方案的比较 cookie localSto ...
- 前端面试查漏补缺--(二) 垃圾回收机制
前言 本系列最开始是为了自己面试准备的.后来发现整理越来越多,差不多有十二万字符,最后决定还是分享出来给大家. 为了分享整理出来,花费了自己大量的时间,起码是只自己用的三倍时间.如果喜欢的话,欢迎收藏 ...
- 前端面试知识点大全——浏览器篇
总纲:前端面试知识点大全 目录 1.浏览器工作原理 2.浏览器如何解析css,如何渲染css的 2.1 构建DOM树 2.2 构建CSSOM规则树(就是css规则树) 2.3 渲染阻塞 2.4 构建渲 ...
- 中高级前端面试宝典之浏览器篇
中高级前端面试宝典 作为一名前端开发工程师,要掌握的知识点是多而杂的,在面试刷题阶段,经常没头没脑的,我将面试题系统化,分了好几个系列,祝愿大家(包括我)在这个疫情刚过去的互联网寒冬找到事儿少钱多
- 浏览器渲染机制面试_前端面试大全:浏览器渲染原理-文件无法渲染
在这一篇文章中,我们将一起学习浏览器渲染原理这部分的知识.你可能会有疑问,我又不是做浏览器研发的,为什么要来学习这个?其实我们学习浏览器渲染原理更多的是为了解决性能的问题,如果你不了解这部分的知识,你 ...
- 前端面试常考题:JS垃圾回收机制
摘要:众所周知,应用程序在运行过程中需要占用一定的内存空间,且在运行过后就必须将不再用到的内存释放掉,否则就会出现下图中内存的占用持续升高的情况,一方面会影响程序的运行速度,另一方面严重的话则会导致整 ...
- 前端缓存 浏览器存储
目录 前言 一.浏览器存储 0.bfcache 1.WebStorage (1).sessionStorage 对象 (2).localStorage 对象 2.Cookie (1).cookie 与 ...
- 前端面试总结——http、html和浏览器篇
作者:forthealllight github.com/forthealllight/blog/issues/19 该文章转自 前端大全 微信公众号 1.http和https https的SSL ...
- 前端面试查漏补缺--(一) 防抖和节流
前言 本系列最开始是为了自己面试准备的.后来发现整理越来越多,差不多有十二万字符,最后决定还是分享出来给大家. 为了分享整理出来,花费了自己大量的时间,起码是只自己用的三倍时间.如果喜欢的话,欢迎收藏 ...
最新文章
- activiti任务TASK
- flask 作为 three.js 的服务器
- C语言中positive用法,sprintf - C语言库函数
- redis的一些操作命令
- VS 2013 with update安装失败(kb2829760)解决方案
- 深度学习实战:基于bilstm或者dialated convolutions做NER
- vue --- 使用vue在html上显示当前时间
- Coriant助力Aureon部署100Gbps光纤网络
- AVFoundation – AVAssetTrack 获取视频 音频信息
- python字符串比较大小_Python 比较两个字符串大小
- SpringBoot指南(八)——SpringBoot整合Redis
- gcc和arm-linux-gcc区别
- 【转载】法线贴图Nomal mapping 原理
- 奋斗吧,程序员——第二十九章 伤心桥下春波绿,疑是惊鸿照影来
- [软考]项目工作说明书VS项目范围说明书
- 什么是项目沟通管理?
- python截图(长图和短图)方法封装
- 6.Selenium2 自动化测试实战-基于Python语言-126邮箱登陆、获得验证信息
- 小生不才,真实记录爬取链家网2584条租房信息,聊一聊框架爬取大量数据防止被ban的事
- 小葵花妈妈课堂之nginx必须要了解的优化九部曲!