[Node.js 与前端开发实战 | 青训营笔记]

69 阅读2分钟

这是我参与「第五届青训营 」笔记创作活动的第10天。活动详情:# 伴学笔记创作活动来袭 | 第五届字节跳动青训营

HTTP 协议实战分析

在对 HTTP 协议的定义及使用场景解析的讲解完成后,本节课将根据不同的环境,介绍在日常的开发中,同学如何实现去发起一个协议,将重点带来浏览器环境的应用实战,进一步基于不同环境下,如何做到网络优化,提升用户体验。


  1. HTTP 协议实战 - 浏览器

AJAX之XHR:对象:XMLHttpRequest 发起请求

方法:readyState

取值为0~4:

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

AJAX之Fetch:发起请求

  • 使用Promise 模块化设计
  • Response,Request,Header对象

  1. HTTP 协议实战 - Node篇

标准库:HTTP/HTTPS

  • 默认模块 功能有限

常用请求库:axios

  • 支持浏览器,Node.js环境

  1. 网络优化手段

网络优化:预解析,预连接

稳定性:

  • 重试机制:重试是保证稳定的有效手段
  • 缓存:缓存合理使用,作为最后一道防线
  • 数据安全

  1. HTTP 协议拓展 - 通信方式

通信方式:

  • WebSocket 浏览器与服务器进行全双工通讯的网络技术
  • 典型场景:实时性要求高
  • URL协议头:ws:// 或 wss://

QUIC: Quick UDP Internet Connection

特点

  • 0-RTT建联(首次建联除外)
  • 类似TCP的可靠传输
  • 类似TLS的加密传输,支持完美前向安全
  • 用户空间的拥塞控制,最新的BBR算法
  • 支持h2的基于流的多路复用,没有TCP的HOL(Head of line blocking)问题
  • 前向纠错FEC
  • 类似MPTCP的Connection migration