深入理解JS异步编程四（HTML5 Web Worker）

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

一：如何使用Worker

Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage，onmessage。

那么如何使用呢，我们看一个例子：

//worker.js
onmessage =function (evt){
  var d = evt.data;//通过evt.data获得发送来的数据
  postMessage( d );//将获取到的数据发送会主线程
}

HTML页面：test.html

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <script type="text/javascript">
//WEB页主线程
var worker =new Worker("worker.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL
 worker.postMessage("hello world");     //向worker发送数据
 worker.onmessage =function(evt){     //接收worker传过来的数据函数
   console.log(evt.data);              //输出worker发送来的数据
 }
 </script>
 </head>
 <body></body>
</html>

　　用Chrome浏览器打开test.html后，控制台输出 “hello world” 表示程序执行成功。

通过这个例子我们可以看出使用web worker主要分为以下几部分

WEB主线程:

1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker，同时返回一个worker实例。

2.通过worker.postMessage( data ) 方法来向worker发送数据。

3.绑定worker.onmessage方法来接收worker发送过来的数据。

4.可以使用 worker.terminate() 来终止一个worker的执行。

worker新线程：

1.通过postMessage( data ) 方法来向主线程发送数据。

2.绑定onmessage方法来接收主线程发送过来的数据。

二：Worker能做什么

知道了如何使用web worker ，那么它到底有什么用，可以帮我们解决那些问题呢。我们来看一个fibonacci数列的例子。

大家知道在数学上，fibonacci数列被以递归的方法定义：F0=0，F1=1，Fn=F(n-1)+F(n-2)（n>=2，n∈N*），而javascript的常用实现为：　

var fibonacci =function(n) {
    return n <2? n : arguments.callee(n -1) + arguments.callee(n -2);
};
//fibonacci(36)

在chrome中用该方法进行39的fibonacci数列执行时间为19097毫秒，而要计算40的时候浏览器直接提示脚本忙了。

由于javascript是单线程执行的，在求数列的过程中浏览器不能执行其它javascript脚本，UI渲染线程也会被挂起，从而导致浏览器进入僵死状态。使用web worker将数列的计算过程放入一个新线程里去执行将避免这种情况的出现。具体看例子：

//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));
};

HTML页面：fibonacci.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.addEventListener('message', function(event) {
        var timer2 = (new Date()).valueOf();
           console.log( '结果：'+event.data, '时间:'+ timer2, '用时：'+ ( timer2  - timer ) );
      }, false);
      var timer = (new Date()).valueOf();
      console.log('开始计算：40','时间:'+ timer );
      setTimeout(function(){
          console.log('定时器函数在计算数列时执行了', '时间:'+ (new Date()).valueOf() );
      },1000);
      worker.postMessage(40);
      console.log('我在计算数列的时候执行了', '时间:'+ (new Date()).valueOf() );
  }  
  </script>
</head>
<body>
</body>
</html>

在Chrome中打开fibonacci.html，控制台得到如下输出：

开始计算：40 时间:1316508212705
我在计算数列的时候执行了 时间:1316508212734
定时器函数在计算数列时执行了 时间:1316508213735
结果：102334155 时间:1316508262820 用时：50115

这个例子说明在worker中执行的fibonacci数列的计算并不会影响到主线程的代码执行，完全在自己独立的线程中计算，只是在计算完成之后将结果发回主线程。

利用web worker我们可以在前端执行一些复杂的大量运算而不会影响页面的展示，并且不会弹出恶心的脚本正忙提示。

下面这个例子使用了web worker来计算场景中的像素，场景打开时是一片一片进行绘制的，一个worker只计算一块像素值。

http://nerget.com/rayjs-mt/rayjs.html

三：Worker的其他尝试
我们已经知道Worker通过接收一个URL来创建一个worker，那么我们是否可以利用web worker来做一些类似jsonp的请求呢，大家知道jsonp是通过插入script标签来加载json数据的，而script元素在加载和执行过程中都是阻塞式的，如果能利用web worker实现异步加载将会非常不错。

下面这个例子将通过 web worker、jsonp、ajax三种不同的方式来加载一个169.42KB大小的JSON数据

