web Worker使js实现‘多线程’？

      大家都知道js是单线程的，在上一段js执行结束之前，后面的js绝对不会执行，那么为什么标题说js实现‘多线程’，虽然说加了引号，可是标题也不能乱写不是，可恶的标题党？

      姑且抛开标题不说，先说我们经常会遇到的一个问题，假如我们页面中有很多js要执行，比如页面加载或点击某个按钮就会触发js,最坏的结果就是在很长的一段时间内用户都不能进行任何操作，所以，退出，关闭。。

     当然上面说的有一些夸张，但是比如在移动端，我们都会想办法不停的提高页面性能，在某些情况下如果能有类似多线程的解决办法就更好了~

     html5 提出了一个名词：web Worker,按照官方的解释：web worker 是运行在后台的 JavaScript，不会影响页面的性能。也就可以理解为两段js同时执行，是不是也可以称呼为‘多线程’了呢，所以看标题……

     今天主要来看一下基本用法：

     首先是我们的前台页面，假设我们有一段计算的代码比较耗时，这时候我们需要后台的一个cal.js来计算。

     在我们的前台页面，我们这样写：

     var worker=new Worker(cal.js'),

          i=100000000,

          ele=document.getElementById(‘btn’);

     //当点击某个按钮时，执行某个计算

          ele.addEventListener(‘click’,function(){

                 worker.postMessage(i);

                 worker.onmessage=function(e){

                          alert(e.data)

                 }

          },false)

   

 

在cal.js中我们就进行计算

      onmessage=function(e){

              var data=e.data;

              for(i=0;i<data;i++){

                    //计算的代码

             }

            postMessage(data)

     }

 

这样一个简单的worker就实现了，通过点击按钮，后台的cal.js执行计算，而不会影响前台的操作；

简单总结一下，worker方法主要包括：

前台页面:

• 通过 new Worker( js) 加载一个JS文件来创建一个worker并返回一个worker实例。
• 通过worker.postMessage( data ) 方法来向worker发送数据。
• 通过worker.onmessage方法来接收worker发送过来的数据。
• worker.terminate() 可以终止worker

 

后台js：

• 通过postMessage( data ) 方法来向主线程发送数据。
• 绑定onmessage方法来接收主线程发送过来的数据。