web worker总结

序:js 是单线程单进程模式,所有任务只能在一个线程上面顺序执行。在存在高计算的代码运行时,会阻带掉页面的相关操作。所以需要Web Worker创建子进程进行高计算的代码运行,并且将计算结果回传给主进程。


基本使用:

    var worker = new Worker('xxx.js');

    主进程

    worker.postMessage();    // 发消息

    worker.onmessage = function(event){    //接消息

        console.log(event.data)

    }

    worker.terminate()    // 关闭

worker.onerror(funtion(){}) //   worker.addEventListener('error',function(event){})   // 监听错误

    worker线程(子线程)

    self.postMessage()    // 发消息

    self.addEventListener('message',function(event){    // 接消息

         console.log(event.data)

    },false)

    self.close() //关闭

    self.addEventListener('error',function(event){})   // 监听错误

    importScripts('xxxx1.js','xxxx2.js')   // 加载其他子文件


数据通信:

    1、可以传文本也可以是对象

    2、传值而不是传址

    3、通信运行机制:通信内容串行化为字符串

    4、针对传送二进制数据优化,主进程直接转移数据,不进行拷贝。,worker.postMessage(arrayBuffer,[arrayBuffer]); 

同页面Web Worker



整体操作:


注意事项:

    1、同源资源。Worker线程运行的脚本文件必须与主进程的脚本文件同源    

    2、DOM限制。全局对象无法读取window、parent、document.可以读取navigator、location 

    3、通信联系。Worker线程与主线程不在一个上下文

    4、脚本限制。Worker线程不能执行 alert() 和 confirm(),可以使用 XMLHttpRequest对象

    5、文件限制。Worker线程无法读取本地文件

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 2019/8/15 概述Web Worker 就是运行在 后台 的JS,不会影响页面的性能!!!!Web Wor...
    甜柚小仙女阅读 1,534评论 0 0
  • 作者:阮一峰www.ruanyifeng.com/blog/2018/07/web-worker.html 概述 ...
    grain先森阅读 4,738评论 0 1
  • 一、概述 JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事。...
    零星小雨_c84a阅读 7,196评论 0 2
  • 一、概述 JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事。...
    Reusdong阅读 2,990评论 0 0
  • 介绍web worker HTML5提供得,运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能...
    带刀打天下阅读 5,135评论 0 3