【js】js多线程解决方案Web Worker简单说明与实例演示：

文章目录

• • • • 一、文档：
      • 二、什么是Web Worker ?
      • 三、使用 Web Worker 注意点：
      • 四、相关API：
      • 五、使用语法：
      • • • 【1】创建Worker线程：
          • 【2】主线程与子线程数据通信：
          • 【3】 Worker线程
          • 【4】 错误处理
          • 【5】 关闭 Worker
          • 六、同一个网页的Web Worker
          • 七、Worker 属性和方法总结
          • • • 【1】Worker构造函数方法：
              • 【2】子进程属性方法：

                ---

                一、文档：

                使用 Web Workers - Web API 接口参考 | MDN

                
                （图片来源网络，侵删）

                js多线程解决方案Web Worker简单说明与实例演示_基础知识_脚本之家

                JS多线程API webworker应用场景有哪些_基础知识_脚本之家

                
                （图片来源网络，侵删）

                二、什么是Web Worker ?

                1. JavaScript 语言是采用单线程模型，也就是任务只能在一个线程上完成，一次只能做一件事，前面任务没执行完，后面的任务只能排队等待，由于多核 CPU 的出现，单线程带来很大不便，无法充分发挥计算机的能力。
                2. Web Worker 就是为了 javascript 创造多线程而生的，主线程创建 worker 子线程，将一些任务分配给后台运行，等到子线程完成计算任务，再把结果返回给主线程，好处是计算密集型或高延迟的任务被 worker 负担了，主线程就会很流畅。网页加载展示可分为两部分：主进程也叫 UI 进程，子进程也叫工作进程，子进程不能控制 UI 进程，只能进行数据交互。
                3. Web Worker 子线程一旦创建成功，就会独立于其他脚本始终运行，不会被主线程上活动打断。这样有利于随时响应主线程的通信。但是这也造成 Worker 比较耗费资源，不应该过度使用，使用完毕之后应该关闭。

                三、使用 Web Worker 注意点：

                1. 同源限制：分配给 Worker 线程运行的脚本，必须与主线程的脚本文件同源，否则存在跨域问题。
                2. DOM限制：Worker 线程所在的全局对象，与主线程不同，无法读取主线程的dom对象，也无法使用 window、document、parent 这些对象。但是Worker线程可以使用navigation和location对象。
                3. 数据通信：Worker 线程与主线程不在一个环境，不能直接通信，必须通过消息来完成数据通信。
                4. 脚本限制：Worker 线程不能执行 window 的 alert、confirm 方法。但是可以通过ajax发送请求。
                5. 文件限制：Worker线程无法读取本地文件，子线程加载的脚本必须来自网络。

                四、相关API：

                1.Worker:构造函数，加载分线程执行的js文件

                2.Worker.prototype.onmessage:用于接受另一个线程的回调函数

                3.WorKer.prototype.postMessage:向另一个线程发送消息

                【不足】worker内代码不能操作DOM，不能跨域加载JS，不是每个浏览器都支持这个新特性

                var input = document.getElementById('number')
                function computed(n){
                  return n
                  var number = input.value
                  var result = computed(number)
                  alert(result)
                }
                
                  var number = input.value
                  //创建一个worker对象
                  var worker = newWorker('./js/worker.js')
                  console.log(worker)
                  //向分线程发送消息
                  worker.postMessage(number)
                  console.log('主线程向分线程发送数据：'+number)
                  //绑定接受消息的监听
                  worker.onmessage = function(event){
                      console.log('主线程接受分线程返回的数据：'+event.data)
                  }
                }
                //worker.js
                function computed(n){
                    returnn
                    var number = event.data
                    console.log('分线程接受主线程发送的数据：'+number)
                    //计算
                    var result = computed(number)
                    postMessage(result)
                    console.log('分线程向主线程返回数据：'+number)
                }
                 
                 console.log("支持Worker线程")
                }else{
                 console.log("不支持Worker")
                }
                 |
                 console.log("接收到消息",res.data)
                 this.postMessage("我收到消息了")
                }
                 |
                 console.log("主线程收到消息：",res.data)
                }
                
                 console.log("res",res.data)
                })
                //写法二
                addEventListener("message",function(res){
                 this.console.log("1",res.data)
                })
                
                 console.log('e',e)
                }
                //写法二
                myWorker.addEventListener("error",function(e){
                 console.log("e",e)
                })
                
                  console.log("接收参数",res.data)
                }
                 name : 'myWorker'});