// /aj/webWorker/core.js
function $E(id) {<br>    </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> document.getElementById(id);<br>}<br>onload </span><span style="color: #000000;">=</span><span style="color: #0000ff;">function</span><span style="color: #000000;">() {<br>    </span><span style="color: #008000;">//</span><span style="color: #008000;">通过web worker加载</span><span style="color: #008000;"><br></span><span style="color: #000000;">    $E(</span><span style="color: #000000;">'</span><span style="color: #000000;">workerLoad</span><span style="color: #000000;">'</span><span style="color: #000000;">).onclick </span><span style="color: #000000;">=</span><span style="color: #0000ff;">function</span><span style="color: #000000;">() {<br>        </span><span style="color: #0000ff;">var</span><span style="color: #000000;"> url </span><span style="color: #000000;">=</span><span style="color: #000000;">'</span><span style="color: #000000;">http://js.wcdn.cn/aj/mblog/face2</span><span style="color: #000000;">'</span><span style="color: #000000;">;<br>        </span><span style="color: #0000ff;">var</span><span style="color: #000000;"> d </span><span style="color: #000000;">=</span><span style="color: #000000;"> (</span><span style="color: #0000ff;">new</span><span style="color: #000000;"> Date()).valueOf();<br>        </span><span style="color: #0000ff;">var</span><span style="color: #000000;"> worker </span><span style="color: #000000;">=</span><span style="color: #0000ff;">new</span><span style="color: #000000;"> Worker(url);<br>        worker.onmessage </span><span style="color: #000000;">=</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(obj) {<br>            console.log(</span><span style="color: #000000;">'</span><span style="color: #000000;">web worker: </span><span style="color: #000000;">'</span><span style="color: #000000;">+</span><span style="color: #000000;"> ((</span><span style="color: #0000ff;">new</span><span style="color: #000000;"> Date()).valueOf() </span><span style="color: #000000;">-</span><span style="color: #000000;"> d));<br>        };<br>    };<br>    </span><span style="color: #008000;">//</span><span style="color: #008000;">通过jsonp加载</span><span style="color: #008000;"><br></span><span style="color: #000000;">    $E(</span><span style="color: #000000;">'</span><span style="color: #000000;">jsonpLoad</span><span style="color: #000000;">'</span><span style="color: #000000;">).onclick </span><span style="color: #000000;">=</span><span style="color: #0000ff;">function</span><span style="color: #000000;">() {<br>        </span><span style="color: #0000ff;">var</span><span style="color: #000000;"> url </span><span style="color: #000000;">=</span><span style="color: #000000;">'</span><span style="color: #000000;">http://js.wcdn.cn/aj/mblog/face1</span><span style="color: #000000;">'</span><span style="color: #000000;">;<br>        </span><span style="color: #0000ff;">var</span><span style="color: #000000;"> d </span><span style="color: #000000;">=</span><span style="color: #000000;"> (</span><span style="color: #0000ff;">new</span><span style="color: #000000;"> Date()).valueOf();<br>        STK.core.io.scriptLoader({<br>            method:</span><span style="color: #000000;">'</span><span style="color: #000000;">post</span><span style="color: #000000;">'</span><span style="color: #000000;">,<br>            url : url,<br>            onComplete : </span><span style="color: #0000ff;">function</span><span style="color: #000000;">() {<br>                console.log(</span><span style="color: #000000;">'</span><span style="color: #000000;">jsonp: </span><span style="color: #000000;">'</span><span style="color: #000000;">+</span><span style="color: #000000;"> ((</span><span style="color: #0000ff;">new</span><span style="color: #000000;"> Date()).valueOf() </span><span style="color: #000000;">-</span><span style="color: #000000;"> d));<br>            }<br>        });<br>    };<br>    </span><span style="color: #008000;">//</span><span style="color: #008000;">通过ajax加载</span><span style="color: #008000;"><br></span><span style="color: #000000;">    $E('ajaxLoad').onclick =function() {
        var url ='http://js.wcdn.cn/aj/mblog/face';
        var d = (new Date()).valueOf();
        STK.core.io.ajax({
            url : url,
            onComplete : function(json) {
                console.log('ajax: '+ ((new Date()).valueOf() - d));
            }
        });
    };
};

HTML页面：/aj/webWorker/worker.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Worker example: load data</title>
<script src="http://js.t.sinajs.cn/STK/js/gaea.1.14.js" type="text/javascript"></script>
<script type="text/javascript" src="http://js.wcdn.cn/aj/webWorker/core.js"></script>
</head>
<body>
    <input type="button" id="workerLoad" value="web worker加载"></input>
    <input type="button" id="jsonpLoad" value="jsonp加载"></input>
    <input type="button" id="ajaxLoad" value="ajax加载"></input>
</body>
</html>

设置HOST

127.0.0.1 js.wcdn.cn

通过 http://js.wcdn.cn/aj/webWorker/worker.html 访问页面然后分别通过三种方式加载数据，得到控制台输出：

web worker: 174
jsonp: 25
ajax: 38

多试几次发现通过jsonp和ajax加载数据的时间相差不大，而web worker的加载时间一直处于高位，所以用web worker来加载数据还是比较慢的，即便是大数据量情况下也没任何优势，可能是Worker初始化新起线程比较耗时间。除了在加载过程中是无阻塞的之外没有任何优势。

那么web worker是否能支持跨域js加载呢，这次我们通过http://127.0.0.1/aj/webWorker/worker.html 来访问页面，当点击 “web worker加载” 加载按钮时Chrome下无任何反映，FF6下提示错误。由此我们可以知道web worker是不支持跨域加载JS的，这对于将静态文件部署到单独的静态服务器的网站来说是个坏消息。

所以web worker只能用来加载同域下的json数据，而这方面ajax已经可以做到了，而且效率更高更通用。还是让Worker做它自己擅长的事吧。

