这是我参与「第四届青训营 」笔记创作活动的的第8天
👋本文接着HTTP实用指南（上）继续总结，分为部分：1. 场景分析 2. 实战 3.了解更多
场景分析
😁 静态资源 | 登录
场景分析——静态资源
- 打开控制台（右键->检查）
- 切换到network
🤔状态码200，一定发起了请求吗？
在状态码旁边有一个（from disk cache），说明这个请求是本地缓存拿到的响应，而没有真实经过“从浏览器发起——>网络传输——>服务器——>返回”的链路
🤔为什么可以在本地缓存拿到响应呢？
图中显示了缓存策略：
- 强缓存
- Cache-control：一年
扩展：静态资源部署上的方案
静态资源部署上的方案：缓存 + CDN（让用户很快地拿到资源） + 文件名 hash（让用户拿到最新的资源）
- CDN:Content Delivery Network
- 通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务
场景分析——登录
- 业务场景：表单登录、扫码登录
- 技术方式：SSO
操作：
- 账号密码登陆
- 打开控制台-network-勾选preserve log-过滤quick login
- 观察请求
🤔为什么有options的请求
跨域，cross-origin（跨域导致出现options请求）
跨域的解决方案
- CORS
-
代理服务器（常见）
- 同源策略是浏览器的安全策略，不是HTTP的
-
Iframe（极少）
- 诸多不便
POST请求
- 向什么地址做了什么动作？
- 使用POST方法
- 目标域名sso.toutiao.com
- 目标path/quick login/v2/
- 携带了哪些信息，返回了哪些信息
-
携带信息
- Post body，数据格式为form
- 希望获取的数据格式为json
- 已有的cookie
-
返回信息
- 数据格式json
- 种cookie的信息
🤔下一次进入页面为什么能记住登陆态呢？
那就涉及到鉴权的方案了：
- Session +cookie
- JWT(JSON web token)
🤔有时候我去了一个不同域名的网站，但是我登录的状态被自动带过来了（跳转后的网站会自动登录），这是为什么？
SSO：单点登录（Single Sign On）
实战
😁 浏览器/nodejs | 常用库
怎么去发起HTTP协议
实战——浏览器篇
AJAX之XHR
具体的封装
AJAX之Fetch
- XMLHttpRequet的升级版
- 使用Promise （缓解回调地狱）
- 模块化设计，Response，Request，Header对象
- 通过数据流处理对象，支持分块读取
具体的封装
实战——node篇
标准库：HTTP/HTTPS
- 默认模块，无需安装其他依赖
- 功能有限/不是十分友好
使用方式
常用的请求库：axios
- 支持浏览器、nodejs环境
- 丰富的拦截器
具体封装
网络优化的手段
稳定性考虑的方面
- 重试是保证稳定的有效手段，但要防止加剧恶劣情况
- 缓存合理使用，作为最后一道防线
了解更多
😁 WebSocket | QUIC
扩展
WebSocket（通信方式）
- 浏览器与服务器进行全双工通讯的网络技术
- 典型场景：实时性要求高，例如聊天室
- URL 使用ws://或wss://等开头
QUIC:Quick UDP Internet Connection
- 0-RTT建联（首次建联除外）。
- 类似TCP的可靠传输。
- 类似TLS的加密传输，支持完美前向安全。·用户空间的拥塞控制，最新的BBR算法。
- 支持h2的基于流的多路复用，但没有TCP的HOL问题。
- 前向纠错FEC。
- 类似MPTCP的Connection migration。
