其他分享
首页 > 其他分享> > 【第二届青训营-寒假前端场】- 「HTTP实用指南」笔记

【第二届青训营-寒假前端场】- 「HTTP实用指南」笔记

作者：互联网

将自己在掘金上发的笔记搬了过来：HTTP实用指南、个人博客

初识HTTP

输入url -> browser进程处理输入信息 -> 浏览器内核向服务器发起请求 -> 浏览器内核读取响应 -> 浏览器内核进行渲染 -> browser进程页面加载完成

image.png

协议分析

发展历程

image.png

报文结构

HTTP/1.1

image.png

如图，可以看到请求和响应的请求头、返回的状态码、等等

Method说明
GET请求一个指定资源的表示形式，使用GET的请求应该只用于获取数据
POST用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用
PUT用请求有效载荷替换目标资源的所有当前表示
DELETE删除指定的资源
HEAD请求一个与GET请求的响应相同的响应，但没有响应体（用的比较少）
CONNECT建立一个到由目标资源标识的服务器的隧道。（用的比较少）
OPTIONS用于描述目标资源的通信选项。
TRACE沿着到目标资源的路径执行一个消息环回测试。（用的比较少）
PATCH用于对资源应用部分修改。

状态码

image.png

RESTful API

一种API设计风格：REST - Representational State Transfer

请求返回码含义
GET /zoos200 OK列出所有动物园，服务器成功返回了
POST /zoos201 CREATED新建一个动物园，服务器创建成功
PUT /zOos/ID400 INVALID REQUEST更新某个指定动物园的信息(提供该动物园的全部信息)； 用户发出的请求有错误,服务器没有进行新建或修改数据的操作
DELETE /zoos/ID204 NO CONTENT删除某个动物园，删除数据成功

常用请求头

请求头说明
Accept接收类型，表示浏览器支持的MIME类型**（对标服务端返回的Content-Type）**
Content-Type客户端发送出去实体内容的类型
Cache-Control指定请求和响应遵循的缓存机制，如no-cache
lf-Modified-Since对应服务端的Last-Modified，用来匹配看文件是否变动，只能精确到1s之内
Expires缓存控制，在这个时间内不会请求，直接使用缓存，服务端时间
Max-age代表资源在本地缓存多少秒，有效时间内不会请求，而是使用缓存
If-None-Match对应服务端的ETag，用来**匹配文件内容是否改变 ** （非常精确)
Cookie有cookie并且同域访问时会自动带上
Referer该页面的来源URL(适用于所有类型的请求，会精确到详细页面地址, csrf拦截常用到这个字段)
Origin最初的请求是从哪里发起的（(只会精确到端口) ，Origin比Referer更尊重隐私**
User-Agent用户客户端的一些必要信息，如UA头部等

常用响应头

响应头说明
Content-Type服务端返回的实体内容的类型
Cache-Control指定请求和响应遵循的缓存机制，如no-cache
Last- Modified请求资源的最后修改时间
Expires应该在什么时候认为文档已经过期，从而不再缓存它
Max-age客户端的本地资源应该缓存多少秒，开启了Cache-Control后有效
ETag资源的特定版本的标识符，Etags类似于指纹
Set-Cookie设置和页面关联的cookie,服务器通过这个头部把cookie传给客户端
Server服务器的一些相关信息
Access-Control-Allow-Origin服务器端允许的请求Origin头部(如为*)

缓存

强缓存

本地有了直接用就好了

协商缓存

与Server端要通信，再确定要不要用它

image.png

Cookie

Set-Cookie - response

Name=value各种cookie的名称和值
Expires=DateCookie的有效期，缺省时Cookie仅在浏览器关闭之前有效。
Path= Path限制指定Cookie的发送范围的文件目录，默认为当前
Domain=domain限制cookie生效的域名，默认为创建cookie的服务域名
secure仅在HTTPS安全连接时，才可以发送Cookie
HttpOnlyJavaScript脚本无法获得Cookie
SameSite=[None|Strict|Lax]None同站、跨站请求都可发送；Strict仅在同站发送 ；允许与顶级导航一起发送，并将与第三方网站发起的GET请求一起发送

发展

HTTP/2概述：更快、更稳定、更简单

HTTPS概述

image.png

常见场景分析

静态资源

以 今日头条 为例，打开网络面板查看其请求，找到css文件的请求。

image.png

可以看到返回的状态码为200，那么是不是真的发起了请求呢（旁边的括号就说了，从磁盘缓存）

image.png

由上图响应头，可以看出：

静态资源方案：缓存 + CDN + 文件名hash

image.png

那么缓存期那么久，怎么保证用户拿到的内容是最新的呢？

文件名hash，当文件内容有变化时文件名变换/加上版本号，这样缓存中的文件就无法match，就只能重新请求了。

登陆 - 跨域

image.png

image.png

跨域问题，导致了请求方法为OPTION

image.png

协议、主机名、端口任意一者不同都会出现跨域问题（HTTP的默认端口号443）

image.png

解决跨域问题

image.png

image.png

如上图，登陆时向什么地址做了什么动作？

携带了哪些信息，返回了哪些信息？

那么下一次进入页面的时候，为什么能够记住登陆态呢？

鉴权

image.png

image.png

image.png

如图，讲解的很清楚。

实际应用

XMLHttpRequest - Web API 接口参考 | MDN (mozilla.org)

AJAX之XHR

0UNSENT代理被创建，但尚未调用open()方法。
1OPENEDopen()方法已经被调用。
2HEADERS_RECEIVEDsend()方法已经被调用，并且头部和状态已经可获得。
3LOADING下载中; responseText 属性已经包含部分数据。
4DONE下载操作已完成。

AJAX之Fetch

node中标准库: HTTP/HTTPS

常用的请求库: axios

//全局配置
axios.defaults.baseURL = "https://api.example.com";
//添加请求拦截器
axios.interceptors.request.use(function (config) {
	//在发送请求之前做些什么
	return config;
}，function (error) {
	//对请求错误做些什么
	return Promise.reject(error );
});

//发送请求
axios( { 
    method: 'get',
    url: 'http://test.com',
    responseType: 'stream
    }).then( function(response) {
    response.data.pipe( fs.createWriteStream('ada_lovelace.jpg'))
});

网络优化

了解更多

不止HTTP协议一个选择

扩展 - 通信方式

WebSocket

image.png

UDP

QUIC：Quick UDP Internet Connection 基于UDP

image.png

总结感想

今天讲师小姐姐声音超温柔的介绍了HTTP及其常见协议分析、报文结构、缓存策略分析，还讲解了其具体的业务场景使用。

本文引用的内容大部分来自杨超男老师的课——HTTP实用指南

标签：缓存,HTTP,请求,寒假,青训营,服务器,浏览器,资源
来源： https://blog.csdn.net/qq_45890533/article/details/122735201