H5 web worker线程的使用

H5 web worker是执行线程,作用是用来执行耗时的js脚本,但又不完全是线程,为什么这样说呢,因为和真正的线程有些不一样,系统真正的线程是可以

用来执行任何任务的,但h5的worker底层虽然也是线程,却被限制了,只能做 特定的任务。不能用来操作DOM和BOM,浏览器禁止限制了。


注意:因为worker 的限制,所以创建的worker线程只能用来执行耗时的,跟DOM.BOM没有差点关系的js代码。


那这个怎么办呢,js程序多多少少总会和DOM有点关系,可以和UI主线程配合来完成一些相对跟DOM关联很小的操作。

把耗时操作的js单独写一个文件,专门用worker线程去执行,在UI主线程执行的js脚本操作跟DOM相关的工作,然后在

UI主线程执行的js脚本中创建一个worker工作线程,接着调用一个方法:postMessage();把数据传递到worker线程,在

耗时的文件里通过onmessage事件去判断ui主线程是否已传递了数据和消息过来通知开始执行脚本。 


onmessage事件解释:只要UI主线程发送了消息,就会触发这个事件



具体使用方法:


首先在UI线程执行的js文件中创建一个工作线程:

  

UI主线程执行的js脚本           

<script>

       var worker = new Worker(js/1.js)     //参数为要执行的js文件url

       worker.postMessage("string")       

       //参数就是要传递的数据,字符串格式,当然如果在1.js文件中不需要用到dom或者UI主线程执行的js脚本中的数据,也可以省略这步,从第一步中直接去执行

</script>


worker线程执行的js脚本

<script>

      console.log("worker线程待命中......")     /

      onmessage=function(e){               //UI线程发来消息触发事件,才开始执行,此事用全局window调用,所以没有前缀,

          var n=e.data                               //从事件对象data中获取传递过来的消息及数据;

             耗时的js代码......

      }      

       //还是那句话,如果在这个文件中不需要用到dom中或者UI主线程执行的js脚本中的数据,

       //这个可以直接是耗时程序,不需要onmessage事件和数据消息接收的步骤,让worker线程直接执行

</script>


反过来UI主线程要得到耗时操作后的结果的话,就是在耗时文件中用postMessage()方法发送数据,同样用window调用;如下:

     postMessage(string)    //参数为执行后的结果数据,字符串格式;


然后到UI主线程文件中用onmessage事件判断耗时操作文件是否执行完传递过来了数据,还是有消息传递过来就会触发事件
从事件data对象中获取结果数据和消息

w6.onmessage=function(e){

    var  a=e.data

}


也可以同时创建 多跟worker线程去执行多个耗时文件,返回的数据触发onmessage事件时会自动根据哪根线程执行的则

返回给哪个线程对象,因为创建线程对象时要用不同的变量保存worker对象,UI线程这边接收消息又需要把onmessage事件

绑定worker线程对象,所以多个线程也不会把消息返回错乱

















猜你喜欢

转载自blog.csdn.net/FarmerXiaoYi/article/details/76945057