zoukankan      html  css  js  c++  java
  • Html5之web workers多线程

    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.上面的样例最好放到server上执行。(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做它自己擅长的事吧。

  • 相关阅读:
    二分图 洛谷P2055 [ZJOI2009]假期的宿舍
    并查集 洛谷P1640 [SCOI2010]连续攻击游戏
    贪心 洛谷P2870 Best Cow Line, Gold
    贪心 NOIP2013 积木大赛
    快速幂 NOIP2013 转圈游戏
    倍增LCA NOIP2013 货车运输
    树形DP 洛谷P2014 选课
    KMP UVA1328 Period
    动态规划入门 BZOJ 1270 雷涛的小猫
    KMP POJ 2752Seek the Name, Seek the Fame
  • 原文地址:https://www.cnblogs.com/liguangsunls/p/6717819.html
Copyright © 2011-2022 走看看