突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述


Posted in HTML / CSS onJanuary 31, 2013

Javascript执行机制
在HTML5之前,浏览器中JavaScript的运行都是以单线程的方式工作的,虽然有多种方式实现了对多线程的模拟(例如:Javascript 中的 setinterval 方法,setTimeout 方法等),但是在本质上程序的运行仍然是由 JavaScript 引擎以单线程调度的方式进行的。在 HTML5 中引入的工作线程使得浏览器端的 Javascript 引擎可以并发地执行 Javascript 代码,从而实现了对浏览器端多线程编程的良好支持。

Javascript中的多线程 - WebWorker
HTML5 中的 Web Worker 可以分为两种不同线程类型,一个是专用线程 Dedicated Worker,一个是共享线程 Shared Worker。两种类型的线程各有不同的用途。
专用型web worker
专用型worker与创建它的脚本连接在一起,它可以与其他的worker或是浏览器组件通信,但是他不能与DOM通信。专用的含义,我想就是这个线程一次只处理一个需求。专用线程在除了IE外的各种主流浏览器中都实现了,可以放心使用。
创建线程
创建worker很简单,只要把需要在线程中执行的JavaScript文件的文件名传给构造函数就可以了。
线程通信
在主线程与子线程间进行通信,使用的是线程对象的postMessage和onmessage方法。不管是谁向谁发数据,发送发使用的都是postMessage方法,接收方都是使用onmessage方法接收数据。postMessage只有一个参数,那就是传递的数据,onmessage也只有一个参数,假设为event,则通过event.data获取收到的数据。
发送JSON数据
JSON是JS原生支持的东西,不用白不用,复杂的数据就用JSON传送吧。例如:

复制代码
代码如下:

postMessage({'cmd': 'init', 'timestamp': Date.now()});

处理错误
当线程发生错误的时候,它的onerror事件回调会被调用。所以处理错误的方式很简单,就是挂接线程实例的onerror事件。这个回调函数有一个参数error,这个参数有3个字段:message - 错误消息;filename - 发生错误的脚本文件;lineno - 发生错误的行。
销毁线程
在线程内部,使用close方法线程自己销毁自己。在线程外部的主线程中,使用线程实例的terminate方法销毁线程。
下面从一个例子看线程的基本操作:
HTML代码:
复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>web worker fibonacci</title>
<script type="text/javascript">
onload = function(){
var worker = new Worker('fibonacci.js');
worker.onmessage = function(event) {
console.log("Result:" + event.data);
};
worker.onerror = function(error) {
console.log("Error:" + error.message);
};
worker.postMessage(40);
}
</script>
</head>
<body>
</body>
</html>

脚本文件fibonacci.js代码:
复制代码
代码如下:

//fibonacci.js
var fibonacci = function(n) {
return n < 2 ? n : arguments.callee(n - 1) + arguments.callee(n - 2);
};
onmessage = function(event) {
var n = parseInt(event.data, 10);
postMessage(fibonacci(n));
};

把它们放到相同的目录,运行页面文件,查看控制台,可以看到运行的结果。
这里还有一点,在主线程中,onmessage事件可以使用另外一种方式挂接:
复制代码
代码如下:

worker.addEventListener('message', function(event) {
console.log("Result:" + event.data);
}, false);

个人觉得很麻烦,不如用onmessage直接。
使用其他脚本文件
工作线程可以使用全局方法importScripts来加载和使用其他的域内脚本文件或者类库。例如下面都是合法的使用方式:
复制代码
代码如下:

importScripts();/* imports nothing */
importScripts('foo.js'); /* imports just "foo.js" */
importScripts('foo.js', 'bar.js');/* imports two scripts */

导入以后,可以直接使用这些文件中的方法。看一个网上的小例子:
复制代码
代码如下:

/**
* 使用 importScripts 方法引入外部资源脚本,在这里我们使用了数学公式计算工具库 math_utilities.js
* 当 JavaScript 引擎对这个资源文件加载完毕后,继续执行下面的代码。同时,下面的的代码可以访问和调用
* 在资源文件中定义的变量和方法。
**/
importScripts('math_utilities.js');
onmessage = function (event)
{
var first = event.data.first;
var second = event.data.second;
calculate(first,second);
};
function calculate(first,second) {
//do the calculation work
var common_divisor=divisor(first,second);
var common_multiple=multiple(first,second);
postMessage("Work done! " +
"The least common multiple is " + common_divisor +
" and the greatest common divisor is "+common_multiple);
}

