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

Lecture5.1 初识 HTTP 协议

引入：从输入地址到浏览器显示页面发生了什么？

• 用户输入地址
• browser进程处理输入信息
• 浏览器内核发起请求
• 服务器收到请求，发送响应
• 浏览器内核接收响应，渲染页面

什么是HTTP

• HTTP属于计算机网络的应用层
• 基于TCP协议
• 一般分为请求和响应两部分
• 简单可扩展
• 无状态协议，协议之间相互独立

HTTP协议的发展

结构分析，以HTTP/1.1为例

• 起始行
  • Method：GET获取资源，POST提交数据，OPTIONS通信选项
  • 对于methods，“安全的”表明不会修改服务器数据，“幂等的”表明单次执行和多次执行结果一样
  • 状态码：1xx继续处理；2xx成功；3xx重定向；4xx客户端错误；5xx服务器端错误
  • RESTful API：一种API设计风格，每个URI代表一种资源，客户端与服务器之间传递这种资源的某种表现层，客户端通过HTTP method操作服务器端资源
• header
  • 请求头
    • accept：接收类型
    • content-type：实体内容类型
    • cache-control：缓存机制
    • expires：使用缓存的时间
    • max-age：资源在本地缓存的时间
    • cookie：如有且同域，自动带上
    • referer：页面来源URL
    • origin：最初的请求的发起者
    • user-agent：客户端信息
  • 响应头
    • accept：服务器返回的数据类型
    • cache-control：缓存机制
    • last-modified：请求资源的最后修改时间
    • set-cookie：设置cookie
    • server：服务器信息
    • access-control-allow-origin：服务器允许的请求origin头
  • 关于缓存
    • 强缓存（如果有，就用）和协商缓存（需要通信验证）
    • 强缓存：需要使用时间expires max-age，确认可缓存性，重新加载策略
    • 协商缓存：需要资源指纹etag，最后修改时间
  • 关于cookie
    • expires：有效期
    • secure：https才能发送cookie
    • httponly：js脚本无法获取cookie
    • samesite：none同站跨站都可以，strict只有同站可以
• 一个空行，用来分隔的
• body

HTTP/2概述

帧frame

• 通信的最小单位
• 会采用压缩，传输更快

消息

• 逻辑上完成请求或消息的一系列帧
• 不是真实存在

数据流

• 连接内的双向字节流
• 可以对帧进行交错发送，提升效率

复用性

• 目标地址一旦确定，就只需要每个来源一个连接
• 无需重复连接

流控制

• 阻止发送方向接收方发送大量数据
• 节约带宽，实现网络的更高效使用

HTTPS概述

• 通过TSL/SSL加密，提升安全性
• 对称加密：密钥相同
• 非对称加密：密钥不同
• HTTPS使用的是对称加密和非对称加密混用的形式

Lecture5.2 HTTP 协议的应用场景分析

静态资源css为例

• 200状态码可以是发了请求，也可能是本地缓存获取的
• cache-control设置了一年，也就是一年之内都使用缓存
• 从本地缓存读取，速度尽可能快
• CDN方法：离用户最近的边缘节点先被扫描，这样传输速度也快
• 如果需要修改文件内容，一般都修改文件名，这样更新时就会被用户重新加载

表单登录

• 两个请求，一个是OPTIONS，一个是POST
• OPTIONS请求是因为跨域（域名不同/端口不同/子域名不同/协议不同）
  • CORS跨域资源共享：先发一个OPTIONS预请求，获取服务端是否允许跨域
  • 代理服务器解决跨域：部署同域下的代理服务器，浏览器请求就没有问题
  • iframe通信：限制比较多
• POST请求传输数据
  • 记住登录信息的原因：鉴权机制
  • session + cookie：session存服务端，cookie存客户端
  • jwt(json web token)：客户端将token传去服务器校验
• 关于跳转域名后登录状态仍然有效的现象
  • SSO：单点登录，处理登录在SSO服务器进行，处理结束后返回跳转信息。查询登录的时候，如果此域名下没有，就查询SSO服务器

Lecture5.3 HTTP 协议实战分析

浏览器

XHR

• 先构造请求，然后创建xhr对象
• 设置其readyState回调函数
• 关于readyState
  • 0：unsent
  • 1：opened
  • 2：已收到头部
  • 3：下载中
  • 4：done

fetch

• XML升级版
• 可以使用Promise
• 模块化设计
• 通过数据流处理，支持分块读取

node

HTTP/HTTPS

• 默认模块
• 功能有限

axios

• 请求封装库
• 可以识别环境，选择请求
• 拥有许多api

用户体验

网络优化

• http2
• CDN动态加速
• DNS预解析
• 网络预连接
• 域名收敛/发散策略
• 压缩
• https性能优化

稳定性

• 重试机制：没有响应/出错，可以考虑重试，但是小心server雪崩
• 缓存机制
• 数据安全：HTTP劫持（被插入其它代码）

拓展了解

websocket

• 浏览器和服务器全双工通信
• 实时性很高，适合于聊天等情景
• 使用ws://或wss://开头

QUIC：快速UDP连接

• 实现类似TCP的可靠传输，类似TLS的加密传输
• 效率更高