【前端面试之缓存】js本地缓存、浏览器缓存、服务器缓存

1、javaScript本地缓存的方法

cookie、sessionStorage、localStorage、indexedDB
下表是cookie、sessionStorage、localStorage之间的区别

–	–	–	–
Cookie	4K	只能被同源的页面访问共享、每次发起同源请求的时候，会发送给服务器	结合token来使用，这样服务器就知道是谁发起的请求了、可以用来统计页面的点击次数
LocalStorage	5Mb	持久化存储，不会随着页面的关闭而消失、同源访问	网站换肤、不常变更的个人信息
sessionStorage	5MB	表示一次会话中保存的数据、当前窗口关闭会失效、只能被同一个窗口的同源页面访问共享	敏感账号一次性登录，推荐使用sessionStorage

Cookie通过设置Expires，来决定什么时候过期。
localStorage 有两个缺点：
- 无法像Cookie一样设置过期时间
- 只能存入字符串，无法直接存对象

关于cookie的使用如下：
document.cookie = '名字=值';关于localStorage的使用
localStorage.setItem('username','cfangxu');
localStorage.getItem('username')
localStorage.removeItem('username')
localStorage.clear()

indexedDB
是一种低级API，用于客户端存储大量结构化数据(包括, 文件/ blobs)。该API使用索引来实现对该数据的高性能搜索。基本上数据库能干的事它都能干。

2、强缓存、协商缓存

缓存的定义：浏览器在本地磁盘上将用户之前请求的数据存储起来，当用户再次请求该数据时，不用发送http请求，直接从浏览器本地获取。

1、强缓存：

不会像服务器发送请求，直接从本地缓存中获取数据
请求资源的状态码为200
比如说是百度的Logo图标，马上到8-1建军节，那么只需要把Cache-Control的值设为0就可以了。
下面这个图就是百度的Logo图片的响应头：

2、协商缓存：

协商缓存也可以通过两种方式来设置，分别是 http 头信息中的 Etag 和 Last-Modified 属性。

存在etag还有last-modified这两个参数时用于控制协商缓存的时间的。请求头里面的if-modified-since还有if-none-match这俩参数是很有用的。
服务器通过在响应头中添加 Last-Modified 属性来指出资源最后一次修改的时间，当浏览器下一次发起请求时，会在请求头中添加一个 If-Modified-Since 的属性，属性值为上一次资源返回时的 Last-Modified 的值。当请求发送到服务器后服务器会通过这个属性来和资源的最后一次的修改时间来进行比较，以此来判断资源是否做了修改。如果资源没有修改，那么返回 304 状态，让客户端使用本地的缓存。
协商缓存是由服务器来确定缓存资源是否可用，所以客户端与服务器端都通过某种标识来进行通信，从而让服务端判断请求资源是否可以缓存访问。

强缓存和协商缓存的区别：都是从浏览器端读取资源。不同点是：1、强缓存不发请求给服务器。2、协商缓存发请求给服务器，根据服务器返回的信息决定是否使用缓存。

3、什么是CDN

CDN(内容分发网络)：是指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠的将音乐、图片、视频、应用程序及其他文件发送给用户来提高性能。

当用户群激增的时候，公司就必须在多个地理位置不同的服务器上部署，为了缩短http请求时间，我们应该把大量的静态资源放置的离用户近一点。CDN本质上就是根据用户区域的不同，让用户从CDN服务器集群中最近的节点，去做访问。

用户使用CDN缓存资源的过程：

【前端面试之缓存】js本地缓存、浏览器缓存、服务器缓存相关推荐

【前端 · 面试】HTTP 总结（九）—— HTTP 协商缓存
最近我在做前端面试题总结系列,感兴趣的朋友可以添加关注,欢迎指正.交流. 争取每个知识点能够多总结一些,至少要做到在面试时,针对每个知识点都可以侃起来,不至于哑火. 前言通过前面的介绍,我们知道 H ...
前端面试：黑客的无尽和浏览器的反甲
前端面试:黑客的无尽和浏览器的反甲 1.引言最近有同学在面试中被问到cookie针对xxs攻击设计了什么,因为'护甲'不厚,然后被'暴击'了. 所以本文针对一些浏览器上基本的攻击方式和防御策略总结了 ...
【前端Vue+后端Node.js+MySql】部署到服务器
[前端Vue+后端Node.js+MySql]部署到服务器文章目录 [前端Vue+后端Node.js+MySql]部署到服务器 1.买服务器 2.服务器操作 2.1.修改服务器密码,xshell登录 ...
【前端 · 面试】HTTP 总结（八）—— HTTP 强缓存
最近我在做前端面试题总结系列,感兴趣的朋友可以添加关注,欢迎指正.交流. 争取每个知识点能够多总结一些,至少要做到在面试时,针对每个知识点都可以侃起来,不至于哑火. 前言通过上一篇的总结,我们知道 ...
前端面试总结——http、html和浏览器篇
作者:forthealllight github.com/forthealllight/blog/issues/19 该文章转自前端大全微信公众号 1.http和https https的SSL ...
前端面试知识点大全——JS篇（三）
总纲:前端面试知识点大全目录 1.变量声明提升 2.冒泡机制 3.attribute 和 property 4.document load 和 document DOMContentLoaded 5 ...
php htaccess实现缓存,使用.htaccess进行浏览器图片文件缓存，_PHP教程
使用.htaccess进行浏览器图片文件缓存, 对于图片类网站,每次打开页面都要重新下载图片,慢不说,还非常浪费流量.这时就需要用到缓存,强制浏览器缓存图片文件缓存文件,提问网站访问数度,减少流量消 ...
解决浏览器加载缓存js文件不能及时获取服务器更新后js文件问题
当服务器修改js文件后,需要用户重新获取修改后的js文件,而不是访问之前浏览器中缓存的js文件.下面记录一个现在最常用的方法: 页面中访问js的链接如下: <script src="/ ...
php怎么启用浏览器缓存,如何停用浏览器中的缓存？ - php
例如,如果退出Yahoo邮件,然后单击"后退"按钮,它将不会加载最后一页,而是会将您重定向到登录页面. 我必须使用PHP代码来执行此操作,而我正在使用CodeIgniter. 一些 ...
js 数组移除_2020前端面试--常见的js面试题
(答案持续更新...) 1.简述同步和异步的区别 js是一门单线程语言,所谓"单线程",就是指一次只能完成一件任务.如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务 ...

【前端面试之缓存】js本地缓存、浏览器缓存、服务器缓存

1、javaScript本地缓存的方法

2、强缓存、协商缓存

3、什么是CDN

【前端面试之缓存】js本地缓存、浏览器缓存、服务器缓存相关推荐

最新文章

热门文章