WebWorker SharedWorker ServiceWorker

WebWorker 是什么?

• 为 JavaScript 引入线程技术 没必要再用 setTimeout()、setInterval()、XMLHttpRequest 来模拟并行
• Worker 利用相似线程的消息传递实现并行。这很是适合您确保对 UI 的刷新、性能以及对用户的响应。
• Web Worker 的三大主要特征：可以长时间运行（响应），理想的启动性能以及理想的内存消耗。

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

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

WebWorker 的类型

一个是专用线程 Dedicated Worker(普通的Worker)，一个是共享 Shared Worker。
后来又有了Service Worker

Webworker的支持状况

http://caniuse.com/#search=shared
Service Worker 支持状况不佳 Chrome 40+ 才支持

使用入门

和windows线程通讯一个机制 发消息 接收消息

参考
http://www.html5rocks.com/zh/tutorials/workers/basics/
http://www.ibm.com/developerworks/cn/web/1112_sunch_webworker/
http://tutorials.jenkov.com/html5/web-workers.html

Debug

chrome://inspect/#workers Worker Debug页
经过这个页面能够肯定

专用Worker Dedicated 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 的方法有两种：在主网页中调用 worker terminate()，或在 Worker 自己内部调用 self.close()。

Worker的做用域

self 和 this 指的都是 Worker 的全局做用域
所以下面两种方式是相同的

self.addEventListener('message', function(e) {
      self.postMessage('Unknown command: ' + data.msg);
}, false);
addEventListener('message', function(e) {
      postMessage('WORKER STARTED: ' + data.msg);
}, false);

一些Demo参考 https://github.com/greenido/Web-Workers-Examples- (SharedWorker也包含在内)

import 和 子worker(Chrome并不支持)

import能够引入其余的JS

WebWorker限制

• DOM（非线程安全）
• window 对象
• document 对象
• parent 对象

SharedWorker

参考
https://github.com/mdn/simple-shared-worker
http://tutorials.jenkov.com/html5/web-workers.html
An ordinary web worker is only accessible by the page that created it. If you want to share a web worker between multiple pages, you can use a SharedWorker. A SharedWorker is accessible by all pages that are loaded from the same origin (domain).

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).

建立一个SharedWorker

var worker = new SharedWorker("/html5/web-worker-shared.js");
worker.port.addEventListener("message",
        function(event) {
            alert(event.data);
        }
        , false
);
worker.port.start();

或者使用

worker.port.onmessage = function(e){
            log.textContent = e.data;
            console.log(e.data);
        };

此种方式不须要worker.port.start(); 可是存在事件被覆盖的问题

实现SharedWorker

onconnect = function (e) {
    var port = e.ports[0];
    port.postMessage('A new connection! The current connection number is ' + connect_number);
    port.onmessage = function (e) {
        var instruction = e.data.instruction || e.data;
        var results = execute_instruction(instruction);
        port.postMessage('...');
    };
    port.start();
};

Demo参考https://github.com/mdn/simple-shared-worker

SharedWorker 能够作什么

• load further scripts with importScripts()
• attach error handlers, and
• run the port.close() method to prevent further communication on a specific port.

Shared web workers probably won’t be a viable technology for a couple of years, but they raise exciting opportunities for the future of JavaScript development. Let’s hope browser vendors can supply a few decent tracing and debugging tools!

WebWorker和SharedWorker区别

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

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

参考
http://www.w3ctech.com/topic/866
http://www.html5rocks.com/en/tutorials/service-worker/introduction/
http://www.html5online.com.cn/articles/2015051201.html
https://github.com/csbun/blog/blob/master/_posts/2015-06-02-service-worker.markdown

个人Demo

https://github.com/lumixraku/repo/tree/master/WebWorker/ServiceWorker

ServiceWorker 和 SharedWorker

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)

  关于第一点 若是全部引用SharedWorker的页面都关了话 SharedWorker就不存在了 ServiceWorker不是

http://stackoverflow.com/questions/28882289/service-worker-vs-shared-worker

A service worker has additional functionality beyond what's available in shared workers, and it has a longer lifespan
serviceworker要比SharedWorker多一些功能 且有更长的生命周期
service和shared同样能够对 message 做响应
service还能够处理fetch事件(能够拦截网络请求) 以及从cache中作出响应
还有个区别就是生命周期
一个service注册到一个域名后 就是永久注册 (若是相关文件改变了 service就会更新)

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页面彻底独立

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

更新service worker

若是sw有更新 下次访问的时候就会从新下载sw 且从新触发install 可是此时旧的worker仍然在管理着cache 新sw处于waiting状态 现有页面关闭后旧的sw就会被清掉 新sw接管 触发activate事件