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

01-初识HTTP

当输入网址，到渲染出网页发生了什么

什么是HTTP

• Hyper Text Transfer Protocol
• 应用层协议，基于TCP协议
• 请求 相应
• 简单可扩展
• 无状态

02-协议分析

发展

• HTTP/0.9 单行协议

  • 请求GET/mypage.html
  • 响应只有HTML文档

• HTTP/1.0 构建可扩展行

  • 增加了Header
  • 有了状态码
  • 支持多种文档类型
  • .......

• HTTP/1.1 标准化协议

  • 链接复用
  • 缓存
  • 内容协商
  • ......

• HTTP/2 更优异的表现

  • 二进制协议
  • 压缩header
  • 服务器推送
  • .....

• HTTP/3 草案

HTTP/1.1

Method

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

状态码

• 200 OK - 客户端请求成功
• 301 - 资源（网页等）被永久转移到其他URL
• 302 - 临时跳转
• 401 Unauthorized - 请求未经授权
• 404 - 请求资源不存在，可能是输入了错误的URL
• 500 - 服务器内部发生了不可预期的错误
• 504 Gateway Timeout-网关或者代理的服务器无法在规定的时间内获得想要的相应。

RESTful API

RESTful API： 一种API设计风格；

03-场景分析

• 静态资源方案：缓存 + CDN + 文件名hash
  • CDN：Content Delivery Network
  • 通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务
• 跨域
  • CORS（Cross-Origin Resource Sharing） 预请求：获知服务端是否允许该跨域请求（复杂请求）
  • 代理服务器
    • 同源策略是浏览器的安全策略，不是HTTP的
  • Iframe

04-实战

AJAX之XHR

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

AJAX之Fetch

• XMLHttpRequest 的升级版
• 使用Promise
• 模块化设计，Response，Request， Header对象
• 通过数据流处理对象，支持分块读取

node篇

标准库：HTTP/HTTPS

• 默认模块，无需安装其他依赖
• 功能有限/十分不友好

常用的请求库：axios

• 支持浏览器、nodejs环境
• 丰富的拦截器

用户体验

• 网络优化
  • CDN是否开启H2的性能对比
  • 预解析、预连接
• 稳定性
  • 重试机制
    • 超时
    • 错误
  • 缓存
  • 数据安全
    • HTTPS
    • 劫持

05 - 了解更多

通信方式

• WebSocket
• QUIC：Quick UDP Internet Connection

总结

今天的HTTP使用指南学到很多新知识，这个笔记有很多没有填进去，今天依旧是匆忙的一天，希望明天能把之前的都补一补，加油啊！！！不能再拖了，这已经是第四天了！