网络插座，网络工作人员和服务工作者之间的区别-css教程-PHP中文网

快速参考

WebSockets

更多 WebSockets 信息

Web Workers

更多 Web Workers 信息

Service Workers

更多 Service Workers 信息

总结

首页

web前端

css教程

网络插座，网络工作人员和服务工作者之间的区别

Christopher Nolan

Mar 10, 2025 am 11:49 AM

The Difference Between Web Sockets, Web Workers, and Service Workers

WebSockets、Web Workers、Service Workers……这些术语你可能在阅读或听闻中遇到过。也许不是全部，但至少其中一个。即使你对前端开发很熟悉，也很有可能需要查找它们的含义。或者你可能像我一样，有时会把它们混淆。这些术语看起来和听起来都非常相似，很容易混淆。

让我们一起分解它们，区分 WebSockets、Web Workers 和 Service Workers。不是深入细节，进行深入研究并亲身体验每一个——更像是一个小助手，以便下次需要复习时可以收藏。

快速参考

我们将从高级概述开始，进行快速比较和对比。

WebSockets

WebSocket 是一种双向通信协议。把它想象成你和朋友之间持续不断的通话，除非其中一方决定挂断，否则不会结束。唯一的区别是你就是浏览器，你的朋友是服务器。客户端向服务器发送请求，服务器通过处理客户端的请求做出响应，反之亦然。

通信基于事件。建立 WebSocket 对象并连接到服务器，服务器之间的消息会触发发送和接收它们的事件。

这意味着，当建立初始连接时，我们有一个客户端-服务器通信，其中连接被启动并保持活动状态，直到客户端或服务器选择通过发送 CloseEvent 来终止它。这使得 WebSockets 非常适合需要客户端和服务器之间持续且直接通信的应用程序。我见过的许多定义都将聊天应用程序列为常见用例——你键入消息，将其发送到服务器，触发事件，服务器在无需反复 ping 服务器的情况下使用数据进行响应。

考虑以下场景：你正在出门的路上，决定打开 Google 地图。你可能已经知道 Google 地图是如何工作的，但如果你不知道，它会在你连接到应用程序后自动找到你的位置，并在你走到哪里都跟踪它。它使用实时数据传输来跟踪你的位置，只要此连接处于活动状态。这是一个 WebSocket，在浏览器和服务器之间建立了持久性的双向对话，以保持数据的最新状态。具有实时得分的体育应用程序也可能以这种方式使用 WebSockets。

WebSockets 与 Web Workers（以及我们稍后将看到的 Service Workers）之间最大的区别在于它们可以直接访问 DOM。而 Web Workers（和 Service Workers）在单独的线程上运行，WebSockets 是主线程的一部分，这使得它们能够操作 DOM。

有一些工具和服务可以帮助建立和维护 WebSocket 连接，包括：SocketCluster、AsyncAPI、cowboy、WebSocket King、Channels 和 Gorilla WebSocket。MDN 有一个包含其他服务的运行列表。

Web Workers

考虑一种情况，你需要执行大量复杂的计算，同时还要更改 DOM。JavaScript 是一种单线程应用程序，运行多个脚本可能会破坏你试图更改的用户界面以及正在执行的复杂计算。

这就是 Web Workers 发挥作用的地方。

Web Workers 允许脚本在后台的单独线程中运行，以防止脚本在主线程上相互阻塞。这使得它们非常适合增强需要大量操作的应用程序的性能，因为这些操作可以在后台的单独线程上执行，而不会影响用户界面的呈现。但它们不太擅长访问 DOM，因为与 WebSockets 不同，Web Worker 在其自己的线程中主线程之外运行。

Web Worker 是一个对象，它通过使用 Worker 对象来执行脚本文件以执行任务。当我们谈论 worker 时，它们往往属于以下三种类型之一：

专用 Worker：专用 worker 只能由调用它的脚本访问。它仍然执行典型 Web worker 的任务，例如其多线程脚本。
共享 Worker：共享 worker 与专用 worker 相反。它可以被多个脚本访问，并且实际上可以执行 Web worker 执行的任何任务，只要它们存在于与 worker 相同的域中。
Service Workers：Service worker 充当应用程序、浏览器和服务器之间的网络代理，允许脚本即使在网络脱机时也能运行。我们将在下一节中介绍这一点。

Service Workers

有一些事情是我们作为开发人员无法控制的，其中一件事情是用户的网络连接。用户连接的任何网络都是它本身。我们只能尽最大努力优化我们的应用程序，以便它们在任何碰巧使用的连接上都能获得最佳性能。

Service Workers 是我们可以做的一些事情之一，以逐步增强应用程序的性能。Service worker 位于应用程序、浏览器和服务器之间，提供安全的后台运行的单独线程连接，这要归功于——你猜对了——Web Workers。正如我们在上一节中学到的那样，Service Workers 是三种 Web Workers 之一。

那么，你为什么需要一个位于你的应用程序和用户的浏览器之间的 service worker 呢？同样，我们无法控制用户的网络连接。假设连接由于某种未知原因而中断。这将中断浏览器和服务器之间的通信，阻止数据来回传递。Service worker 保持连接，充当能够拦截请求和执行任务的异步代理——即使在网络连接丢失后也是如此。

这就是通常所说的“离线优先”开发的主要驱动力。我们可以将资产存储在本地缓存中而不是网络中，如果用户离线，则提供关键信息，预取内容以便用户需要时可以使用，并提供对网络错误的回退。它们是完全异步的，但与 WebSockets 不同，它们无法访问 DOM，因为它们在自己的线程上运行。

关于 Service Workers 的另一件重要事情是它们会拦截来自你的应用程序的每个请求和响应。因此，它们有一些安全隐患，最值得注意的是它们遵循同源策略。因此，这意味着不能从 CDN 或第三方服务运行 service worker。它们还需要安全的 HTTPS 连接，这意味着你需要 SSL 证书才能运行它们。