H5 Web Workers

一，web worker介绍
1.javaScript是单线程的。

2.JavaScript的单线程机制会带来一个问题，当有一些非常复杂的任务需要处理时，页面不得不需要等待任务处理完成才能响应用户的操作，也就是说页面被阻塞了，这对于页面的响应及用户体验都会带来一些负面的影响。

3.为了解决这个问题，同时也是为了利用多核CPU的计算能力，HTML5提出了Web Worker标准，允许JavaScript创建多个线程。

4.简单来说Web Worker就是一个运行在后台的JavaScript线程，并且不会影响页面的响应。

5.Web Worker 可以分为两种不同线程类型，一个是专用线程 Dedicated Worker，一个是共享线程 Shared Worker。

二，web worker的限制
1.子线程由js引擎管理，运行在一个全新的环境WorkerGlobalScope下，因此web worker有几点限制。
Web Worker无法访问DOM节点；
Web Worker无法访问全局变量或是全局函数；
Web Worker无法调用alert()或者confirm之类的函数；
Web Worker无法访问window、document之类的浏览器全局变量。

三，web worker语法

1	let worker= new Worker('worker.js')

//主线程
var worker = new Worker('worker.js');
worker.onmessage = function (e) {
    var data = e.data;
}
var messageData = {
    message: 'hello worker!'
};
worker.postMessage(messageData);

//子线程
self.onmessage = function(e) {
    var messages = e.data;  // e.data为{message: 'hello worker!'}
    var workerResult = {};
    // do something
    ...
    postMessage(workerResult);
}

文章作者: Mr. Fortunate

文章链接: https://www.fortunate.cool/2022/04/02/H5%20Web%20Workers/

前端