HTTP实用指南（下）|青训营笔记

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

场景分析

静态资源，登陆。

静态资源

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

CDN：Content Delivery Network

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

登陆

业务场景：

• 表单登陆
• 扫码登陆

技术方式：

• SSO

跨域解决方案：

• CORS
• 代理服务器
  • 同源策略时浏览器的安全策略，不是HTTP的。
• Iframe
  • 诸多不便

实战

浏览器与node中使用。

AJAX

XHR

XHR：XMLHttpRequest

• readyState

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

Fetch

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

node

标准库：HTTP/HTTPS

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

常用的请求库：axios

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

用户体验

网络优化

• http2
  • 优势
    • Binary Format
    • multiplexed
    • Server Push
    • header optimize
  • 兼容性
  • 简单实践
  • http3
• CDN动态加速
  • 适用场景
  • 缓存
    • 回源策略
    • 缓存刷新
    • 缓存预热
    • 缓存击穿
  • 实践
• DNS预解析
• 网络预连接
• 域名
  • 域名收敛
  • 域名发散
• 压缩
  • gzip
  • brotil
• https性能优化

稳定性

• 重试机制
  • 超时
  • 错误
• 缓存
• 数据安全
  • HTTPS
  • 劫持

重试时保证稳定的有效手段，但要防止加剧恶劣情况。

缓存合理使用，作为最后一道防线。

了解更多

不止HTTP协议一个选择。

WebSocket

• 浏览器与服务器进行全双工通讯的网络技术
• 典型场景：实时性要求高，例如聊天室
• URL使用ws://或wss://等开头

QUIC：Quick UDP Internet Connection

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