HTTP追加协议

← 返回 MOC | ← 主页 | ← 返回HTTP万维网


HTTP 本身很简单,特点是 请求一次,响应一次。但 Web 发展以后,页面里不只是文字,还有聊天、推送、实时刷新、大量资源并发加载,这时单纯的 HTTP/1.1 效率就不够了。

所以后来围绕 HTTP 出现了很多“追加方案”或“改进方案”,这里先抓 3 个最常见的:WebSocket、SPDY、AJAX

WebSocket

为什么需要它

HTTP 最大的问题是:服务器不能主动推数据。 如果浏览器想知道有没有新消息,只能不停地发 HTTP 请求去问,这样很浪费。

它的设计思路

WebSocket 的思路是:先借助 HTTP 建立连接,再升级成一条长期保持的全双工通信通道

大致过程:

  1. 浏览器先发一个 HTTP 请求
  2. 请求头里带 Upgrade: websocket
  3. 服务器同意后,连接从 HTTP 升级为 WebSocket
  4. 后面双方都可以主动发消息,不再是“一问一答”

它解决了什么

  • 可以双向通信
  • 可以长连接
  • 减少频繁轮询带来的开销

典型场景

  • 聊天室
  • 实时消息推送
  • 在线游戏
  • 实时监控页面

SPDY

为什么需要它

HTTP/1.1 虽然支持持久连接,但一个页面资源很多时,还是会有明显性能问题:

  • 请求很多,建立和调度成本高
  • 同一连接里容易队头阻塞
  • 请求头经常重复发送,浪费带宽

它的设计思路

SPDY 是 Google 提出的一个 HTTP 优化方案,目标就是让网页加载更快。它的核心设计可以记 3 点:

  1. 多路复用 一个 TCP 连接里同时传多个请求和响应,不用每个资源单独排队。
  2. 首部压缩 很多 HTTP 首部反复出现,SPDY 会压缩它们,减少冗余数据。
  3. 服务器推送 服务器可以主动把客户端接下来大概率会用到的资源一起推过来。

它的意义

SPDY 本身后来没有继续成为主流标准,但它的很多设计思想被 HTTP/2 继承了。 所以可以把 SPDY 理解成:HTTP/2 的重要前身

AJAX

先说明一点

AJAX 严格来说不是一个新协议,它本质上是一种 基于 HTTP 的异步通信方式

AJAX 全称是 Asynchronous JavaScript and XML,意思是浏览器可以通过 JavaScript 在不刷新整个页面的情况下,向服务器发送请求并局部更新页面内容。

为什么需要它

早期网页只要想更新内容,通常就得整页刷新,体验很差。

AJAX 的目标就是:

  • 后台偷偷发请求
  • 收到数据后只更新页面的一部分
  • 用户感觉页面更流畅

它的设计思路

浏览器里的 JavaScript 通过 XMLHttpRequest,后来也常用 fetch

  1. 向服务器发 HTTP 请求
  2. 服务器返回数据
  3. JavaScript 拿到数据后修改页面局部内容

典型场景

  • 搜索联想
  • 表单异步提交
  • 局部刷新列表
  • 点赞、评论、加载更多

三者的区别

名称本质主要目标特点
WebSocket协议实现双向实时通信长连接、服务器可主动推送
SPDYHTTP 优化方案提高网页加载效率多路复用、首部压缩、服务器推送
AJAX开发方式页面局部异步更新不刷新整页,底层仍然用 HTTP

如果你正在跟随梳理, 返回 MOC←