HTML5新特性之工作线程Web Worker

最新推荐文章于 2024-04-14 21:48:57 发布

Topepy

最新推荐文章于 2024-04-14 21:48:57 发布

阅读量766

点赞数

分类专栏： Javascript HTML

本文链接：https://blog.csdn.net/u013084331/article/details/51142690

版权

Javascript 同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

HTML

13 篇文章 0 订阅

订阅专栏

一、Web Worker的起因：

众所周知，在HTML5推出之前的 JavaScript 的运行都是以单线程的方式工作的，虽然有多种方式实现了对多线程的模拟

（例如：JavaScript 中的 setinterval 方法，setTimeout 方法等），但是在本质上程序的运行仍然是由 JavaScript 引擎以单线

程调度的方式进行的。单线程的不足就是效率低下。HTML5 中引入工作线程使得浏览器端的 JavaScript 引擎可以并发地执行

JavaScript 代码，实现了对浏览器端多线程编程的良好支持。从而提升处理效率。

引申：什么是线程，什么是进程。区别是什么？

进程我喜欢比喻成一个工厂，那么进程就是工厂中的员工。一个工厂可以有多名员工。也就是说一个进程里可以有多条线程。

在多线程中需要注意的是，进程中的各个线程是共享整个进程资源的，不过有些资源的容量有限，比如工厂的洗手间。这时候就

需要一种机制来进行维护。那就是利用“互斥锁”来完成。它的实现原理好比将进门的钥匙挂在门上，有线程进入这个资源就取走一

片钥匙，如果没有钥匙就无法进入房间，也就是说此资源共享容量已满。其中又会出现一些问题比如“死锁”，这里就不做延伸了。

想了解的朋友可以看：http://www.ruanyifeng.com/blog/2013/04/processes_and_threads.html

二、Web Worker的使用：

Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到

互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage，onmessage。

具体实例：

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

②js页面:woker.js

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

浏览器打开将在控制台输出

hello world

由上可以看出使用Web Worker主要分为以下几部分：

WEB主线程：

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

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

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

4.终止Worker。使用worker.terminate() 来终止一个worker的执行。（后面将使用）

Worker新线程（也就是上面的worker.js）:

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

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

三、Web Worker能解决什么问题：

大家知道在数学上，斐波那契数列被以递归的方法定义：F0=0，F1=1，Fn=F(n-1)+F(n-2)（n>=2，n∈N*），

也是就是兔子生兔子的数列，而javascript的常用实现为：

 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <script>
		var fibonacci =function(n) {
    		return n <2? n : arguments.callee(n -1) + arguments.callee(n -2);
		};
		var timerStart = (new Date()).valueOf();
		fibonacci(40);
		var timerEnd = (new Date()).valueOf();
		var timer = timerEnd - timerStart;
		console.log('No Web Worker的时间为：'+timer);
  </script>
 </body>
</html>

最后运行的结果：

由于javascript是单线程执行，在求数列的过程中浏览器不能执行其它javascript脚本，UI渲染线程也会被挂起，从而

导致浏览器进入僵死状态。使用web worker将数列的计算过程放入一个新线程里去执行将避免这种情况的出现。

具体看例子：

①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('worker.js');
            worker.addEventListener('message', function(event) {
                var timer2 = (new Date()).valueOf();
                console.log( 'Web Worker用时：'+ ( timer2  - timer ) );
            }, false);
            var timer = (new Date()).valueOf();
            worker.postMessage(40);
        }
    </script>
</head>
<body>
</body>
</html>

②js页面worker.js:

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

最后结果如下：