HTTP快速入门速记(HTTP协议)｜ 青训营笔记

wandam
56 阅读4分钟

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

初识

当你在地址栏中输入了字符串，浏览器发生了什么？

  1. 浏览器工作原理(发生先后顺序见节后编号)

    1. 浏览器进程

      • 处理输入信息 (1.)
      • 页面加载完成 (6.)

    2. 浏览器内核

      • 发起请求 (2.)
      • 读取相应 (4.)
      • 渲染 (5.)

    3. 因特网 (3.)

  2. OSI七层协议栈或TCP/IP四层模型

    1. HTTP1.1版本的POST请求报文和回复报文
    2. HTTP是一种无状态协议，请求之间孤立， 每次请求之间孤立，也就是每次请求都可以看成第一次请求

  3. HTTP协议发展历程

    1. HTTP /0.9 -> 单行协议

      1. 请求只有GET/mypage.html
      2. 相应只有HTML文件

    2. HTTP /1.0 -> 构建可扩展性

      1. 增加了Header
      2. 有了相应中的状态码
      3. 支持多种文档类型

    3. HTTP /1.1 -> 标准化协议 （目前使用最久的版本）

      1. 链接服用
      2. 缓存
      3. 内容协商

    4. HTTP /2 -> 更优异的表现 (目前)

      1. 二进制协议
      2. 压缩Header
      3. 服务器推送

    5. HTTP /3

      1. (增加安全性考量)

协议分析

  1. HTTP报文

  2. 由HTTP报文引入的RESTful API介绍

  3. 常用请求头

  4. 两类缓存(强缓存 & 协商缓存)

    • 强缓存可以使得用户获取内容更快，与下文静态资源方案中的文件名hash有关

    • cookie(所以缓存和cookie有什么区别？)

  5. 重点介绍了HTTP/2

  6. HTTP /2 中的最小通信单位为帧(frame) ，每个帧中会包含一个帧头，也会标识出当前帧所属的数据流

    • PPT中对比了1.x版本和2版本在传输上的格式差异，主要是采用了二进制编码

      35:18 这个时刻的PPT尤为重要，很多介绍HTTP的文档并不会严格或显式区分帧和消息的区别！

最后简略介绍了HTTPS

常见场景

  1. 静态资源(以今日头条官方C站为例子)

    1. 静态资源方案: 缓存 + CDN + 文件名(hash)
      • CDN 全称为 Content Delivery Network 内容分发网络
      • 通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户请求提供服务
      • 文件名hash可以使得在使用强缓存时仍能获取到最新的页面 (这会不会导致本地缓存占存储比越来越高？ )

  2. 登录(表单登录&扫码登陆)

    1. 表单登录

      1. 跨域问题(OPTIONS请求) -> 俗称的“cross-origin”

        1. 什么是跨域，域的组成部分有哪些

          1. Origin = Scheme + Host name + Port
          2. “Same-origin”必须要求满足Shame、subdomains(一般在Host name字段中可以看出来)、Port相同，或者一方无Port

        2. HTTP中CORS的相关预请求(这里OPTIONS方法报文就是预请求)

        3. HTTP的跨域解决方案 (需要解决跨域问题是因为浏览器的一种安全策略同源策略)

          1. CORS
          2. 代理服务器(常用方案)
          3. Iframe(不推荐)

        4. 浏览器的同源策略

        5. 为什么登录刷新页面后还能记录登录状态？

          1. 鉴权

            1. Session + cookie (比较常用)
            2. JSON Web Token (通过邮箱找回密码时候的链接经常使用本方式)

          2. 登录跳转后为什么能自动登录

            1. 单点登录(SSO)

实际应用

  1. 浏览器/Node.js

    1. XMLHttpRequest

    2. XHR升级版 -> fetch API

      1. 模块化设计
      2. 支持分块读取

    3. Node.js中有HTTP/HTTPS标准库

      1. 缺点是功能有限不是十分友好

  2. 常用库

    1. axios

      1. 引出网络优化问题以及PPT中展示了常用网络优化思路

了解更多(其他协议)

  1. WebSocket

    1. 浏览器与服务器全双工通信的网络技术
    2. 经典场景：实时性要求高的聊天室
    3. URL中的Scheme字段使用ws://或wss://等开头

  2. UDP升级版QUIC(Quick UDP Internet Connection)

    1. 还在研究阶段，大规模应用还存有问题

一个小问题

我挺想找到讲授人制作PPT的原文博客，重新读一下博客的内容，当一次《哈姆雷特》的读者。
avatar
文章
阅读
粉丝