p1 OSI 七层参考模型 / TCP/IP
注：
1、tcp/ip 的最后一层叫：网络接口层 或 数据链路层，up漏掉了 /
2、OSI 只是参考，tcp/ip 是实施
a、物理层
有哪些物理层信道？
a.1
a.2
a.3
a.4
a.5
总结：物理层传输的是 比特流
b、数据链路层
总结：
1、数据链路层主要操作 数据帧
2、交互要使用到 交换机
c、网络层
寻址主要用 路由器，协议是 IP协议
d、传输层
注意：
1、这一层就有端口号了
2、承上启下特别重要
e、会话层
f、表示层
g、应用层
p2 TCP 三次握手
注：
1、isn 生成 seq 序列号
Wireshark 实操讲解：
TCP-三次握手 P2 - 03:27
p3 TCP 四次挥手
注：
1、挥手，两边都可以发起
2、FIN_WAIT_2阶段，如果有 未处理完成的请求或者响应 会在这处理，直到 都处理完，才会发送第三次挥手
3、TIME_WAIT 阶段持续1-4分钟，防止最后丢包让服务器永远不断开。如果丢包了，来第三次挥手，持续1-4分钟就是不会让第三次挥手发现发起FIN的已经CLOSE了，而导致关不了
4、只有发起连接终止的一方会进入 TIME_WAIT 状态
Wireshark 实操讲解：
TCP-四次挥手 P3 - 04:18
p4 浏览器输入url发生了什么？
流程：
输入url --》 DNS查询 --》发送请求 --》 拿到html页面渲染 （流程在下方，可直接搜）
发送请求流程：
物理层 --》 数据链路层 --》 网络层 --》传输层（三次握手）--》应用层【发送http请求（预检请求 + 浏览器缓存）】 --》传输层（四次挥手）
1、认识url
2、DNS查询
将ip和域名做映射！
2.1、第4条的规则
这三个是从大到小，不要被名字误导！！！
DNS优化参考渡一：
3、预检请求
预检请求参考渡一的：
4、浏览器缓存
I、强缓存
a、后台配置 Cache-Control / Expires；Cache-Control 的优先级更高！
b、看 status code 可以知道是存硬盘缓存还是内存缓存
II、协商缓存
a、通过后台设置 Last-Modified / ETag 来设置，ETag 优先级更高
自己搜索
参考：https://blog.csdn.net/qq_43263320/article/details/114623987
5、拿到html页面渲染
a、解析html
b、css解析
css计算过程见渡一：
b.1、回流 -》大小相关一定是回流
b.2、重绘 -》颜色变化等一般是重绘
c、v8（c++写的） 解析 js
剩余部分比较杂：
浏览器输入url发生了什么 P4 - 14:40
1、为什么要字节码 --》 跨平台
2、解释器 --》v8使用JIT；还有一个AOT，直接编译成二进制的，苹果/java9 使用
3、cpu --》 计算机组成原理
p5 CDN内容分发
作用：优化网络资源请求时间的
工作过程
配置了CDN之后，最后一个过程就变了。
变成了找就近的节点，看是否有缓存，没有就接着跳转，找到后依次返回，并缓存！
如果就近节点负载较高，就会找负载较高的就近节点，如下
负载均衡
p6 跨域 + 4种解决方式
为什么会跨域？
四种解决方案
1、jsonp --》现在基本不使用了
原理就是通过 script 的 src 不受同源策略限制，可以跨域请求数据来实现
缺点：
只能使用get 请求，不安全、不易维护
后端返回：
一个函数，这个函数是在前端定义的，后端会把值注入到这个函数的参数里面
代码实现：
前端
后端 express
可参考我的笔记：
2、前端代理
需要构建工具帮助，只对开发环境有效，上线需要 nginx
webpack
vite
注意：
rewrite 需要配合你自己的重写规则，一般不用！
3、后端设置请求头 --》 CORS
CORS参考渡一的：
4、nginx代理
安装nginx
跨域 + 四种解决方法 P6 - 17:28
p7 Ajax
小满笔记：
https://juejin.cn/post/7238072027637186617
可参考我的笔记：
Ajax对seo不友好！
XMLHttpRequest
1、创建 xhr = new XMLHttpRequest()
2、配置 xhr.open (请求方式，请求地址，是否异步)
3、设置请求头 xhr.setRequestHeader() 【get请求不用设置】
4、XMLHttpRequest() 中 readyState 的取值：
注意：
更好的是 xhr.onload = ()=>{} ，也可以这样
4、发送 xhr.send()，send 完才有后面的 xhr.onreadystatechange / onload 回调！
注意：
1、传参时
2、get请求这里不传或者为null，参数在url中
监听进度 --》下面fetch也有
是否可以监听进度，见渡一：
设置超时时间
超时监听
中断请求
中断监听
注：
无法恢复！
其他请求头
a、
类似get，但是放在send中
b、上传文件
需要使用 new FormData()，使用 append(后端key，value) 添加
注意：
小满这里说不要设置请求头
因为不知道 boundary的一个分割格式
一般情况下，我们前端开发不需要需手动指定boundary分隔符，因为大多数 HTTP 客户端库（如浏览器内置的 XMLHttpRequest、Fetch 或第三方库如 axios）会自动为你生成和处理这些边界和分隔符。
p8 fetch
fetch还在维护，而XMLHttpRequest没有维护了！
缺点：
1、没有办法设置超时时间 --》 自己实现
2、取消请求没有XMLHttpRequest方便 --》 基于构造函数去完成
fetch 第一个then中 设置响应体返回方式
get请求
注：
第二个 then 才是真的响应值！
和xhr对比
post请求
进度条
返回流 --》 当前进度
res.body.getReader()
总进度
res.headers.get('Content-Length')
代码
进度条正确，但是没有结果，data打印为undefined！
原因：
res 被进度条占用了，需要拷贝一下
所以返回变成
取消请求
需要构造函数：new AbortController()
超时
自己封装函数，在一定时间后调用 abotr.abort() 去取消请求！
p9 SSE
小满笔记：
https://juejin.cn/post/7238978524030386235
SSE 和 webscoket 区别：
适用场景：
API
EventSource 对象是 HTML5 新增的一个客户端 API，用于通过服务器推送实时更新的数据和通知。
1、EventSource(url，options[配置项]) 构造函数 --》 只能接收get请求
2、EventSource.readyState 属性
3、EventSource.close() 方法
前端主动断开
4、EventSource.onopen 事件
有SSE第一次链接上时触发，代表链接成功
5、EventSource.onerror 事件
6、EventSource.onmessage 事件 --》只是默认是这个，后端定义了，就要按照后端定义的来！
后端
设置请求头为 text/event-stream
SSE全套 P9 - 04:53
后端设置返回事件名称 --》通过event
SSE全套 P9 - 09:15
前端接收就要对应
注：
多个就再加 addEventListener
p10 websocket
小满笔记：
https://blog.csdn.net/qq1195566313/article/details/131155459
websocket封装见：
https://blog.csdn.net/langwang_100/article/details/129865709
使用场景
node搭建ws
后端接收消息
前端
发送消息 send
接收消息
断开消息
注意
这里A只能收到A的信息，B只能收到B的
不是广播一样发出去，需要后端设置
注：
wss实例中有 clients 统计当前多少用户连接，且是 set 结构！
心跳检测 --》 保活 --》 计时器
为什么要心跳？
后端 --》scoket.on 同级加
注：
这里后端发送两种类型的消息，一种是心跳一种是正常消息，type不一样！
前端
分类展示
p11 navigator.sendBeacon --》也可以发送网络请求 --》 使用的是html新增的ping请求
小满笔记：
https://juejin.cn/post/7241562753163460669
适用场景
注意：
埋点（优点1、2）、用户反馈使用较多
与fetch、Ajax对比
后端
因为不需要等待服务端返回，所以越少越好！
前端
可以直接url后加？或者 new FormData()
如果非要传json对象，怎么做？--》转成blob数据
p12 SSL TLS HTTPS
小满笔记：
https://juejin.cn/post/7247698383379710009
http默认端口80 https默认端口443
为什么出现https？
SSL 是 TLS 的前身，现在广泛应用的是TLS，因为其弥补了SSL存在的一些安全性以及性能方面的改进！
TLS在应用层的下一层，传输层的上一层，进行的加密！TCP / IP没有这一层，但是ISO有，见p1的图：
TLS 加密方式：对称加密 + 非对称加密 + 散列函数 全部都使用了！
1、对称加密
2、非对称加密
使用 opensl 模拟 https（不懂 --》多是后端操作）
SSL TLS HTTPS P12 - 06:31
注：
上线环境还是要购买大厂的证书！
p13 JWT --》json web token
小满笔记：
https://juejin.cn/post/7248531609388204090
由三部分组成，由 . 分割
1、头部
注：
一般不用管！
2、负载
3、签名
后端实现
注：
1、key是私钥，最好单独放一个文件中
2、最后一个参数是过期时间
注：
1、token没有权限，根据规范是返回403
2、应该写到 中间件cors() 里面 + 配置白名单
前端
设置请求头，因为后端设置的是json格式，且要序列化一下
前端保留token
前端设置请求头
注：
p14 网络状态
小满笔记：
https://juejin.cn/post/7240721866549641253
1、前端网络状态 --》 就是看电脑是否有网络
2、强网（3G|4G）和弱网环境（2G）
返回一个 networkinformation对象
p15 XSS 跨站脚本攻击
1、反射型XSS
2、存储型XSS --》 严重
3、dom型XSS
XSS漏洞扫描工具
kali操作系统 --》 给专业的人使用的
预防XSS
CSP策略
预防dom型XSS
注意：
前后端都要防止XSS，特别是后端！
p16 TCP实现http服务 --》主要是nodejs
