web Worker

李狗蛋蛋
258 阅读2分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

web Worker

1.简介

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。 -阮一峰博客

2.注意点

需要注意的是

worker线程一旦新建成功的话，主线程上面的活动，比如alert，点击操作，都不会打断worker线程的，这样有利于随时响应主线程的通信，但是，这也造成了worker比较耗费性能

需要注意点：

1.同源限制

worker受浏览器的同源策略影响，worker线程运行的程序必须与主线程的js同源

2.DOM限制

worker所在的全局对象与主线程不一样，无法读取主线程所在网页的DOM元素，例如window，document

3.通信联系

worker和主线程不在同一个上下文的环境中的话，它们不能直接通信

4.脚本限制

worker不能执行alert()和confirm()方法

5.文件限制

worker不能读取本地文件

3.worker线程

我们在worker线程中打印this对象

WeChat0867843f5c87e1238bfccefc6fb980cf.png

我们得到了一个对象

与主线程的window相同，在worker线程中得到的对象也有他的方法和属性，这时候我们就可以使用这个“this”对象来操作worker线程

接受传过来的参数

// 监听发过来的数据
onmessage = (parms) => {
  console.log(parms);
  
}

在worker线程中我们使用这样的方法来监听传过来的参数

发送参数

// 在worker中发送数据给主线程
postMessage('这是我给主线程发送的数据')

在worker线程中结束任务

// 在当前worker线程中立即结束任务
close();

4.主线程

1.创建worker线程


var worker = new Worker("worker线程js文件路径");

接受传过来的参数

    // 主线程通过worker.onmessage指定监听函数，接收子线程发回来的消息。
    worker.onmessage = function(event) {
      console.log(event.data);
    };

给worker线程发送参数

worker.postMessage(this.msg);

在主线程结束worker线程

    // 此刻立刻结束worker；
    worker.terminate();

代码

此处提上vue代码

主线程(vue文件)

<template>
  <div>{{msg}}</div>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { log } from "util";
@Component
export default class workerTest extends Vue {
  msg: string = "这个页面是用来测试worker的";
  // created 生命周期函数
  created() {
    console.log("created");
    // 测试worker方法
    var worker = new Worker("/static/worker/test.js");
    console.log("执行了created方法");
    // 主线程调用worker.postMessage()方法，向 Worker 发消息。
    worker.postMessage(this.msg);
    // 主线程通过worker.onmessage指定监听函数，接收子线程发回来的消息。
    worker.onmessage = function(event) {
      console.log(event.data);
    };
    // 此刻立刻结束worker；
    worker.terminate();
  }
}
</script>

<style lang="scss">
</style>

worker线程（js文件）

// 监听发过来的数据
onmessage = (parms) => {
  console.log(parms.data);
  // 此时在worker线程中立即结束worker
  close();
  postMessage('这是我给主线程发送的数据')
}

总结

worker线程总的来说就是使js从单线程变成了多线程，不过worker不能多开，会耗费电脑性能，多线程使js的处理变得更加效率化

avatar
文章
阅读
粉丝