四：总结

web worker看起来很美好，但处处是魔鬼。

我们可以做什么：

1.可以加载一个JS进行大量的复杂计算而不挂起主进程，并通过postMessage，onmessage进行通信

2.可以在worker中通过importScripts(url)加载另外的脚本文件

3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()

4.可以使用XMLHttpRequest来发送请求

5.可以访问navigator的部分属性

有那些局限性：

1.不能跨域加载JS

2.worker内代码不能访问DOM

3.各个浏览器对Worker的实现不大一致，例如FF里允许worker中创建新的worker,而Chrome中就不行

4.不是每个浏览器都支持这个新特性

深入理解JS异步编程四（HTML5 Web Worker）的更多相关文章

深入理解javascript异步编程障眼法&&h5 web worker实现多线程
0.从一道题说起 var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert('end'); 1 2 3 4 ...
理解js异步编程
Promise 背景 javascript语言的一大特点就是单线程,在某个特定的时刻只有特定的代码能够被执行,并阻塞其它的代码,也就是说,同一个时间只能做一件事. 怎么做到异步编程?回调函数.直到no ...
深入理解JS异步编程五（脚本异步加载）
异步脚本加载阻塞性脚本 JavaScript在浏览器中被解析和执行时具有阻塞的特性,也就是说,当JavaScript代码执行时,页面的解析.渲染以及其他资源的下载都要停下来等待脚本执行完毕浏览器是 ...
深入理解JS异步编程（一）
js事件概念异步回调首先了讲讲js中两个方法 setTimeout()和 setInterval() 定义和用法: setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 语法 ...
深入理解JS异步编程二(分布式事件)
PubSub模式从原生的js角度,我们要监听某事件的方法就是利用addEventListener方法,但是当我们的页面趋于复杂,比如要向某个元素添加多个处理事件,那么就要用一个封装函数汇集多个处理函 ...
深入理解JS异步编程三(promise)
jQuery 原本写一个小动画我们可能是这样的 $('.animateEle').animate({ opacity:'.5' }, 4000,function(){ $('.animateEle2' ...
js异步编程
前言以一个煮饭的例子开始,例如有三件事,A是买菜.B是买肉.C是洗米,最终的结果是为了煮一餐饭.为了最后一餐饭,可以三件事一起做,也可以轮流做,也可能C需要最后做(等A.B做完),这三件事是相关的, ...
深入HTML5 Web Worker应用实践：多线程编程
HTML5 中工作线程(Web Worker)简介至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能 ...
深入 HTML5 Web Worker 应用实践：多线程编程
深入 HTML5 Web Worker 应用实践:多线程编程 HTML5 中工作线程(Web Worker)简介至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越 ...

随机推荐

good books
黑马程序员——【Java高新技术】——反射机制
---------- android培训.java培训.期待与您交流! ---------- 一.概述 1.Java反射机制:是指“在运行状态中”,对于任意一个类,都能够知道这个类中的所有属性和方法: ...
html、css、js注释
HTML注释  CSS注释 /* 注释内容 */ JS注释单行注释以 // 开头. 多行注释以 /* 开始,以 */ 结尾.
python数据结构与算法——链表
具体的数据结构可以参考下面的这两篇博客: python 数据结构之单链表的实现: http://www.cnblogs.com/yupeng/p/3413763.html python 数据结构之双向 ...
CentOS 6.5设置静态IP教程并且可以ping通
CentOS6.5掉电或重启,它的IP会被DHCP重新分配,如果要远程控制这台电脑,不得不去打开显示器去查看它的新IP,这样太麻烦了.于是需要将这台电脑的IP设置成静态的. 网上常规的设置静态ip的方 ...
论文笔记之：Progressive Neural Network Google DeepMind
Progressive Neural Network Google DeepMind 摘要:学习去解决任务的复杂序列 --- 结合 transfer (迁移),并且避免 catastrophic f ...
mysql登陆出现unknown database错误可能原因
输入了错误命令如 # mysql -u root -p test 然后客户端会出现需要输入命令的提示,即使输入正确出现错误提示正确命令是 # mysql -u root -p
由javascript中的this指针所想到的
初次结识 this 指针,是在学 <<C++ Primer Plus>>这本书的时候(这本书勉强读了一二遍,之后转学 html+css+js了,不过这是后话). 依稀记得书中举 ...
CentOS中Device eth0 does not seem to be present错误解决办法
今天克隆的虚拟机,当需要多台虚拟机的时候,试用克隆真是方便,不过遇到了 Device eth0 does not seem to be present 的问题,在网上找到遇到同样问题的解决方法, 很顺 ...
VB6对象与地址相互转换
Private Declare Sub CopyMemory Lib "kernel32" Alias "RtlMoveMemory" _ (lpDest As ...

深入理解JS异步编程四（HTML5 Web Worker）

深入理解JS异步编程四（HTML5 Web Worker）的更多相关文章

随机推荐

热门专题