Web Worker

 

Internet Explorer 10 和使用 JavaScript 的 Windows 应用商店应用引入了对 Web Worker 的支持。Web Worker API 定义了一种在后台运行脚本的方法。 Web Worker 是在万维网联合会 (W3C) 的 Web Worker 规范中指定的。

从传统意义上来说,浏览器是单线程的,它们会强制应用程序中的所有脚本一起在单个 UI 线程中运行。虽然你可以通过使用文档对象模型 (DOM) 事件和setTimeout API 造成一种多个任务同时在运行的假象,但只需一个计算密集型任务就会使用户体验急转直下。

Web Worker API 为 Web 应用程序的创作人员提供了一种方法,用于生成与主页并行运行的后台脚本。你可以一次生成多个线程以用于长时间运行的任务。新的 worker 对象需要一个 .js 文件,该文件通过一个发给服务器的异步请求包含在内。

 
var myWorker = new Worker('worker.js');

往来于 worker 线程的所有通信都通过消息进行管理。主机 worker 和 worker 脚本可以通过 postMessage 发送消息并使用 onmessage 事件侦听响应。消息的内容作为事件的数据属性进行发送。

下面的示例创建一个 worker 线程并侦听消息。

 
var hello = new Worker('hello.js');
hello.onmessage = function(e) {
alert(e.data);
};

worker 线程发送要显示的消息。

 
postMessage('Hello world!');

与 Web Worker 进行双向通信

要建立双向通信,主页和 worker 线程都要侦听 onmessage 事件。在以下示例中,Worker 线程在指定的延迟后返回消息。

首先,该脚本创建 worker 线程。

 
var echo = new Worker('echo.js');
echo.onmessage = function(e) {
alert(e.data);
}

消息文本和超时值在表单中进行指定。当用户单击提交按钮时,脚本会将两条信息以 JavaScript 对象文本的形式传递给 worker。为了防止页面在新的 HTTP 请求中提交表单值,事件处理程序还对事件对象调用 preventDefault。注:你不能将对 DOM 对象的引用发送给 worker 线程。Web Worker 并非可以访问所有数据。只允许访问 JavaScript 基元(例如 Object 或 String 值)。

 
<script>
window.onload = function() {
var echoForm = document.getElementById('echoForm');
echoForm.addEventListener('submit', function(e) {
echo.postMessage({
message : e.target.message.value,
timeout : e.target.timeout.value
});
e.preventDefault();
}, false);
}
</script>
<form id="echoForm">
<p>Echo the following message after a delay.</p>
<input type="text" name="message" value="Input message here."/><br/>
<input type="number" name="timeout" max="10" value="2"/> seconds.<br/>
<button type="submit">Send Message</button>
</form>

最后,worker 侦听消息,并在指定的超时间隔之后将其返回。

 
onmessage = function(e)
{
setTimeout(function()
{
postMessage(e.data.message);
},
e.data.timeout * 1000);
}

在 Internet Explorer 10 和使用 JavaScript 的 Windows 应用商店应用中,Web Worker API 支持以下方法。

方法 描述

void close()

终止 worker 线程。

void importScripts(inDOMString... urls);

导入其他 JavaScript 文件的逗号分隔列表。

void postMessage(在任何数据中);

从 worker 线程发送消息或发送消息到 worker 线程。

Internet Explorer 10 和使用 JavaScript 的 Windows 应用商店应用支持以下 Web Worker API 属性:

属性 类型 描述
location WorkerLocation 代表绝对 URL,包括protocolhostporthostnamepathnamesearch 和 hash 组件。
navigator WorkerNavigator 代表用户代理客户端的标识和 onLine 状态。
self WorkerGlobalScope Worker 范围,包括 WorkerLocation 和 WorkerNavigator 对象。

Internet Explorer 10 和使用 JavaScript 的 Windows 应用商店应用支持以下 Web Worker API 事件:

事件 描述

onerror

出现运行时错误。

onmessage

接收到消息数据。

WindowTimers

Web Worker API 还支持更新的 HTML5 WindowTimers 功能。

方法 描述

void clearInterval(inlonghandle);

取消由句柄所确定的超时。

void clearTimeout(inlonghandle);

取消由句柄所确定的超时。

long setInterval(inanyhandler,inoptionalanytimeoutinany...args);

计划在指定的毫秒数之后重复运行的超时。注:你现在可以将其他参数直接传递到处理程序。如果处理程序是 DOMString,它被编译成 JavaScript。将句柄返回到超时。清除 clearInterval

long setTimeout(inanyhandler,在可选的任何超时中,在任何... 参数中);

计划在指定的毫秒数之后运行的超时。注:你现在可以将其他参数直接传递到处理程序。如果处理程序是 DOMString,它被编译成 JavaScript。将句柄返回到超时。清除 clearTimeout

