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 线程无法读取本地文件,它所加载的脚本,必须来自网络。

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

你可能感兴趣的:(Web Worker学习总结)