初识 — Web Worker

Web Worker — 基础知识

  1. Web Worker是 运行在后台的javascript,也就是说worker其实就是就一个js文件对象,worker可以让他所包含的js代码运行在后台

  2. 特点:

  • 充分利用多核CPU的优势
  • 对多线程支持非常好
  • 不会影响页面的性能
  • 不能访问web页面和DOM API,worker文件里的变量都属于Worker,所以在worker文件里不支持 document 形式
  • 所有的主流浏览器均支持web worker,除了较老Internet Explorer版本
  1. Worker提供API
  • 检测当前浏览器是否支持Worker

     在浏览器的控制台输入  typeof(Worker) !== "undefined";  
     输出 true 证明浏览器支持 Worker
    
  • 创建Worker文件

     创建普通的 JS 文件,都可以用于 Web Worker 文件
    
  • 创建Web Worker对象

      var worker = new Worker("myTime.js");
    
      参数就是在第二步创建的js文件的路径
    
  • worker事件

    • onmessage事件

      用于监听 Web Worker 传递消息,通过回调函数接收传递的消息,
      通过回调函数的事件对象data 属性可以获取传递的消息

    • postMessage()

      注意:postMessage() 只写在创建的Worker文件中
      通过postMessage() 方法传递消息内容
      worker.postMessage( "worker success");

    • worker.terminate();

      在HTML页面中,通过调用 Web Worker 对象的 terminate( ) 方法终止 Web Worker。

使用步骤
  • 创建WebWorker对象
  • Worker对象
  • onmessage事件,当执行postMessage事件时会触发
  • postMessage()方法
  • terminate()方法
例子
<body>
   <button id="start">开始计时</button>
   <button id="stop">结束计时</button>
   <br/>
   <div id="showTime"></div>    
</body>

<script type="text/javascript">
    var show=document.getElementById("showTime");
    var start=document.getElementById('start');
    var stop=document.getElementById('stop');
    start.onclick=function(){
        if(typeof(Worker) !== "undefined"){
            worker=new Worker("worker.js");
            worker.onmessage=function(event){
                show.innerHTML=event.data;
            };
        }else{
            alert("你的浏览器不支持");
        };
    };
    
    stop.onclick=function(){
        worker.terminate();
    };
</script>    
worker.js 文件
var time=0;
(function _start(){
   time++;
   postMessage(time);
   t=setTimeout(_start,1000);
})();             

未完待续······

推荐阅读更多精彩内容