前端学习日志1021

最新推荐文章于 2022-07-19 21:43:07 发布

不误正夜

最新推荐文章于 2022-07-19 21:43:07 发布

阅读量95

点赞数

分类专栏：前端学习文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_54411455/article/details/120893797

版权

前端学习专栏收录该内容

30 篇文章 0 订阅

订阅专栏

Web Worker

我们都知道JavaScript这个语言在执行的时候是采用单线程进行执行的，也就是说在同一时间只能做一件事，这也和这门语言有很大的关系，采用同步执行的方式进行运行，如果出现阻塞，那么后面的代码将不会执行，HTML5则提出了web Worker标准，表示JavaScript允许有多个线程，但是子线程完全受主线程的控制，切子线程不能操作DOM，只有主线程可以操作DOM，所以以主线程为主的单线程执行原理成了JavaScript这门语言的核心。

2、Web Worker

下面我们来说说web worker到底是什么，简单明了的一句话其实就是在Javascript单线程执行的基础上，开启一个子线程，进行程序处理，而不影响主线程的执行，当子线程执行完毕之后再回到主线程上，在这个过程中并不影响主线程的执行过程。
举个例子：
传统情况下，执行下面的代码后，整个页面都会被冻结，由于javascript是单线程处理，如下代码已经完全组塞了后续的执行：

while(true){ }

如果换一种方式，我们通过开启一个新的线程来执行这段代码，将他放在一个单独的worker.js文件中,在主线程执行以下代码。

var worker = new Worker("worker.js")

创建线程
在创建线程的时候需要给实例化的Worker传入唯一一个参数，指向一个javascript文件资源的url或者Blob对象（Blob对象就是一个包含有只读原始数据类文件对象），调用这个构造函数之后，一个线程就被创建了，如下：
var worker = new Worker("worker.js"); var worker = new Worker(blob);
线程通信
Web Worker的基本原理就是在当前的主线程中加载一个只读文件来创建一个新的线程，两个线程同时存在，且互不阻塞，并且在子线程与主线程之间提供了数据交换的接口postMessage和onmessage。来进行发送数据和接收数据。其数据格式可以为结构化数据（JSON等）；
当我们创建了一个worker实例之后，我们可以通过如下两种方式来发送数据：

var worker = new Worker("worker.js");  //实例化对象

//第一种传递方式
worker.postMessage(message,taransferList);

//第二种传递方式
worker.postMessage({ 
     operation: "list_all_users", 
     //ArrayBuffer object 
     input: buffer, 
     threshold: 0.8, 
}, [buffer]);

如果要想一个专用线程发送数据，那么我们需要使用线程中的 postMessage 方法。专用线程不仅仅支持传输二进制数据，也支持结构化的 JavaScript 数据格式。在这里有一点需要注意，为了高效地传输 ArrayBuffer 对象数据，需要在 postMessage 方法中的第二个参数中指定它。

同时我们如果需要接收某个线程传来的数据可以使用onmessage来进行接收，方法如下：
//方法一
worker.onmessage = function(event){
    var data = event.data;        //通过event.data来获取传入的参数
}
//方法二
worker.addEventListener("message",target);