Html5 Worker

Html5 Worker

Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。

  1. 如何使用Worker

    • 主页面

      1. 通过在主页面的js中创建 Worker实例来创建新线程.
      2. 通过postMessage(data)启动线程,并传递参数。
      3. 通过onmessage(data)回调函数接收数据,并在页面呈现。
      4. 可通过 terminate() 方法终止线程,被终止的Worker对象不能被重启或重用。
      //主页面
      var worker = new Worker("js/worker.js"); //创建实例同时必须传入需要在新线程中执行的代码路径
      worker.postMessage(num);    //传递参数并启动线程
      worker.onmessage = function(event){     //线程结束之后回调
              console.log(event.data);
              document.getElementById("sum").innerHTML = event.data;
          }
    • worker.js页面
      1. 通过onmessage(data) 等待响应主页面的调用。
      2. 实现运算
      3. 将运算结果通过postMessage(data)发送回主页面,触发主页面onmessage回调

        onmessage = function(event){ //响应主页面调用,并通过参数接收主页面传递的数据
        var sum = fibonacci(event.data);
        console.log(event);
        postMessage(sum); //将运算结果发送至主页面,并触发回调
        };
  2. 检测可用性

    检测浏览器是否支持Worker

    if(typeof(Worker)!=="undefined"){
        //浏览器支持Worker
    }else{
        //浏览器不支持支持Worker
    }
  3. 限制与支持

    • 限制
      1. Web Worker无法访问DOM节点;
      2. Web Worker无法访问全局变量或是全局函数;
      3. Web Worker无法调用alert()或者confirm之类的函数;
      4. Web Worker无法访问window、document之类的浏览器全局变量;
    • 支持
      1. 可以加载一个JS进行大量的复杂计算而不挂起主进程,并通过postMessage,onmessage进行通信
      2. 可以在worker中通过importScripts(url)加载另外的脚本文件
      3. 可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
      4. 可以使用XMLHttpRequest来发送请求
      5. 可以访问navigator的部分属性
  4. 案例

    1. fibonacci 计算
    2. 仿抢票系统
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页