HTTP追加协议
← 返回 MOC | ← 主页 | ← 返回HTTP万维网
HTTP 本身很简单,特点是 请求一次,响应一次。但 Web 发展以后,页面里不只是文字,还有聊天、推送、实时刷新、大量资源并发加载,这时单纯的 HTTP/1.1 效率就不够了。
所以后来围绕 HTTP 出现了很多“追加方案”或“改进方案”,这里先抓 3 个最常见的:WebSocket、SPDY、AJAX。
WebSocket
为什么需要它
HTTP 最大的问题是:服务器不能主动推数据。 如果浏览器想知道有没有新消息,只能不停地发 HTTP 请求去问,这样很浪费。
它的设计思路
WebSocket 的思路是:先借助 HTTP 建立连接,再升级成一条长期保持的全双工通信通道。
大致过程:
- 浏览器先发一个 HTTP 请求
- 请求头里带
Upgrade: websocket - 服务器同意后,连接从 HTTP 升级为 WebSocket
- 后面双方都可以主动发消息,不再是“一问一答”
它解决了什么
- 可以双向通信
- 可以长连接
- 减少频繁轮询带来的开销
典型场景
- 聊天室
- 实时消息推送
- 在线游戏
- 实时监控页面
SPDY
为什么需要它
HTTP/1.1 虽然支持持久连接,但一个页面资源很多时,还是会有明显性能问题:
- 请求很多,建立和调度成本高
- 同一连接里容易队头阻塞
- 请求头经常重复发送,浪费带宽
它的设计思路
SPDY 是 Google 提出的一个 HTTP 优化方案,目标就是让网页加载更快。它的核心设计可以记 3 点:
- 多路复用 一个 TCP 连接里同时传多个请求和响应,不用每个资源单独排队。
- 首部压缩 很多 HTTP 首部反复出现,SPDY 会压缩它们,减少冗余数据。
- 服务器推送 服务器可以主动把客户端接下来大概率会用到的资源一起推过来。
它的意义
SPDY 本身后来没有继续成为主流标准,但它的很多设计思想被 HTTP/2 继承了。 所以可以把 SPDY 理解成:HTTP/2 的重要前身。
AJAX
先说明一点
AJAX 严格来说不是一个新协议,它本质上是一种 基于 HTTP 的异步通信方式。
AJAX 全称是 Asynchronous JavaScript and XML,意思是浏览器可以通过 JavaScript 在不刷新整个页面的情况下,向服务器发送请求并局部更新页面内容。
为什么需要它
早期网页只要想更新内容,通常就得整页刷新,体验很差。
AJAX 的目标就是:
- 后台偷偷发请求
- 收到数据后只更新页面的一部分
- 用户感觉页面更流畅
它的设计思路
浏览器里的 JavaScript 通过 XMLHttpRequest,后来也常用 fetch:
- 向服务器发 HTTP 请求
- 服务器返回数据
- JavaScript 拿到数据后修改页面局部内容
典型场景
- 搜索联想
- 表单异步提交
- 局部刷新列表
- 点赞、评论、加载更多
三者的区别
| 名称 | 本质 | 主要目标 | 特点 |
|---|---|---|---|
| WebSocket | 协议 | 实现双向实时通信 | 长连接、服务器可主动推送 |
| SPDY | HTTP 优化方案 | 提高网页加载效率 | 多路复用、首部压缩、服务器推送 |
| AJAX | 开发方式 | 页面局部异步更新 | 不刷新整页,底层仍然用 HTTP |
如果你正在跟随梳理, 返回 MOC←