Web Worker学习总结

2019/8/15

概述
Web Worker 就是运行在后台的JS，不会影响页面的性能！！！！
Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。
Web Worker多线程与JS单线程
- JS单线程:一个浏览器进程中只有一个JS的执行线程，同一时刻只有一段代码在运行。但浏览器有很多线程，当JS线程在执行时，浏览器根据需要可以开多个线程进行处理。
- 栈：JS主线程的任务放在栈中，每一个任务成为一个帧，每执行一个任务，就将这个帧从栈顶弹出(先进后出)
- 队列：当栈为空时，就会从队列中取出一个任务处理（先进先出）
- Event Loop：任务队列，当用户触发某个事件时，相关回调函数进入任务队列，在主线程空闲时，就会调度“任务队列”里第一个待处理任务。但是，对于定时器，当到达其指定时间时，才会把相应任务插到“任务队列”尾部。
  Event Loop 的一个特性是永不阻塞。I/O 操作通常是通过事件和回调函数处理。所以，当应用XHR 等异步请求返回时，其仍能处理其它操作（如用户输入）
Web Worker限制

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

Web Worker用法

主线程

创建Worker

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

发送消息

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

接收消息

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

错误处理

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

关闭Worker
```
 worker.terminate()
```

Worker 线程

发送消息以及接收消息

 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);
     }

在 Worker 内部关闭自身
```
 self.close()
```

加载JS脚本

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

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');

最后编辑于：2019.08.15 20:46:25

Web Worker学习总结

概述

Web Worker多线程与JS单线程

Web Worker限制

Web Worker用法

主线程