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

场景

这里的状态码虽然是200，但是 from disk cache意思是该静态资源是从浏览器缓存中获取的

2.一定程度上来说，只要提高静态资源加载的速度就能提高用户的体验

静态资源部署方案
缓存+CDN+文件名hash
CDN：就近原则，如果没有就一步步回溯

文件名Hash：文件有变化时文件的hash名就会变，这样可以保证用户获取的资源是最新的。（打包的时候在文件名版本号做手脚）

3.一般来说http的默认端口号为80，http的默认端口号为443
4.为什么请求会有option呢？因为在跨域的时候浏览器会先有option请求，在向服务器得到请求的时候，根据服务器的请求再来确定具体的请求是什么
5.跨域解决方案
Cors
代理服务器
同源策略是浏览器的安全策略，不是http的
所以代理服务器天然不存在跨域问题
webpack-server就用了代理服务器
iframe
6.为什么登录成功后再刷新，浏览器会记住登录信息
鉴权
Sesstion+cookie
第一次登录的时候向服务器发起请求，确认信息无误后，将服务器返回的session通过set-cookie种在浏览器的域名下，再次进入该网页时，浏览器会自动将域名下的cookie种的session发送给服务器核验(服务器去比对session)

JWT(json web token)
服务器生成一个token，本地不会存储该token,将该token发送给浏览器，浏览器在下次请求的时候请求头中带有token信息，服务器去解析该token
一般比较短的情况下用JWT

7.跳转后的网站为什么可以自动登录呢 SSO(单点登录)

实战

通信

1.XMLHttpRequest

1.首先定义method:请求方法，data:数据，url
2.new一个XMLHttpRequest实例xhr
3.设置xhr的一些方法和属性
responseType:请求的文件的类型如json或者xml
onreadystatechange:请求后的钩子函数，readyState是状态码，从1到4，4表示请求结束，可以通过成功执行成功回调函数，失败执行失败回调函数。当 readyState 属性发生变化时，调用的事件处理器。
open:初始化一个请求
send:发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回。

2.Fetch

优点：
1.使用Promise
2.模块化设计
3.通过数据流处理对象，支持分块读取，在数据量比较大的时候有好处

3.axios

优点：
1.支持浏览器、nodejs环境
2.有丰富的拦截器

优化

1.CDN加速
2.预解析、预连接
3.稳定性

通信

1.http
2.websocket
全双工
实时性要求很高，如聊天室
使用ws://或wss://开头
3.http3草案中http3的传输底层QUIC(quick UDP Internet Connection) 基于UDP的封装，既有UDP传输快的特性又通过封装实现了类似TCP的可靠传输