前端常见面试-存储/缓存篇

更新日期: 2019-11-27阅读: 2.2k标签: 面试

对于前端开发者来说,缓存是大家都耳熟能详的一个知识点,但是经常在面试的过中,稍微深入询问的时候,就会出现知识点混乱,比如常见的http缓存,本地存储,cookie的使用。下面分别就这三个方面具体阐述,以此来巩固大家的知识体系。


一、cookie

1、cookie是什么?

        HTTP协议本身是无状态的。什么是无状态呢,即服务器无法判断用户身份。Cookie实际上是一小段的文本信息(key-value格式)。客户端向服务器发起请求,如果服务器需要记录该用户状态,就在请求的响应中向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时,浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie,以此来辨认用户状态。
        当然,对于cookie来说,其实就是存储在客户端(如:浏览器)中的一段特殊的键值对形式的字符串,可以直接使用document.cookie来进行获取和设置相关的cookie信息。

2、cookie的运行机制是什么?

        当用户第一次访问并登陆一个网站的时候,cookie的设置以及发送会经历以下4个步骤:客户端发送一个请求到服务器->服务器发送一个HttpResponse响应到客户端,其中包含Set-Cookie的头部 -> 客户端保存cookie,之后向服务器发送请求时,HttpRequest请求中会包含一个Cookie的头部 ->服务器返回响应数据.
        document.cookie属性看起来像一个普通的文本字符串,其实它不是。即使您在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时,cookie 信息是以名/值对的形式展示的。如果您设置了新的 cookie,旧的 cookie 不会被覆盖。如果key的名称一致,则会进行覆盖之前的value。

3、cookie的具体属性及用途?

对于document.cookie来说,其主要包含四个属性,分别如下:

属性名称属性的的用途注意事项
NAME=VALUE键值对,可以设置要保存的 Key/ValueNAME 不能和其他属性项的名字一样,否则不是新建而是覆盖之前同名的内容
Expires设置对应cookie的失效时间,单位为s,即在该时间后就会失效被客户端删除Cookie中通过getMaxAge()和setMaxAge(int maxAge)来读写该属性。maxAge有3种值,分别为正数,负数和0,具体表示:正数表示失效时间,当maxAge属性为负数,则表示该Cookie只是一个临时Cookie,不会被持久化,仅在本浏览器窗口或者本窗口打开的子窗口中有效,关闭浏览器后该Cookie立即失效,当maxAge为0时,表示立即删除Cookie
domain生成该 Cookie 的域名在该域名下可以使用cookie
Path设置cookie有效的具体路径,一般默认为/,表示根目录下的页面都有权利操作cookie
Secure安全模式下传输cookie信息如果设置了这个属性,那么只会在 SSH 连接时才会回传该 Cookie
4、cookie方法的封装

        对于cookie来说,没有自身的内置方法,如果对cookie进行操作,则需要对document.cookie直接进行操作,目前常用的cookie插件都是进行的封装,具体封装如下:

写cookies
function setCookie(name,value)
{
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) +  ";expires=" + exp.toGMTString();
}
读取cookies
function getCookie(name)
{
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

    if(arr=document.cookie.match(reg))

        return unescape(arr[2]);
    else
        return null;
}
删除cookies
function delCookie(name)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null)
        document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}


二、本地存储

        本地存储是htmlu引入的一项新技术,主要包括localStorage和SessionStorage两类。具体详见如下:

1、内置方法

        localStorage和sessionStorage两者都是挂载在window对象下的两个属性,其拥有一样的内置方法,分别为:


getItem():获取存储的信息,

setItem():创建或者修改存储的信息,

removeItem():删除某一个存储的信息,

