这个方式你看有毛病吗?潜藏了一个大坑,如果电脑的本地时间与服务器时间不一致时,那么服务器返回的这个过期时间可能就是不准确的,因此这种方式在 HTTP 1.1 中被抛弃了。
Cache-Control
在 HTTP1.1 中,采用了一个非常关键的字段:Cache-Control 。这个字段也存在于响应头中。如:
cache-control: max-age=2592000
代表的是这个响应返回后,在 (2592/3600=720小时)之内直接可以直接使用缓存。
它和 Expires 本质的不同在于它并没有采用具体的时间点,而是采用的时长来控制强缓存。如果 Expires 和 Cache-Control 同时存在的时候,Cache-Control 会优先考虑。
强缓存有没有可能失效呢?如果资源缓存时间超时,也就是强缓存失效了,接下来该怎么办呢?此时就会进入到第二级屏障 – 协商缓存。
3.2、协商缓存
强缓存失效之后,浏览器在请求头中携带相应的缓存 tag 向服务器发送请求,服务器根据这个缓存 tag 决定到底是否使用缓存,这就是协商缓存。
缓存 tag 有两种:ETag 和 Last-Modified 。
ETag 是服务器根据当前文件内容生成的唯一标识,如果内容发生更新,唯一标识也会更新。浏览器接收到的 ETag 会作为 if-None-Match 字段的内容,并放到请求头中,发送给服务器之后,服务器会与服务器上的 值进行对比,如果两者一样,浏览器直接返回 304,使用缓存,不一样时发送 http 请求。
Last-Modified ,最后修改时间。浏览器第一次发送网络请求后,服务器会在响应头上加上该字段。浏览器再发请求时,会把该值作为 last-Modified-Since 的值,放入请求头,然后服务器会与服务器上的最后修改时间进行对比,如果两者一样,浏览器直接返回304,使用缓存。不一样时发送 http 请求。
两者对比:
精准度上 ETag 更好一点。因为 ETag 能够更准确的判断资源是否有更新,保证拉取到的都是最新内容。
性能上 Last-Modified 刚好一点,只需要记录一个时间点就好了。
如果两者都存在的话,优先考虑 ETag。
3.3、缓存位置
前边讲述,浏览器请求地址时,服务器返回 304 表示使用浏览器缓存,这些资源究竟缓存到哪了呢?
缓存位置一共有四种,按照优先级由高到低排列分别为:
-
Service Worker
-
Memory Cache
-
Disk Cache
-
Push Cache
四、浏览器的本地存储有哪些?
所谓本地存储,就是把一些信息,存储到客户端本地,存储的信息不会因为页面的跳转或关闭而消失。浏览器本地存储主要分为:cookie、webStorage 和 indexDB。
4.1、cookie
cookie 主要为了辨别用户身份。弥补 http 在状态管理上的不足。
http 是一个无状态协议,浏览器向服务器发送请求之后,服务器返回响应,下次再请求的时候,服务器已经不认识浏览器了,如果浏览器下次再发送请求时,能够把 cookie 带上,服务器进行解析,便能够辨别浏览器的身份。
cookie 就是用来存储状态的,它的特点分别有:
-
能够兼容所有浏览器,它和服务器之间有一定的关联。
-
存储大小限制:一般浏览器规定同源下最多只能存储 4KB 大小
-
cookie 存在过期时间,过期时间可以自己设置。
-
cookie 不稳定,清除浏览器缓存或三方清理垃圾时容易把 cookie 移除掉。
-
用户可以根据句自己的需求开启 cookie 缓存,如果开启无痕浏览器或隐身模式时,将关闭 cookie。
4.2、webStorage
webStorag 可分为 localStorage 和 sessionStorage ,是本地持久化存储,本地持久化存储用来保存一些不需要发送给服务器的信息,用来补充 cookie 存储方式不足。
localStorage 特点:
-
不兼容低版本浏览器 IE6-8 。
-
生命周期是永久的,除非用户主动清除,否则一直存在。
-
存储的数据大小一般为 5M,各浏览器之间有差异。
-
不受浏览器无痕模式或隐身模式影响。
-
严格的本地存储,与服务器之间没有关系。
sessionStorage 特点:
-
- 不兼容低版本浏览器 IE6-8 。
-
仅在当前会话下有效,关闭当前页面或关闭浏览器,就会被清除。
-
存储的数据大小一般为 5M,各浏览器之间有差异。
-
严格的本地存储,与服务器之间没有关系。
localStorage 和 sessionStorage 有一个本质区别,localStorage 生命周期是永久化的,而 sessionStorage 只存在于当前会话。
4.3、indexedDB
indexedDB 是 html5 提供的一种本地存储,一般保存大量用户数据并要求数据之间有搜索需要的场景,当网络断开,做一些离线应用,数据格式为 json 。本质上是一个 非关系型数据库。它的容量是没有上限的。
特点:
-
存储空间较大,默认250M 。
-
键值对操作,可以进行数据库读取和遍历,也可以用索引进行高效的检索。
-
受同源策略限制,无法跨域访问数据库。
总结:浏览器本地存储每种方式都有各自的特点,cookie 比较小适合存储与服务器之间通信的较小状态信息,webStorage 存储不参与服务器通信的数据,indexedDB 存储大型的非关系型数据库。
五、http 和 https
浏览器访问 http 的网站的时候,域名前面会提示“不安全”,访问 https//xxx.com 的时候浏览器提示 “安全”,这是为什么呢?
http 协议,超文本传输协议,被用于在服务器和浏览器之间传递信息,http协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者直接截取浏览器和服务器之间传输报文,就可以直接读懂其中的信息。
为了解决 http 协议的缺陷,使用 https 安全套接字层超文本传输协议,为了保证数据的安全性,在 http 协议的基础上,新增了 SSL 协议,SSL依靠证书来验证服务器的身份器,并未浏览器和服务器之间的通信加密。
https 并不是一个新协议,而是一个加强版的 http 。简单讲 https 协议由 SSL+ http 协议构建成可进行加密传输、身份认证的网络协议,要比 http 协议安全。
https 和 http 的区别:
-
https 协议需要申请安全证书,一般免费较少,需要费用,而 http 不需要。
-
https 具有 SSL 加密传输,更加安全,而 http 是明文传输,不安全。
-
https 和 http 使用的不同连接方式,用的默认端口不一样,http 是 80,https是443。
-
http 的连接简单,没有状态,而 https 是需要通过 SSL 校验身份信息的,相对更加安全。
https 工作原理图:
加解密过程
接着我们来谈谈浏览器和服务器进行协商加解密的过程。
首先,浏览器会给服务器发送一个随机数client_random和一个加密的方法列表。
服务器接收后给浏览器返回另一个随机数server_random和加密方法。
现在,两者拥有三样相同的凭证: client_random、server_random和加密方法。
接着用这个加密方法将两个随机数混合起来生成密钥,这个密钥就是浏览器和服务端通信的暗号。
最后前端到底应该怎么学才好?
如果你打算靠自己摸索自学,那么你首先要了解学习前端的基本大纲,这是你将要学习的主要内容,理解以及掌握好这些内容,便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程,作为初学者最好的方式就是看视频教程学习,初学者容易理解接受。
不要选择买书学习,这样的方式没有几个人能学会,基本都是看不下去书,也看不懂书。如果喜欢看书的学弟,可以买一些经典的书籍作为辅助即可,主要还是以看教程为主。每天抽出固定几个小时学习,做好长期学习的准备。学习编程并不是每天光看视频,你学习编程最重要的目的是为了编写软件产品,提供给大众使用,所以用手写出代码实现功能才是我们要做的事情。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】