HTTP实用指南2 ｜ 青训营笔记

学习前端中
48 阅读3分钟

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

一、本堂课重点内容：

讲述了HTTP协议分析、常见场景、实际应用等等。

二、详细知识点介绍：

HTTP/2概述

更快、更稳定、更简单

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

image.png

场景分析

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

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

cross-origin:scheme,host name,port

https默认端口号443，http默认端口号80

跨域

  • CORS ( Cross-Origin Resource Sharing )
  • 预请求:获知服务端是否允许该跨源请求(复杂请求)
  • 相关协议头
    • Access-Control-Allow-Origin
    • Access-Control-Expose-Headers
    • Access-Control-Max-Age
    • Access-Control-Allow-Credentials
    • Access-Control-Allow-Methods
    • Access-Control-Allow-Headers
    • Access-Control-Request-Method
    • Access-Control-Request-Headers
    • Origin

跨域解决方案

  • CORS
  • 代理服务器（webpack就有）
    • 同源策略是浏览器的安全策略，不是HTTP的
  • lframe
    • 诸多不便

下一次进入页面为什么能记住登陆态 鉴权

  • session+cookie
sequenceDiagram
Browser->>Server: POST/authenticate
Server->>Browser: HTTP 200 OK set cookie
Browser->>Server: GET/api/user cookie
Server->>Browser: HTTP 200 OK {name:"foo"}
  • jwt json web token
sequenceDiagram
Browser->>Server: POST/authenticate
Server->>Browser: HTTP 200 OK token
Browser->>Server: GET/api/user authorization
Server->>Browser: HTTP 200 OK {name:"foo"}

跳转自动登录

SSO单点登录

AJAX之XHR

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

AJAX之Fetch

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

node 标准库:HTTP/HTTPS

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

常用的请求库:axios

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

网络优化

graph LR
网络优化--> A(http2)
A-->优势
A-->兼容性
A-->简单实战
A-->http3
网络优化--> CDN动态加速
CDN动态加速-->缓存-->回源策略
缓存-->缓存刷新
缓存-->缓存预热
缓存-->缓存击穿
网络优化--> DNS预解析
网络优化--> 网络预连接
网络优化--> 域名
域名-->域名收敛
域名-->域名发散
网络优化--> 压缩
压缩-->gzip
压缩-->brotil
网络优化-->https性能优化

稳定性

graph LR
稳定性--> 缓存
稳定性--> 重试机制
重试机制-->超时
重试机制-->错误
稳定性--> 数据安全
数据安全-->HTTPS
数据安全-->劫持

了解更多

WebSocket

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

QUIC: Quick UDP Internet Connection

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