HTTP实用指南 | 青训营笔记

白天也在划水
55 阅读4分钟

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

06 HTTP实用指南

6.1 初识HTTP

在浏览器地址栏输入字符串后到页面渲染发生了什么？

输入字符串 -> 浏览器识别并处理输入信息 -> 浏览器内核发起请求 -> 目标服务器响应请求 -> 渲染页面 -> 页面加载完成

其中网络请求相关的部分就会使用到应用层的HTTP协议(超文本传输协议)

image.png

  • 特点:

    • 应用层协议,基于TCP协议
    • 请求 响应
    • 简单可扩展
    • 无状态

6.2 协议分析

发展

image.png

HTTP/2
  • 更快、更稳定、更简单
  • 帧(frame)：HTTP/2通信的最小单位，每个帧都包含帧头，至少也会标识出当前帧所属的数据流。
  • 采用二进制
  • 消息：与逻辑请求或响应消息对应的完整的一系列帧
  • 数据流：已建立的连接内的双向字节流，可以承载一条或多条消息。
  • 帧可以交错发送，接收方重组织
  • HTTP/2连接是永久的，而且仅需要每个来源一个连接
  • 流控制：阻止发送反向接收方发送大量数据的机制
  • 服务器推送
HTTPS
  • 经过TSL/SSL加密
  • 对称加密：加密和解密都是使用同一个密钥
  • 非对称加密：加密和解密需要使用两个不同的密钥：公钥和私钥
报文

(以HTTP/1.1为例)

请求报文

image.png 第一行为Method,常见取值有:GET POST PUT DELETE HEAD CONNECT OPTIONS TRACE PATCH

某些方法是安全的(Safe)(不会修改服务器的数据的方法),如GET、HEAD、OPTIONS

某些方法是幂等的(Idempotent)(同样的请求被执行一次与连续执行多次的效果是一样的,服务器的状态也是一样的。所有safe的方法都是Idempotent的)，如GET、HEAD、OPTIONS、PUT、DELETE

image.png

常用请求头

image.png

缓存相关，浏览器缓存有两类：

  • 强缓存(资源若在本地存在则可以直接使用本地的已有资源)

    • Expires,时间戳

    • Cache-Control

      • 可缓存性

        • no-cache:协商缓存验证
        • no-store:不使用任何缓存

      • 到期

        • max-age:单位秒,存储的最大周期,相对于请求的时间

      • 重新验证*重新加载

        • must-revalidate:一旦资源过期,在成功向原始服务器验证之前不能使用

  • 协商缓存(需与server端协商验证是否可以使用本地缓存)

    • Etag/If-None-Match:资源的特定版本的标识符,类似于指纹
    • Last-Modified/If-Modified-Since:最后修改时间

使用缓存的流程:

image.png

响应报文

image.png

第一行为状态码，用于表示响应的结果。

状态码都是三位数字，规则如下：

image.png

常见的状态码有

image.png 304:缓存资源未修改

常用响应头：

image.png

Set-Cookie响应头

image.png

6.3 场景分析

静态资源

静态资源方案：缓存+CDN+文件名hash

  • CDN：Content Delivery Network
  • 通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务。
跨域

  • CORS(Cross-Origin Resource Sharing)

  • 预请求：获知该服务器是否允许该跨源请求

  • 跨域解决方案：

    • 代理服务器

      • 同源策略是浏览器的安全策略，不是HTTP的

    • Iframe（诸多不便）

6.4 实战

浏览器
  • 浏览器内置了XHR(XMLHttpRequest)
  • readyState取值不同 表示请求的四个不同阶段

image.png

  • Fetch方法

    • XHR的升级版
    • 使用Promise解决回调地狱
    • 模块化设计，Response,Request,Header对象
    • 通过数据流处理对象，支持分块读取
node

  • 标准库HTTP/HTTPS

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

  • 常用的请求库axios

    • 支持浏览器、nodejs环境
    • 丰富的拦截器
用户体验
网络优化

image.png

  • CDN开启H2
  • 预解析、预连接等
稳定性

image.png

  • 重试是保证稳定的有效手段，但要防止加剧恶劣情况
  • 缓存合理使用，作为最后一道防线

6.5 扩展

WebSocket
  • 浏览器与服务器进行全双工通讯的网络技术
  • 典型场景：实时性要求高，如聊天室
  • URL使用ws://或wss://等开头
QUIC
  • Quick UDP Internet Connection
  • 0-RTT建联（首次建联除外）
  • 类似TCP的可靠传输
  • 类似TLS的加密传输，支持完美前向安全
  • 用户空间的拥塞控制，最新的BBR算法。
  • ......
avatar
文章
阅读
粉丝