7 HTTP 协议的应用场景分析 ｜ 青年夏令营须知

这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天

一、本堂课重点内容：

• 静态资源解析
• 浏览器登录场景分析

二、详细知识点介绍：

静态资源请求分析

我们打开今日头条的官网www.toutiao.com/?wid=167543…，打开F12分析静态资源。

首先看静态资源场景，只要找到index开头，css结尾的文件就行。可以看到状态码是200，根据上一篇笔记的内容这个状态码代表客户端请求成功。但是浏览器真的向服务器发起了请求吗

通过下图框出来的内容可以看到浏览器是从本地Cache中获得css文件的

从Response Header中还可以看出来采用的缓存策略是强缓存，因为Cahche-control换算出来是一年。同时access-control-allow-origin:*表示允许所有域名访问

这里表示携带资源的类型文件，此处说明携带的是css文件

静态资源部署优化

之所以需要优化静态资源的部署，是为了让用户能更快地看到界面，这个时候静态资源就是很影响用户体验的一个点。

要优化肯定需要缓存，这个时候用CDN。比如说在不同城市部署CDN边缘节点，那么不同地区的用户就会先从附近CDN查找，如果有那就直接发过去了，如果没有那就一级一级查上去。

现在可以实现快，但是如何保证用户拿到的是最新的文件？那么可以在文件名上搞事情，比如说上面那个index.xxx.css中间就是一个哈希，如果哈希值对不上说明就不是最新的文件需要重新请求。

跨域

现在有一个登录场景

现在观察发送了什么请求，可以用关键词quick_login来筛选一下

首先看第一个请求，发起了一个options请求，而之所以是options是因为跨域。

什么是跨域？下图三个部分任意一个部分不一样就是跨域。

解决跨域常用的方案是CORS

大部分先发送一个域请求，查看是否允许跨域请求，如果允许，进行下面操作（这里的大部分指的时复杂请求，剩下的就是简单请求，只有复杂请求需要解决跨域问题）

可以用下面的一波协议头来实现跨域是否允许访问的权限控制

除了CORS还有别的方案

鉴权

HTTP是无状态的，意思说每一次的请求都是独立的。这个特性对于某些应用比如说电商平台来说非常不友好，毕竟电商就是需要在某个身份之下进行操作，你说你不知道是谁给你发请求就给人家回应，那玩意不是有人恶意盗取信息呢？

所以这个时候鉴权技术就很重要，主要有两种，Cookie和JWT。Cookie是浏览器存储验证信息，安全性差一点但是方便好用；JWT是服务器存储验证信息，安全性好一点但是和Cookie比更麻烦。

SSO

现在情况是这样，你在今日头条官网下点击写文章，会自动跳转到头条号上，这是专门给今日头条写文章的应用，这个也需要登录，但是如果你从今日头条直接点过去，那么会自动帮你登录好，这是怎么实现的？

为了实现子应用之间登录信息共享，可以使用SSO。

三、课后个人总结：

1. 我伟大的计网老师说过，计网的一切加速，核心都是缓存。哦不对我记错了，她说的纠错的核心是重传。
2. 跨域是个所有前端课都会涉及到的问题，但是我好像没看到利用跨域的，这个存在的意义是什么？

四、引用参考：

1. juejin.cn/post/698385…