• 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做它自己擅长的事吧。

  • 相关阅读:
    动态SQL语句
    Mybatis配置和基于配置的使用
    JQuery封装的ajax、ajax上传文件、JSON对象
    Jsp生命周期、Jsp的使用、JSP隐式对象、EL表达式、JSTL
    原生Ajax
    Servlet上传文件、会话跟踪、Cookies和session的使用及其常用方法
    ResponseBodyAdvice拦截Controller方法默认返回参数,统一处理返回值/响应体
    钉钉机器人
    花瓶安装和使用
    方法入参检测工具类 spring自带org.springframework.util.Assert 通用类
  • 原文地址:https://www.cnblogs.com/liguangsunls/p/6717819.html
Copyright © 2020-2023  润新知