网上也有网友想到了利用这里的importScripts方法解决资源预加载的问题(浏览器预先加载资源,而不会对资源进行解析和执行),道理也很简单。
线程嵌套
在工作线程中还可以在创建子线程,各种操作还是一样的。
同步问题
Worker没有锁的机制,多线程的同步问题只能靠代码来解决(比如定义信号变量)。
共享型SharedWebWorker
共享型web worker主要适用于多连接并发的问题。因为要处理多连接,所以它的API与专用型worker稍微有点区别。除了这一点,共享型web worker和专用型worker一样,不能访问DOM,并且对窗体属性的访问也受到限制。共享型web worker也不能跨越通信。
页面脚本可以与共享型web worker通信,然而,与专用型web worker(使用了一个隐式的端口通信)稍微有点不同的是,通信是显式的通过使用一个端口(port)对象并附加上一个消息事件处理程序来进行的。
在收到web worker脚本的首个消息之后,共享型web worker把一个事件处理程序附加到激活的端口上。一般情况下,处理程序会运行自己的postMessage()方法来把一个消息返回给调用代码,接着端口的start()方法生成一个有效的消息进程。
看网上能找到的的唯一个例子:创建一个共享线程用于接收从不同连接发送过来的指令,然后实现自己的指令处理逻辑,指令处理完成后将结果返回到各个不同的连接用户。
HTML代码:
复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Shared worker example: how to use shared worker in HTML5</title>
<script>
var worker = new SharedWorker('sharedworker.js');
var log = document.getElementById('response_from_worker');
worker.port.addEventListener('message', function(e) {
//log the response data in web page
log.textContent =e.data;
}, false);
worker.port.start();
worker.port.postMessage('ping from user web page..');
//following method will send user input to sharedworker
function postMessageToSharedWorker(input)
{
//define a json object to construct the request
var instructions={instruction:input.value};
worker.port.postMessage(instructions);
}
</script>
</head>
<body onload=''>
<output id='response_from_worker'>
Shared worker example: how to use shared worker in HTML5
</output>
send instructions to shared worker:
<input type="text" autofocus oninput="postMessageToSharedWorker(this);return false;">
</input>
</body>
</html>

脚本文件代码:
复制代码
代码如下:

// 创建一个共享线程用于接收从不同连接发送过来的指令,指令处理完成后将结果返回到各个不同的连接用户。
var connect_number = 0;
onconnect = function(e) {
connect_number =connect_number+ 1;
//get the first port here
var port = e.ports[0];
port.postMessage('A new connection! The current connection number is '
+ connect_number);
port.onmessage = function(e) {
//get instructions from requester
var instruction=e.data.instruction;
var results=execute_instruction(instruction);
port.postMessage('Request: '+instruction+' Response '+results
+' from shared worker...');
};
};
/*
* this function will be used to execute the instructions send from requester
* @param instruction
* @return
*/
function execute_instruction(instruction)
{
var result_value;
//implement your logic here
//execute the instruction...
return result_value;
}

在上面的共享线程例子中,在主页面即各个用户连接页面构造出一个共享线程对象,然后定义了一个方法 postMessageToSharedWorker 向共享线程发送来之用户的指令。同时,在共享线程的实现代码片段中定义 connect_number 用来记录连接到这个共享线程的总数。之后,用 onconnect 事件处理器接受来自不同用户的连接,解析它们传递过来的指令。最后,定义一个了方法 execute_instruction 用于执行用户的指令,指令执行完成后将结果返回给各个用户。

这里我们并没有跟前面的例子一样使用到了工作线程的 onmessage 事件处理器,而是使用了另外一种方式 addEventListener。实际上,前面已经说过,这两种的实现原理基本一致,只是在这里有些稍微的差别,如果使用到了 addEventListener 来接受来自共享线程的消息,那么就要先使用 worker.port.start() 方法来启动这个端口。之后就可以像工作线程的使用方式一样正常的接收和发送消息。
最后陈述
线程中能做的事
1.能使用setTimeout(), clearTimeout(), setInterval(),clearInterval()等函数。
2.能使用navigator对象。
3.能使用XMLHttpRequest来发送请求。
4.可以在线程中使用Web Storage。
5.线程中可以用self获取本线程的作用域。
线程中不能做的事
1.线程中是不能使用除navigator外的DOM/BOM对象,例如window,document(想要操作的话只能发送消息给worker创建者,通过回调函数操作)。
2.线程中不能使用主线程中的变量和函数。
3.线程中不能使用有"挂起"效果的操作命令,例如alert等。
4.线程中不能跨域加载JS。
线程也是需要消耗资源的,而且使用线程也会带来一定的复杂性,所以如果没有充足的理由来使用额外的线程的话,那么就不要用它。
实用参考
官方文档:http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html
WebWorker分类说明:http://www.w3schools.com/html5/html5_webworkers.asp
三水点靠木:https://3water.com/w3school/html5/
WebWorker概述:https://developer.mozilla.org/en/Using_web_workers

HTML / CSS 相关文章推荐
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
html5 兼容IE6结构的实现代码
May 14 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
html form表单基础入门案例讲解
Jul 21 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 #HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 #HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 #HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
Jan 30 #HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 #HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 #HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 #HTML / CSS
You might like
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
php在线代理转向代码
2012/05/05 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
js如何验证密码强度
2020/03/18 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
Django 内置权限扩展案例详解
2019/03/04 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
django使用JWT保存用户登录信息
2020/04/22 Python
python读取xml文件方法解析
2020/08/04 Python
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
教师自荐书
2013/10/08 职场文书
同居协议书范本
2014/04/23 职场文书
运动会标语
2014/06/21 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
教师理论学习心得体会
2016/01/21 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
Python中re模块的元字符使用小结
2022/04/07 Python