区分Web Socket、Web Worker和Service Worker

Web Socket

Web Socket是基于TCP的一个全双工通信协议，HTML5的新特性。
先了解一下之前通信协议弊端。以前，在客户端和浏览器之间通信时，只能是客户端发请求之后，服务器才有所应答。如果服务器有新数据的话，不能够主动地发送给客户端，只能是客户端进行：

• 轮询：客户端不断发新请求给服务器，服务器应答一次之后就断开连接，这就需要不断发起新请求，新连接，造成资源的浪费
• 长轮询：客户端发送请求后，就挂在那里，等到服务器有新数据之后，返回新数据，连接关闭。弊端在于服务器需要hold住连接，造成资源浪费，并且客户端收到资源后需要发送新请求。

而Web Socket的好处就是在于服务器可以主动发送资源给客户端，而且只需要一次连接就会是持久连接（这样资源消耗就会少一些）。有了Web Socket连接，服务器可以源源不断地发送数据给客户端，且不需要每次发数据都进行验证连接信息。具体的实现方法为：

1.客户端在首次发送请求时需要这么写报文：

GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Protocol: chat, superchat
Host: example.com
Origin: http://example.com
Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
Sec-WebSocket-Version: 13

重点在于需要添加上面的粗体内容，Upgrade告诉服务器你想要创建一个websocket连接，然后Sec-WebSocket-Key中的一串字符串会发送到服务器端，服务器接收到之后，如果它支持WebSocket连接，那么它就会对其加上特殊字符串之后，进行编码，放入Sec-WebSocket-Accept中返回，代表自己是支持Web Socket的。而Sec-WebSocket-Protocol代表客户端希望采用的Web Socket协议，Sec-WebSocket-Version代表客户端采用的Web Socket版本号。

2.服务器端返回的报文如下：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection:Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat
Sec-WebSocket-Location: ws://example.com/

这里需要注意的是Sec-WebSocket-Location，Web Socket连接创建之后，双方的通信URL不再是用http或者https开头，而是要用ws开头代表是Web Socket。

---

Web Worker

众所周知，JavaScript是单线程的，但是碰到一些计算密集型或者高延迟的任务时，会影响整个页面的运行。Web Worker就是在这个环境下诞生的，它也是HTML5的新特性之一。

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。
Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。
引用自阮一峰老师的文章《Web Worker 使用教程》

Service Worker

Service Worker实际上是浏览器和服务器之间的代理服务器，它最大的特点是在页面中注册并安装成功后，运行于浏览器后台，不受页面刷新的影响，可以监听和截拦作用域范围内所有页面的 HTTP 请求。
Service Worker的目的在于离线缓存，转发请求和网络代理。它有自己的生命周期

• 安装（installing）
  在浏览器加载运用了Service Worker的页面时，Service Worker的JS文件也会被下载下来，然后运行安装，下载相应缓存。安装完之后，就会激活Service Worker（Activated）

• 激活（Activated）
  激活Service Worker之后，Service Worker开始控制页面后台，当你刷新页面或者发送新请求的时候，Service Worker会对请求进行拦截，然后进行相应的操作（一般是看是否命中缓存，如果命中，就直接返回缓存，不需要再发送请求）

Service Worker在浏览器运行的时候，每隔一段时间，它会在后台尝试重新下载Service Worker的JS文件，只要新的JS文件和旧的有一点不相同，那么就会重新安装-激活。BTW，Service Worker也是Web Work的一种。