Web Worker学习总结

2019/8/15

1. 概述

   Web Worker 就是运行在 后台 的JS，不会影响页面的性能！！！！
   Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。

2. Web Worker多线程与JS单线程

   • JS单线程:一个浏览器进程中只有一个JS的执行线程，同一时刻只有一段代码在运行。但浏览器有很多线程，当JS线程在执行时，浏览器根据需要可以开多个线程进行处理。
   • 栈：JS主线程的任务放在栈中，每一个任务成为一个帧，每执行一个任务，就将这个帧从栈顶弹出(先进后出)
   • 队列：当栈为空时，就会从队列中取出一个任务处理（先进先出）
   • Event Loop：任务队列，当用户触发某个事件时，相关回调函数进入任务队列，在主线程空闲时，就会调度“任务队列”里第一个待处理任务。但是，对于定时器，当到达其指定时间时，才会把相应任务插到“任务队列”尾部。
     Event Loop 的一个特性是永不阻塞。I/O 操作通常是通过事件和回调函数处理。所以，当应用XHR 等异步请求返回时，其仍能处理其它操作（如用户输入）

3. Web Worker限制

（1）同源限制
分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。
（2）DOM 限制
Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。
（3）通信联系
Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。
（4）脚本限制
Worker 线程不能执行alert()方法和confirm()方法，但可以使用 AJAX 请求。
（5）文件限制
Worker 线程无法读取本地文件，它所加载的脚本，必须来自网络。

4. Web Worker用法

• 主线程

  1. 创建Worker

     var worker = new Worker("worker.js",{name:'myworker'})
     self.name    //myworker
     

  2. 发送消息

      worker.postMessage(data,args)   //向 Worker 线程发送消息。
     

  3. 接收消息

       worker.onmessage   //发送过来的数据在event.data属性中。
       worker.onmessage  = function(event){//处理并渲染数据}
     

  4. 错误处理

       worker.onerror = function(event){处理错误}
     

  5. 关闭Worker

      worker.terminate()
     

• Worker 线程

  1. 发送消息以及接收消息

      1.addEventListener('message', function (e) {
             postMessage('You said: ' + e.data);
         }, false)     
      2.self.addEventListener('message', function (e) {
            self.postMessage('You said: ' + e.data);
         }, false) 
      3.self.onmessage = function(event){
            self.postMessage('You said: ' + e.data);
          }
     

  2. 在 Worker 内部关闭自身

      self.close()
     

  3. 加载JS脚本

      self.importScripts(’'123.js','456.js')
     

  4. Worker线程内部也可以创建Worker线程，方法同上。（只有 Firefox 浏览器支持)

• 实例：Worker线程轮询服务器状态（转载自http://www.ruanyifeng.com/blog/2018/07/web-worker.html）

   function createWorker(f) {
       var blob = new Blob(['(' + f.toString() +')()']);
       var url = window.URL.createObjectURL(blob);
       var worker = new Worker(url);
       return worker;
   }
  
    var pollingWorker = createWorker(function (e) {
    var cache;
    function compare(new, old) { ... };
  
     setInterval(function () {
           fetch('/my-api-endpoint').then(function (res) {
      var data = res.json();
       if (!compare(data, cache)) {
           cache = data;
           self.postMessage(data);
       }
     })
    }, 1000)
   });
  
    pollingWorker.onmessage = function () {
         // render data
     }
     pollingWorker.postMessage('init');