clear():清空所有的存储信息
2、使用场景:

        Web应用允许使用浏览器提供的api实现将数据存储到用户电脑上。这样客户端存储遵循“同源策略”,因此不同站点的页面是无法相互读取对方存储的数据,而同一站点的不同页面之间是可以相互共享存储数据的,它为我们提供了一种通信机制,例如,一个页面填写的表单数据可以显示在另一个页面中。Web应用可以选择存储数据的有效期:临时存储可以让数据保存至当前窗口关闭或者浏览器退出;永久存储可以将数据永久存储在硬盘上。客户端存储的方式之一就是Web存储


三、web缓存

1. web缓存主要有:数据库缓存、服务器缓存(代理服务器缓存、CDN缓存),浏览器缓存

2. 浏览器缓存包括:http缓存、cookie缓存、local storage本地缓存

3. http缓存的几个术语:1)缓存命中率:从缓存中得到的数据请求数与所有请求数的比例。比例越高缓存越好 性能越好;2)过期内容:超过设置的有效期的内容,这些内容需要重新从服务器请求新数据或者需要在服务器验证内容是否修改(如果修改服务器更新失效时间,并且返回最新内容进行缓存,同时返回状态码为200,如果没有修改,服务器直接返回状态码304,3)验证:向服务器发送请求,验证过期内容是否有效,有效则直接返回304并刷新缓存失效时间;4)失效:把失效的缓存内容清除;

4.http缓存设置:通过设置html的meta来控制页面缓存,具体实例如下:

<meta http-equiv=“Cache-control” content=“no-cache,max-age,must-revalidate,no-store”>
<meta http-equiv=“Pragma” content=“no-cache”>
<meta http-equiv=“Expires” content=“0”>
<meta http-equiv=“Cache” content=“no-cache”>

5. 浏览器缓存分为强缓存和协商缓存,其具体加载页面流出如下:1)浏览器先根据http的请求头信息来判断是否命中强缓存,如果命中强缓存则直接加载缓存中的资源,不会去服务器请求新的资源;2)如果未命中强缓存,则会向服务器发送资源请求,服务器会直接验证相关的请求的资源是否在浏览器本地缓存失效,如果没有失效,则服务器不会返回资源信息,此时的状态码为304,浏览器直接从缓存中获取资源;3)如果未命中协商缓存,即服务器校验发现浏览器本地缓存内容失效,则返回新的请求资源并更新浏览器的缓存,此时的状态码为200

6. 属性的具体讲解:

1)Cache-control:是一个相对时间,与客户端时间进行比较,从而来判断缓存是否失效,具体包括:max-age 最大失效时间,即在该时间内缓存都有效,单位为s,设置了max-age=0时,获取资源之前都需要先校验Etag和Last-modify,来判断资源是否进行修改,如果未修改服务器直接返回304,no-cache强制使用缓存前必须发送资源请求到服务器进行校验本地缓存是否有效;no-store 禁止使用缓存资源,必须去服务器请求新的资源;public 表示响应可以被任何对象(客户端、代理服务器 等)缓存;private 只能被单个对象(如操作系统等用户,浏览器)缓存,不能被代理服务器缓存;must-revalidate 告诉浏览器或者缓存服务器 在本地文件过期之前使用本地文件,本地文件一旦过期就要去服务器进行文件检验,如果服务器检验维修改则直接返回304(目前不常用)

2)Expires 响应头过期时间,需要和Last-modify一起使用,优先级低于Cache-control;Expires是以绝对时间,如果客户端时间更改则会导致客户端与服务器时间差造成缓存失效,因此才引入Cache-control

3)Pragma:用于向后兼容http1.0协议的缓存服务器,那时候的http1.1协议中还没有Cache-control

4)Last-Modified / If-Modified-Since:

浏览器第一次请求服务器资源的时候,服务器返回的响应头(response)中会加上Last-Modified,其是一个时间标示,表示资源的失效时间

当浏览器再次请求该资源的时候 请求头(request)中会带有If-Modified-Sinxe,其值就为缓存是的Last-Modified的值,去服务器进行校验缓存是否失效,未失效返回304,失效返回新的资源并更新缓存

