Web Sockets、Web Workers、Service Workers……这些术语您可能已经阅读或无意中听到。 也许不是全部，但可能至少其中之一。 即使您对前端开发有很好的了解，您也很有可能需要查找它们的含义。 或者，也许你像我一样，时不时地把它们混在一起。 这些术语看起来和听起来都非常相似，很容易让它们混淆。
那么，让我们将它们分解在一起，区分 Web Sockets、Web Workers 和 Service Worker。 不是从本质上讲，我们进行深入研究并获得每个人的实践经验——更像是下次书签的小帮手 I 你需要复习一下。
快速参考
我们将从高级概述开始，以便进行快速比较和对比。
| 专栏 | 它是什么 |
|---|---|
| 网络套接字 | 在浏览器和服务器之间建立开放且持久的双向连接，以通过事件触发的单个连接发送和接收消息。 |
| 网络工作者 | 允许脚本在单独的线程中在后台运行，以防止脚本在主线程上相互阻塞。 |
| 服务人员 | 一种 Web Worker，它创建一个后台服务，该服务充当中间件，用于处理浏览器和服务器之间的网络请求，即使在离线情况下也是如此。 |
网络套接字
Web Socket 是一种双向通信协议。 把这想象成你和你的朋友之间正在进行的通话，除非你们中的一个人决定挂断，否则它不会结束。 唯一的区别是你是浏览器，你的朋友是服务器。 客户端向服务器发送请求，服务器通过处理客户端的请求进行响应，反之亦然。
通信基于事件。 一个 WebSocket 对象建立并连接到服务器，服务器之间的消息触发发送和接收它们的事件。
这意味着当建立初始连接时，我们有一个客户端-服务器通信，其中一个连接被启动并保持活动状态，直到客户端或服务器选择通过发送一个来终止它 CloseEvent. 这使得 Web Sockets 非常适合需要在客户端和服务器之间进行连续和直接通信的应用程序。 我见过的大多数定义都将聊天应用程序称为常见用例——您键入一条消息，将其发送到服务器，触发一个事件，然后服务器用数据进行响应，而无需一遍又一遍地 ping 服务器。
考虑这个场景：您即将离开并决定打开 Google 地图。 您可能已经知道 Google 地图的工作原理，但如果您不知道，它会在您连接到应用程序后自动找到您的位置，并随时随地跟踪它。 只要此连接处于活动状态，它就会使用实时数据传输来跟踪您的位置。 这是一个 Web Socket，它在浏览器和服务器之间建立持久的双向对话，以使数据保持最新。 具有实时比分的体育应用程序也可以通过这种方式使用 Web Sockets。
Web Sockets 和 Web Worker（以及我们将看到的 Service Worker）之间的最大区别在于它们可以直接访问 DOM。 Web Worker（和 Service Worker）在不同的线程上运行，而 Web Sockets 是主线程的一部分，这使它们能够操作 DOM。
有一些工具和服务可以帮助建立和维护 Web Socket 连接，包括： 套接字集群, 异步API, 牛仔, WebSocket 王, 通道及 大猩猩 WebSocket. MDN 有一个 包含其他服务的运行列表.
更多 Web 套接字信息
网络工作者
考虑一个场景，您需要执行一堆复杂的计算，同时对 DOM 进行更改。 JavaScript 是一种单线程应用程序，运行多个脚本可能会破坏您尝试更改的用户界面以及正在执行的复杂计算。
这就是 Web Workers 发挥作用的地方。
Web Worker 允许脚本在不同线程的后台运行，以防止脚本在主线程上相互阻塞。 这使得它们非常适合提高需要密集操作的应用程序的性能，因为这些操作可以在后台在单独的线程上执行，而不会影响用户界面的渲染。 但是它们在访问 DOM 方面并不是那么出色，因为与 Web Sockets 不同的是，Web Worker 在其自己的线程中运行在主线程之外。
Web Worker 是一个对象，它通过使用 Worker 反对执行任务。 当我们谈论工人时，他们往往属于以下三种类型之一：
- 敬业的工人： 只有调用它的脚本才能接触到专门的工作人员。 它仍然执行典型 Web Worker 的任务，例如它的多线程脚本。
- 共享工作者： 共享工作者与专用工作者相反。 它可以被多个脚本访问，并且实际上可以执行 web worker 执行的任何任务，只要它们与 worker 存在于同一个域中。
- 服务人员： Service Worker 充当应用程序、浏览器和服务器之间的网络代理，即使在网络离线时也允许脚本运行。 我们将在下一节讨论这个问题。
更多网络工作者信息
服务工作者
作为开发人员，有些事情我们无法控制，其中之一就是用户的网络连接。 无论用户连接到什么网络，它就是什么。 我们只能尽最大努力优化我们的应用程序，以便它们在碰巧使用的任何连接上都能发挥最佳性能。
Service Worker 是我们可以做的事情之一，以逐步提高应用程序的性能。 服务工作者位于应用程序、浏览器和服务器之间，提供在后台运行在单独线程上的安全连接，这要归功于——你猜对了——Web Workers。 正如我们在上一节中了解到的，Service Worker 是三种类型的 Web Worker 之一。
那么，为什么你需要一个服务人员坐在你的应用程序和用户的浏览器之间呢？ 同样，我们无法控制用户的网络连接。 假设连接由于某种未知原因而中断。 这会破坏浏览器和服务器之间的通信，阻止数据来回传递。 服务工作者维护连接，充当能够拦截请求和执行任务的异步代理——即使在网络连接丢失之后也是如此。
这是通常被称为 “线下优先”开发. 我们可以将资产存储在本地缓存而不是网络中，在用户离线时提供关键信息，预取内容以便在用户需要时准备好，并提供回退以响应网络错误。 它们是完全异步的，但与 Web Socket 不同，它们无法访问 DOM，因为它们在自己的线程上运行。
关于 Service Workers 要了解的另一件大事是它们拦截来自您的应用程序的每一个请求和响应。 因此，它们具有一些安全隐患，最值得注意的是它们遵循同源策略。 因此，这意味着没有从 CDN 或第三方服务运行服务工作者。 它们还需要安全的 HTTPS 连接，这意味着您需要 SSL 证书才能运行它们。
更多服务工作者信息
结束了
这是对 Web Sockets、Web Worker 和 Service Worker 之间差异（和相似之处）的超高级解释。 同样，术语和概念非常相似，可以将它们混为一谈，但希望这能让您更好地了解如何区分它们。
我们从一个快速参考表开始。 这是同样的事情，但稍微扩大以进行更深入的比较。
| 专栏 | 它是什么 | 多线程？ | HTTPS？ | DOM 访问？ |
|---|---|---|---|---|
| 网络套接字 | 在浏览器和服务器之间建立开放且持久的双向连接，以通过事件触发的单个连接发送和接收消息。 | 在主线程上运行 | 不需要 | Yes |
| 网络工作者 | 允许脚本在单独的线程中在后台运行，以防止脚本在主线程上相互阻塞。 | 在单独的线程上运行 | 其他要求 | 没有 |
| 服务人员 | 一种 Web Worker，它创建一个后台服务，该服务充当中间件，用于处理浏览器和服务器之间的网络请求，即使在离线情况下也是如此。 | 在单独的线程上运行 | 其他要求 | 没有 |
