Html5之web workers多线程

Dear 丶 2021-06-24 14:34 377阅读 0赞

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

1、首先看一个实例：

1）js文件(test.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));
    };

2）html页面（test.html）

<html>
    <script type="text/javascript">
    var worker =new Worker('test.js'); 
    worker.onmessage =function(evt){     
    	alert(evt.data);
    }
     function onload() {
    	 worker.postMessage(40);
     }
     onload();
    </script>
    <body>
    sfsdfdsfdsfdfdsf
    <input type="text" value="abc"></input>
    <div id="test">
    </div>
    </body>
    </html>

注意：

1.上面的例子最好放到服务器上运行。(chrome不支持本地的)

2.上面的例子可以发现，页面会先渲染body中的html内容，在子线程中去执行负责的计算，等子线程计算完毕后把结果传递给主线程。如果不使用web workers，直接把计算部分放到主线程中，那么浏览器处于单线程中，会顺序执行，导致下面的页面无法加载。

2、web workers流程：

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方法来接收主线程发送过来的数据。

3、web workers知识点：  
1.worker.onmessage  
绑定主线程的message事件，当worker调用postMessage时方法时，绑定的事件处理程序会被调用到，传递来的数据可以使用MouseEvent的data属性获取，通过target属性还可以获取worker对象

2.self是什么  
self是woker中对自身的引用，有些像this

3.close()  
在worker内部调用close()方法效果和在外部调用worker实例的terminate()方法效果一样，终止worker运行

4.onmessage  
在这个句柄内接收外部调用者传递的参数，参数可以通过e.data获取

5.self.postMessage()  
没错通过这个方法我们可以在worker内把结果传递给主线程，主线程上绑定的message事件的处理程序会被调。

6.全新的JavaScript环境  
当一个Worker实例被创建的时候，它会在一个全新的JavaScript运行环境中，完全和创建worker的脚本分离开，即使我们传递的消息是引用类型它们也是复制传递的，修改worker中的参数不影响创建脚本中的参数。

7.importScripts()  
我们可以通过importScripts()方法通过url在worker中加载库函数，如下：  
importScripts('utility/dialog.js','common/cookie.js');  
方法可以接受多个url，相对地址的url以当前worker为参照，方法会按照参数顺序依次下载运行库函数，如果中间某个脚本出错，剩下的都不会被载入和执行，而且这个方法是同步的，只有所有脚本都加载、运行完后才会返回。  
注：importScripts方法可以加载跨域的文件。使用worker的构造函数时的js文件只能是同源的。

8.worker执行模型  
worker线程从上到下同步运行它的代码，然后进入异步阶段来对事件及计时器响应，如果worker注册了message事件处理程序，只要其有可能触发，worker就一直在内存中，不会退出，但如果worker没有监听消息，那么当所有任务执行完毕（包括计数器）后，他就会退出。

9.web worker中可以使用什么  
 1)self自身引用  
 2)可以使用JavaScript的全局对象：JSON、Date()、Array  
 3)location对象，但是其属性都是只读的，改了也影响不到调用者  
 4)navigator对象  
 5)setTimeout()、setInterval()及其对应清除方法  
 6)addEventListener()、removeEventListener()  
 7)最后web worker还支持sub worker和共享worker，这方面没有太仔细看，浏览器兼容性也不讨理想，有兴趣同学可以上网搜索研究一下。

10.web worker 弱点：  
 1)在worker中不能使用window对象和docuemnt对象（dom对象），即：不能在主、子线程中共享dom操作。  
 2)不能跨域加载work的js(在使用work的构造方法时)  
 3)web worker只能用来加载同域下的json数据，而这方面ajax已经可以做到了，而且效率更高更通用。还是让Worker做它自己擅长的事吧。