WebWorker SharedWorker ServiceWorker

http://www.ibm.com/developerworks/cn/web/1112_sunch_webworker/

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 ===================================

https://github.com/mdn/simple-shared-worker

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

https://github.com/csbun/blog/blob/master/_posts/2015-06-02-service-worker.markdown

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

时间: 2024-10-11 17:49:46

WebWorker SharedWorker ServiceWorker的相关文章

PWA之 Service worker

渐进式 Web 应用(Progressive Web Apps,也被称为 PWAs)是 Web 技术方面一项令人兴奋的创新.PWA 混合了多项技术,能够让 Web 应用的功能类似于原生移动应用.它为开发人员和用户带来的收益能够突破纯 Web 解决方案和纯原生解决方案的限制: 你只需要一个按照开放.标准 W3C Web 技术开发的应用,不需要开发单独的原生代码库: 用户在安装之前就能发现并尝试你的应用: 没有必要使用 AppStore,无需遵循复杂的规则或支付费用.应用程序会自动更新,无需用户交互

2019-04前端面经分享

本人找工作也找了快一个月了,面试的公司大概有20家公司了,大公司创业型公司都有,由于没有在每次面试完之后做一个记录,就做个笼统的面试经验归纳,按照技术的分类可以分为: html css js 计算机基础 Html模块 1.html5有哪些新的特性? 2.html怎么设置缓存,有哪些方式控制缓存? tip:因为html这一块问的也比较少,主要还是倾向于Js CSS模块 1.css3有哪些特性? 2.display:none和visibility:hidden的区别,有次面试问了个比较有意思的问题,

【JavaScript】线程WebWorker

介绍 通过使用WebWorker,我们可以在浏览器后台运行Javascript,而不占用浏览器自身线程.WebWorker可以提高应用的总体性能,并且提升用户体验.如果你想在自己的Web应用中使用WebWorker,不妨来了解一下有关WebWorker的7件事. 1.WebWorker可以让你在后台运行Javascript 一般来说Javascript和页面的UI会共用一个线程,所以当点击一个按钮开始运行Javascript后,在这段代码运行完毕之前,页面是无法响应用户操作的,换句话来说就是被“

HTML5新特性-多线程(Worker SharedWorker)

There is no doubt that JavaScript是没有多线程之说的,他只能一件事一件事的做,做完一件事再做下一件事,假如你的js要花一段比较长的时间做一件事的话,那么浏览器将会卡顿一段时间,不对用户的操作产生响应,这可咋办呢?谢天谢地,HTML5为我们提供了实现多线程的机制,这么好的东西,想必你早就再用了,不过没关系啊,咱们一块儿复习一下咯! 一.Worker类 1.方法介绍 (1)构造函数 new Worker(arg)  :参数表示你的线程要执行的代码所在的js文件,例如'

浅谈webWorker

一.webWorker之初体验 在"setTimeout那些事儿"中,说到JavaScript是单线程.也就是同一时间只能做同一事情. 也好理解,作为浏览器脚本语言,如果JavaScript不是单线程,那么就有点棘手了.比如,与用户交互或者对DOM进行操作时,在一个线程上修改某个DOM,另外的线程删除DOM,这时浏览器该如何抉择呢? 所以,JavaScript是单线程也是有背景的. 如下: <!DOCTYPE html>     <head>         &

初识 ServiceWorker

初识ServiceWorker 初识ServiceWorker 在8月份的时候.W3C更新了一个叫Service Workers的API. 了解过HTML5中的Web Worker的人可能会对这个API会更easy理解一些,不然的话会将这两个API搞混. 事实上,Service Worker是基于Web Worker的事件驱动的,他们运行的机制都是新开一个线程去处理一些额外的.曾经不能直接处理的任务.对于Web Worker,我们能够使用它来进行复杂的计算,由于它并不堵塞浏览器主线程的渲染.而S

web-worker计数器,根据输入时间统计次数

1.用web-worker实现:另起一个线程,将计数工作运行在后台的JavaScript文件,并返回累加后的结果. 该js文件运行于后台,独立于其他脚本,不会影响页面的性能.html页面可以继续做任何事情,而此时web worker在后台运行,互不干扰. 在用chrome调试时候出现错误: Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///Users/***/Desktop/myworker.js'

ServiceWorker.state

[ServiceWorker.state] ServiceWorker.state The state read-only property of the ServiceWorker interface returns a string representing the current state of the service worker. It can be one of the following values: installing, installed, activating, act

HTML5系列四(WebWorker、地理定位)

WebWorker简单应用 先从一个简单例子说起,计算数值加法 <script> var worker = new Worker('sumCalculate.js'); worker.onmessage = function (event) { alert('The sum is ' + event.data); } function calculate() { var num = parseInt(document.getElementById('num').value, 10); work