WebWorker SharedWorker ServiceWorker

 

Worker Debug页 chrome://inspect/#workers

 

 

HTML5中 Web Worker

Web Worker 的三大主要特征：能够长时间运行（响应），理想的启动性能以及理想的内存消耗。

 

它允许在 Web 程序中并发执行多个 JavaScript 脚本，每个脚本执行流都称为一个线程，彼此间互相独立，并且有浏览器中的 JavaScript 引擎负责管理。这将使得线程级别的消息通信成为现实。使得在 Web 页面中进行多线程编程成为可能。

 

两种  一个是专用线程 Dedicated Worker(普通的Worker)，一个是共享 Shared Worker。

专用 Web Worker (Dedicated Web Worker) 提供了一个简单的方法使得 web 内容能够在后台运行脚本。一旦 worker 创建后，它可以向由它的创建者指定的事件监听函数传递消息，这样该 worker 生成的所有任务就都会接收到这些消息。

worker 线程能够在不干扰 UI 的情况下执行任务。另外，它还能够使用 XMLHttpRequest (虽然 responseXML 与 channel 两个属性值始终是 null)来执行 I/O 操作

生成 worker
创建一个新的 worker 十分简单。你所要做的就是调用 Worker() 构造函数，指定一个要在 worker 线程内运行的脚本的 URI，如果你希望能够收到 worker 的通知，可以将 worker 的 onmessage 属性设置成一个特定的事件处理函数。

var myWorker = new Worker("my_task.js");
myWorker.onmessage = function (oEvent) {
console.log("Called back by the worker!\n");
};
或者，你也可以使用 addEventListener()：

var myWorker = new Worker("my_task.js");
myWorker.addEventListener("message", function (oEvent) {
console.log("Called back by the worker!\n");
}, false);

myWorker.postMessage(""); // start the worker.

注意： 通常来说，后台线程 – 包括 worker – 无法操作 DOM。 如果后台线程需要修改 DOM，那么它应该将消息发送给它的创建者，让创建者来完成这些操作。

 

SharedWorker ===================================

The SharedWorker interface represents a specific kind of worker that can be accessed from several browsing contexts, such as several windows, iframes or even workers. They implement an interface different than dedicated workers and have a different global scope,

 

If SharedWorker can be accessed from several browsing contexts, all those browsing contexts must share the exact same origin (same protocol, host and port).

 

 

Service Worker =========================================

A Service Worker inherits all the limitations and behaviors available to HTML5 Shared Workers. It can create XMLHttpRequests, use WebSockets, receive messages from windows and the browser, use IndexedDB, and post messages to other windows.

 

Service workers are expected to provide a function at global scope, named onconnect. The browser will invoke onconnect at startup time, passing in an event. The worker should access the ports property of this event to extract a stable communication port back to the browser, and persist it for the life of the worker,

 

 

The ServiceWorker is like a SharedWorker in that it:

Runs in its own global script context (usually in its own thread)
Isn‘t tied to a particular page
Has no DOM access
Unlike a SharedWorker, it:

Can run without any page at all
Can terminate when it isn‘t in use, and run again when needed (e.g., it‘s event-driven)
Has a defined upgrade model
Is HTTPS only (more on that in a bit)
We can use ServiceWorker:

To make sites work faster and/or offline using network intercepting
As a basis for other ‘background‘ features such as push messaging and background synchronization

 

现在service worker的最佳使用场景是提供离线能力。开发人员可以注册一个service worker作为网络代理提供网络拦截。即使没有可用的网络时，这个代理也能够对缓存的数据和资源或者是已经生成的内容作出响应

和现有的HTML5数据缓存功能有很大的不同，service worker的离线能力是可编程的。Russell称它是一个：“让你做出选择去做哪些事的、可编程的、浏览器内置的代理”。由于service worker运行于后台，它和当前的Web页面完全独立

 

 

区别====================================

Very basic distinction: a Worker can only be accessed from the script that created it, a SharedWorker can be accessed by any script that comes from the same domain.

 

SharedWorker‘s seem to have more functionality then Worker.
Among that functionality is :
A shared global scope. All SharedWorker instances share a single global scope.

 

A shared worker can work with multiple connections. It posts messages to ports to allow communication between various scripts.

A dedicated worker on the other hand is simply tied to its main connection and cannot post messages to other scripts (workers).

 

 

ServiceWorker=====================================

http://www.w3ctech.com/topic/866

http://www.html5rocks.com/en/tutorials/service-worker/introduction/

http://www.html5online.com.cn/articles/2015051201.html

 

由于安全问题，ServiceWorker 只能在 HTTPS 环境下运, 另外localhost 也OK。