1浏览器缓存

浏览器缓存是为了提升页面访问的速度，浏览器对一些已经访问过的网络资源（JS、css、image等等）会先存储在本地磁盘，当浏览器需要再次引用这些资源的时候，从本地加载，不从网络请求。

1.1缓存的目的

提升页面访问的速度，提升用户访问网站的体验。

1.2浏览器缓存机制

浏览器第一次访问网站的时候，会请求所有的静态资源，并根据HTTP协议头存储.
浏览器第二次访问网站及后面的请求，都会考虑到缓存机制。

1.2浏览器缓存大小

存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

2.浏览器缓存机制

2.1浏览器缓存机制

有四个方面，按照获取资源时请求的优先级依次排列为：Memory Cache、Service Worker Cache、HTTP Cache、Push Cache。

2.2常说的浏览器缓存机制

常说的浏览器缓存机制主要就是HTTP协议定义的缓存机制.
HTTP协议定义的缓存策略包括Expires策略、Cache-control策略、用户行为与缓存三部分。

2.3 HTTP Cache

可分为强缓存和协商缓存。优先级较高的是强缓存，在命中强缓存失败的情况下，才会走协商缓存。对一条http get报文的基本缓存处理过程包括7个步骤：接收、解析、查询、新鲜度检测、创建响应、发送、日志。

3.相关API：

xxStorage.setItem(‘key’, ‘value’);
该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
xxStorage.getItem(‘person’);

该方法接受一个键名作为参数，返回键名对应的值。

xxStorage.removeItem(‘key’);
该方法接受一个键名作为参数，并把该键名从存储中删除。
xxStorage.clear()
该方法会清空存储中的所有数据。

PS：

SessionStorage存储的内容会随着浏览器窗口关闭而消失。
LocalStorage存储的内容，需要手动清除才会消失。
xxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
JSON.parse(null)的结果依然是null。

前端学习之浏览器缓存相关推荐

前端学习：浏览器缓存方式有哪些（cookie、localstorage、sessionstorage）
浏览器缓存有哪些浏览器缓存的问题在后台项目中会经常出现,本期文章会总体介绍浏览器缓存的几种方式和通常缓存的方式 .
使用缓存实现前端性能优化——浏览器缓存机制、缓存分类
前端性能优化探讨及浏览器缓存机制一.缓存如何实现前端性能优化 1.什么是浏览器缓存 2.js请求,一般会有哪些地方有缓存处理? 3.静态资源 ① 什么是静态资源 ② 静态资源的缓存策略二.缓存的类 ...
前端学习笔记--HTTP缓存
原文地址:https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-c ...
前端学习之浏览器从输入URL到页面加载的全过程
浏览器从输入URL到页面加载的全过程从输入URL到页面加载的主干流程如下: 1.浏览器的地址栏输入URL并按下回车. 2.浏览器查找当前URL的DNS缓存记录. 3.DNS解析URL对应的IP. 4 ...
前端面试系列-浏览器缓存机制
缓存位置从缓存位置上来说分为四种,并且各自有优先级,当依次查找缓存且都没有命中的时候,才会去请求网络 Service Worker Memory Cache Disk Cache Push Cach ...
前端学习(一) 浏览器渲染原理
前言浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分,一是渲染引擎,另一个是JS引擎,渲染引擎在不同的浏览器中也不是都相同的.目前市面上常见的浏览器内核可以分为4种: Trident( I ...
如何清除chrome浏览器缓存
清除浏览器的缓存知识调用前言引入具体操作知识调用文章中可能用到的知识点前端学习:浏览器缓存方式有哪些(http协议 websql indexDB cookie localstorage s ...
聊一聊浏览器缓存机制
相信很多前端童鞋对于浏览器缓存都不太陌生,但是如果没有系统的归纳总结,可能三言两句很难说明白.如何才能完美的回答,这是一个值得思考的问题. 当然,我们不能为了应对面试才去掌握,而应该当作技能储备起来, ...
面试-浏览器缓存机制
前语:不要为了读文章而读文章,一定要带着问题来读文章,勤思考. 作者:Jartto 来源:http://1t.click/tJV 相信很多前端童鞋对于浏览器缓存都不太陌生,但是如果没有系统的归纳总结, ...

前端学习之浏览器缓存

文章目录

1浏览器缓存

1.1缓存的目的

1.2浏览器缓存机制

1.2浏览器缓存大小

2.浏览器缓存机制

2.1浏览器缓存机制

2.2常说的浏览器缓存机制

2.3 HTTP Cache

3.相关API：

前端学习之浏览器缓存相关推荐

最新文章

热门文章