缺点:1)Last-Modified的时间只能精确到秒,如果在一秒内多次修改则无法判断资源被修改;2)如果文件被定时生成 并为改变内容时,缓存会失效;3)服务器没有获取到最新的修改时间造成资源无法更新。因此引入了ETag。

5)ETag / If-None-Match:

浏览器第一次请求服务器资源的时候,服务器返回的响应头(response)会带有ETag表示符,当浏览器再次请求时会在请求头加上If-None-Match,其值就为缓存时的ETag的值。Last-Modified和ETag可以同时使用,但ETag的优先级较高,会先比较ETag,如果相同才会去比较Last-Modified,最终由服务器决定是否返回304



四、cookie,sessionStroage,localstorage区别

面试中,经常会将三者放在一起进行对比,具体来阐述他们的相同点和 不同点:

        cookie的大小限制为4KB左右。它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

        sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载

        localStorage(长期存储) :与 sessionStorage 一样,但是浏览器关闭后,数据依然会一直存在

三者的具体对比如下:


 因此,根据合理的情况进行使用对应的存储,才能能达到更加有效的效果。

原文:https://segmentfault.com/a/1190000021857936

链接: https://fly63.com/article/detial/7947

Web前端年后跳槽面试复习指南

很多童鞋可能年后有自己的一些计划,比如换份工作环境,比如对职业目标有了新的打算。当然面试这一关不得不过,大概又不可能系统性的复习,这里罗列一些 重点 面试的知识点和文章,

前端面试之webpack面试常见问题

什么是webpack和grunt和gulp有什么不同?什么是bundle,什么是chunk,什么是module?什么是Loader?什么是Plugin?如何可以自动生成webpack配置?webpack-dev-server和http服务器如nginx有什么区别?

每个 JavaScript 工程师都应当知道的 10 个面试题

多问问应聘者高层次的知识点,如果能讲清楚这些概念,就说明即使应聘者没怎么接触过 JavaScript,也能够在短短几个星期之内就把语言细节和语法之类的东西弄清楚。

37个JavaScript基本面试问题和解答

面试比棘手的技术问题要多,这篇文章整理了37个JavaScript基本面试问题和解答,这些仅仅是作为指导。希望对前端开发的你有所帮助!

React常见面试题

React常见面试题:React中调用setState之后发生了什么事情?React中Element与Component的区别?优先选择使用ClassComponent而不是FunctionalComponent?React中的refs属性的作用是什么?React中keys的作用是什么?

有趣的Js面试题_如何让 (a == 1 && a == 2 && a == 3) 返回 true

题目大意为:JS 环境下,如何让 a == 1 && a == 2 && a == 3 这个表达式返回 true ?这道题目乍看之下似乎不太可能,因为在正常情况下,一个变量的值如果没有手动修改,在一个表达式中是不会变化的。

js练习笔记:10道JavaScript题目

10道JavaScript题目:累加函数addNum、实现一个Person类、实现一个arrMerge 函数、实现一个toCamelStyle函数、setTimeout实现重复调用、实现一个bind函数、实现一个Utils模块、输出一个对象自身的属性

vue菜鸟从业记:没准备好的面试,那叫尬聊

面试开场白总缺少不了自我介绍,一方面是面试官想听听你对自己的介绍,顺便有时间看看简历上的描述,是否与口述一致。另一方面就是看看你简历上做过什么项目,用到了哪些技术栈,一会儿好提问你。

毕业一年左右的前端妹子面试总结

把面试当做学习,这个过程你会收益很大。前端知识很杂,可能实际工作中用到的技术,像框架都是跟着公司的要求走的,像我最近也在看React啦,Vue和React都对比着再学习

vue面试时需要准备的知识点

vue上手可以说是比较轻松而且简单,如果你用过angular,react,你也会很喜欢vue。vue的核心思想依旧是:构建用户界面的渐进式框架,关注视图的变化。这也是为什么新建的文件是结构是template script style

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!