在 IE10 Platform Preview 4 中对 Web Worker 的更新

Internet Explorer 10 Platform Preview Build 4 添加了每个进程 25 个 Web Worker 线程的限制。你可以在脚本中创建更多的 worker,但同时只有 25 个将处于活动状态。

如果达到最大线程数,创建 worker 将不会引发异常。调用总是成功,你可以添加处理程序并将消息发布给它。但是,在现有的 25 个线程之一变得可用之前,worker 可能不会启动。

 
// Coding pattern before IE10 Platform Preview Build 4
try {
var worker = new Worker(url);
} catch(ex) {
// IE might throw...?
} // After IE10 Platform Preview Build 4
var worker = new Worker(url);
// Continue with confidence...

html5之web worker的更多相关文章

  1. 通过一次实验来了解HTML5的 Web Worker

    web worker 是运行在后台的 JavaScript,不会影响页面的性能. 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 Ja ...

  2. JS利用HTML5的Web Worker实现多线程

    需求:有一个长时间的斐波拉契的计算希望放在分线程中计算,计算的得到结果后再返回给主线程展示,再计算的时候不冻结页面 var number = 55;//传入分线程的参数 var worker = ne ...

  3. html5 web worker学习笔记(记一)

    (吐槽:浏览器js终于进入多线程时代!) 以前利用setTimeout.setInterval等方式的多线程,是伪多线程,本质上是一种在单线程中进行队列执行的方式.自从html5 web worker ...

  4. web worker 简介

    web worker 简介 通常,浏览器执行某段程序的时候会阻塞直到运行结束后在恢复到正常状态,而HTML5的Web Worker就是为了解决这个问题.通过worker线程完成密集计算,避免程序的阻塞 ...

  5. JavaScript多线程之HTML5 Web Worker

    在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简 ...

  6. 过段时间逐步使用HTML5新增的web worker等内容

    想来快2017年了,2013年前的手机应该很少有人用了,以后逐渐使用HTML5新增的高级API吧. 先把web worker的内容再熟悉一下,因为微软虚拟学院的'面向有经验开发人员的 JavaScri ...

  7. HTML5 Web Worker的使用

    Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker Web Wo ...

  8. 深入理解JS异步编程四(HTML5 Web Worker)

    >Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker We ...

  9. 深入HTML5 Web Worker应用实践:多线程编程

    HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能 ...

随机推荐

  1. Http Request Process

    Request---------------->IIS(w3wp.exe)--------------->CLR(AppDomain)-------------------->ASP ...

  2. LVS+PIRANHA测试

    有一个知识盲点,是这个VIP,在四个服务器上都要设置? 现在只测试了两个机器,REAL SERVER没有开动. 如果LVS和REALSERVER都可以停一个作互切的话,那KEEPALIVED要它他什么 ...

  3. VitamioBundle-master

    1. 下载资源 (1) 核心插件 VitamioBundle 下载地址:https://github.com/yixia/VitamioBundle (2) 官方示例 VitamioDemo 下载地址 ...

  4. 14.4.4 Redo Log Buffer

    14.4.4 Redo Log Buffer redo log buffer 是内存区域持有数据被写入到redo log. Redo log buffer size 是通过 innodb_log_bu ...

  5. GruntJs安装及使用入门(自定义grunt任务,合并压缩js、css)

    一.Grunt.js简介(实现自动化) 1)简要说明: 1.GruntJs是基于node的javascript命令行工具,可以自动化构建.测试.生成文档的项目管理工具: 2.使用GruntJs可以自动 ...

  6. jquery 选择器 的学习,自己慢慢来

    1//加载所有元素后,执行下列代码 <script type="text/javascript"> $(document).ready(function(){ //选择 ...

  7. Java---文件的切割与合并,已经实现图形界面(工具)

    实现对任意文件的切割,实现对切割后的文件的合并. 上次只写了特定目录下的文件切割与合并,有点遗憾, 这次,我写了一个图形界面来实现对文件的切割与合并. 文件切割: 用户可以自己选择需要切割的文件, 软 ...

  8. web service1简单的例子用jdk自带的类

    1,建立自己的java项目my_service 2,建立包,com.hjg.service 3,创建类: IMyService.java package com.hjg.service; import ...

  9. ORACLE的RMAN

    1.什么是RMAN? RMAN可以用来备份和还原数据库文件.归档日志和控制文件.它也可以用来执行完全或不完全的数据库恢复. 注意:RMAN不能用于备份初始化参数文件和口令文件. RMAN启动数据库上的 ...

  10. JavaScript实现自定义短信模板

    自定义短信模板,要求:可以插入关键字,当然是可以在点击到文本域中的任意位置,关键字以中括号包裹的形式出现[关键字],删除关键字要整个关键都删掉,而不是自己全删除. 详细在简书中 http://www. ...