WebWorker(工作线程)笔记

最新推荐文章于 2024-04-09 16:54:13 发布
最新推荐文章于 2024-04-09 16:54:13 发布
阅读量1k 收藏 1
点赞数
分类专栏： 读书笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alagisme/article/details/76021032
版权

WebWorker简介

  1. 产生原因：js是单线程，比如当js运行一段代码时，如果这段代码没有运行完成，是无法做其他的操作。随着HTML要处理的任务越来越重，单线程有时满足使用要求；
  2. 概念：Web Worker允许开发人员编写能长时间运行而不被用户中断的后台程序，去执行事务或者逻辑，并同时保证页面对用户的及时响应。简言之，即允许js创建多个线程，但子线程完全受主线程控制，而且子线程不能操作DOM；
  3. 特点：能够长时间运行（响应），理想的启动性能以及理想的内存消耗；
  4. 使用说明：
    • 无法访问DOM；
    • 无法访问全局变量或全局函数（只能访问当前js中的函数）；
    • 无法调用alert或者confirm等函数；
    • 无法访问window、document之类的浏览器全局变量;
    • 可以使用setTimeout、setInterval;
    • 可以使用XMLHttpRequest对象来做Ajax通信。
    • 通过new Work(url)来创建work对象，加载的js文件不能跨域;
    • 如果使用了WebWorker，必须将html页面部署到服务器上;

WebWorker原理

传统的线程可解释为轻量级进程，它和进程一样有独立的执行控制，一般情况下由操作系统负责调度。在HTML5中的多线程是指允许web程序并发的执行js脚本，每个脚本执行流都称为一个线程，彼此间相互独立，并由浏览器中的js引擎负责管理

WorkerGlobalScope全局上下文

主页面html执行的全局上下文是window，而WebWorker执行的全局上下文是WorkerGlobalScope（不知道是啥），所以无法访问window对象，其属性与window中的属性类似；WorkerGlobalScope作用域下常见的属性如下
1. self：表示对WorkerGlobalScope对象本身的引用，专用线程中执行结果为DedicatedWorkerGlobalScope，共享线程中执行结果为SharedWorkerGlobalScope；
2. location：表示用于初始化这个工作线程的脚本资源的绝对 URL；
3. close：关闭当前线程，与terminate作用类似。步骤：删除这个工作线程事件队列中的所有任务，设置 WorkerGlobalScope 对象的 closing 状态为 true （这将阻止以后任何新的任务继续添加到事件队列中来）；
4. importScripts：可以通过importScripts批量加载js文件；
5. XMLHttpRequest：通过该对象发送Ajax请求；
6. setTimeout/setInterval：用法与window中一样；
7. addEventListener(onmessage)/postMessage：addEventListener方法可以代替onmessage

共享线程（Shared Worker）和专用线程（Dedicated Worker）

区别：
1. 专用线程会使用隐式的 MessagePort 实例，MessagePort对象支持 HTML5 中多线程提供的所有功能。当专用线程被创建的时候，MessagePort 的端口消息队列便被主动启用;而共享线程必须显式使用。
2. 创建方法：专用线程只有URL一个参数；而共享线程创建是如果提供了第二个参数，那么这个参数将被用于作为这个共享线程的名称。
3. Woker对象和SharedWorker对象
这里写图片描述
这里写图片描述

//专用线程
var worker=new Worker('worker.js');
worker.onmessage=function(){};
worker.postMessage('123');
worker.postMessage(data,[data]);//如果data为ArrayBuffer数据时，需要在第二个参数中指定它以提高传输效率；

//共享线程
var worker=new SharedWorker('SharedWorker.js','myShareWorker');
worker.port.addEventListener('message',function(e){});
worker.port.start();//在SharedWorker中使用addEventListener时，必须用worker.port.start()来启动这个端口
worker.port.postMessage('123');

WebWorker之常用API

worker线程从上到下同步运行它的代码，worker线程从上到下同步运行它的代码，如果worker注册了message事件处理程序，只要其有可能触发，worker就一直在内存中，不会退出，所以通信完毕后得手动在主线程中terminate或者子线程中close掉，但如果worker没有监听消息，那么当所有任务执行完毕（包括计数器）后，他就会退出。

  • 1. postMeassge(data):
    子线程与主线程互相传递消息使用的方法 

  • //var worker =new Worker('worker.js');
//主线程传消息给子线程
worker.postMessage(data1);

//在worker.js文件中，子线程传消息给主线程
postMessage(data2);

  • 2. terminate():
    主线程中终止worker，此后无法再利用其进行消息传递。注意：一旦terminate后，无法重新启用，只能另外创建

  • //var worker =new Worker('worker.js');
worker.terminate();

  • 3. onmessage:
    主线程、子线程接收消息。可以用addEventListener代替

  • //var worker =new Worker('worker.js');
//主线程接收来自子线程的消息
 worker.onmessage=function(e){
    var data=e.data;    //e为MessageEvent对象
};

//在worker.js文件中，子线程接收来自主线程的消息
onmessage=function(e){
    var data=e.data;
};

  • 4. MessageEvent：接收消息时用到，消息的实际传递内容为e.data;
  • 5. message:当有消息发送时，触发该事件。且，消息发送是双向的，消息内容可通过data来获取;
  • 6. error:出错处理。且错误消息可以通过e.message来获取。

  • //var worker =new Worker('worker.js');
worker.onerror = function(e){
    //打印出错消息
    console.log(e.message);
    //中断与子线程的联系
    worker.terminate();
}

    WebWorker优缺点：

    优点：
    1. 可以加载一个JS进行大量的复杂计算而不挂起主进程，并通过postMessage，onmessage进行通信
    2. 可以在worker中通过importScripts(url)加载另外的脚本文件
    3. 可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
    4. 可以使用XMLHttpRequest来发送请求
    5. 可以访问navigator的部分属性

    缺点：
    1. 不能跨域加载JS（html主页面可以）
    2. worker内代码不能访问DOM
    3. 各个浏览器对Worker的实现不大一致，例如FF里允许worker中创建新的worker,而Chrome中就不行

    WebWorker应用

  • 1. 后台计算：

  • /**
创建一个共享线程用于接收从不同连接发送过来的指令,指令结果处理完成后将结果返回到各个不同的连接用户
*/
//Html文件
<!Doctype html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>Calculate Number</title> 
    </head>
    <body>
        <div> The last common multiple and greateset common divisor is :
        <p id='result'>Please wait,computing......</p>
        </div>
<script type='text/javascript'>
    var worker=new Worker('js/webworker.js');
    worker.onmessage=function(e){//主线程接收来自子线程的消息
        document.getElementById('result').innerHTML=e.data;
    }
    worker.postMessage({first:100,second:50});//主线程向子线程发消息
    worker.onerror=function(){
            alert('线程出错！');//异常处理
        }
</script>
    </body>
</html>

//webworker.js文件
onmessage=function(e){  //子线程接收来自主线程的消息
    var data=e.data;
    Calculate(data.first,data.second);
}

function Calculate(first,second){
    var common_divisor=divisor(first,second);
    var common_multiple=multiple(first,second);
    postMessage("Work done! " +
"The least common multiple is "+common_divisor
 +" and the greatest common divisor is "+common_multiple); //子线程向主线程发消息
}

function divisor(a, b) {
    if (a % b == 0) return b;
    else return divisor(b, a % b);
 }

 function multiple( a,  b) {
    var multiple = 0;
    multiple = a * b / divisor(a, b);
    return multiple;
 }

  • 2. 使用共享线程处理多用户并发连接
    由于线程的构建以及销毁都要消耗很多的系统性能，例如 CPU 的处理器调度，内存的占用回收等，在一般的编程语言中都会有线程池的概念，线程池是一种对多线程并发处理的形式，在处理过程中系统将所有的任务添加到一个任务队列，然后在构建好线程池以后自动启动这些任务。处理完任务后再把线程收回到线程池中，用于下一次任务调用。线程池也是共享线程的一种应用。 （Web2D中有专用线程实现线程池的用法，即创建4个专用线程）

  • <!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Shared worker example: how to use shared worker in HTML5</title> 

<script>
 var worker = new SharedWorker('sharedworker.js'); //创建线程
 var log = document.getElementById('response_from_worker'); 
 worker.port.addEventListener('message', function(e) { 
    log.textContent =e.data; 
 }, false); 
 worker.port.start(); //启动端口
 worker.port.postMessage('ping from user web page..'); 

 //Send user input to sharedworker 
 function postMessageToSharedWorker(input) 
 { 
     //Define a json object to construct the request 
     var instructions={
             instruction:input.value
        }; 
     worker.port.postMessage(instructions); 
 } 
</script>

</head> 
<body onload=''> 
<output id='response_from_worker'> 
    How to use shared worker in HTML5!
</output> 
    Send instructions to shared worker: 
<input type="text" autofocus            oninput="postMessageToSharedWorker(this);return false;"> 
</input> 
</body> 
</html>  

/* 
* define a connect count to trace connecting 
* this variable will be shared within all connections 
*/ 
//sharedworker.js文件
var connect_number = 0; //记录连接到这个共享线程的总
onconnect = function(e) { 
     connect_number =connect_number+ 1; 
     //get the first port here 
     var port = e.ports[0]; 
     port.postMessage('A new connection! The current connection number is ' + connect_number); 
     port.onmessage = function(e) { 
        //get instructions from requester 
        var instruction=e.data.instruction; 
        var results=execute_instruction(instruction); 
       port.postMessage('Request: '+instruction+' Response '+results +' from shared worker...'); 
 }; 
}; 

/* 
* this function will be used to execute the instructions send from requester 
* @param instruction 
* @return 
*/ 
function execute_instruction(instruction) 
{ 
    var result_value; 
    //implement your logic here 
    //execute the instruction... 
    return result_value 
}

  • 3.HTML5 线程代理

  • <!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Shared worker example: how to use delegation worker in HTML5</title> 

<script>
     var worker = new SharedWorker('delegationworker.js'); 
     var log = document.getElementById('response_from_worker'); 
     worker.onmessage = function (event) { 
     //resolve the population from delegation worker 
     var resultdata=event.data; 
     var population=resultdata.total_population; 
     var showtext='The total population of the word is '+population; 
 document.getElementById('response_from_worker').textContent = showtext; 
 }; 
</script>

</head> 
<body onload=''> 
<output id='response_from_worker'> 
    Shared worker example: how to use delegation worker in HTML5 
</output> 
</body> 
</html>

/* 
* define the country list in the whole word 
* take following Array as an example 
*/ 
var country_list = ['Albania','Algeria','American','Andorra','Angola','Antigua','....']; 

// define the variable to record the population of the word 
var total_population=0; 
var country_size=country_list.length; 
var processing_size=country_list.length; 

for (var i = 0; i < country_size; i++) 
{ 
     var worker = new Worker('subworker.js'); 
     //wrap the command, send to delegations 
     var command={command:'start',country:country_list[i]}; 
     worker.postMessage(command); 
     worker.onmessage = update_results; 
} 

/* 
* this function will be used to update the result 
* @param event 
* @return 
*/ 

function storeResult(event) 
{ 
    total_population += event.data; 
    processing_size -= 1; 
    if (processing_size <= 0) 
    { 
        //complete the whole work, post results to web page 
        postMessage(total_population); 
    } 
}

//define the onmessage hander for the delegation 
onmessage = start_calculate; 

/* 
* resolve the command and kick off the calculation 
*/ 
function start_calculate(event) 
{ 
    var command=event.data.command; 
    if(command!=null&&command=='start') 
    { 
        var coutry=event.data.country; 
        do_calculate(country); 
    } 
    onmessage = null; 
} 

/* 
* the complex calculation method defined here 
* return the population of the country 
*/ 
function do_calculate(country) 
{ 
     var population = 0; 
     var cities=//get all the cities for this country 
     for (var i = 0; i < cities.length; i++) 
    { 
         var city_popu=0; 
         // perform the calculation for this city 
         //update the city_popu 
     population += city_popu; 
     } 
     postMessage(population); 
     close(); 
}
Alagisme
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webworker 主线程和worker线程的应用
Janner668的博客
02-19 702
编程更重要的是思想，而不是API的应用 javascript采用单线程模式，所有任务只在一个线程上完成，一次只做一件事。 webworker用来为JavaScript创建多线程环境，当主线程创建worker线程后，可以将一些复杂的运算任务交由worker线程完成，此时主线程与worker线程同时运行，而且当worker运算完成之后，只需要将运行结果返回给主线程即可。 1. webworker使用时的限制 · 同源限制，主线程文件必须与worker线程文件保持同源 同源：两个文件 域名，端口号，请求协议一样
日常开发: Web Worker实现秒杀倒计时
qq_24724109的博客
07-19 1862
Web Worker实现秒杀倒计时 灵魂拷问 -> 为啥要用web worker 因为我们知道 setInterval(() => {}, 1000)代表的意思其实是最快1秒之后能执行, 而如果事件阻塞了的话 就不知道要多久我们才能执行上这个事件了, 因此如果倒计时的话,就会存在这个倒计时的时间被卡住的问题, 如果是秒杀的问题的话~问题有点严重 1. 预备知识介绍 1. 主进程和子进程之间主要通过消息进行通信 postMessage: 发送消息 -> 可以接受任何参数由父到子 或者
nw.js:直接从DOMWebWorker调用所有Node.js模块，并启用一种使用所有Web技术编写应用程序的新方式
05-11
将node-webkit重命名为NW.js 官方网站： ： 介绍 NW.js是基于Chromium和node.js的应用程序运行时。 您可以使用NW.js用HTML和JavaScript编写本机应用程序。 它还使您可以直接从DOM调用Node.js模块，并提供一种使用所有Web技术编写本机应用程序的新方式。 它是在英特尔开源技术中心创建的。 特征 用现代HTML5，CSS3，JS和WebGL编写的应用程序。 完全支持及其所有。 良好的性能：Node和WebKit在同一线程中运行：函数调用变得简单明了； 对象位于同一堆中，并且只能相互引用。 易于打包和分发应用程序。 在Linux，Mac OS X和Windows上可用。 资料下载 v0.53.0： （2021年4月27日，基于Node.js v15.14.0，Chromium 90.0.4430.93）：注意您可能需要构建
使用 Web Workers 作为setInterval的替代方案
最新发布
The limits of your knowledge are the limits of your world
04-09 462
使用 Web Workers 作为定时器的替代方案
直接从DOM / WebWorker调用所有Node.js模块，并启用一种使用所有Web技术编写应用程序的新方式。-Node.js开发
05-27
node-webkit重命名为NW.js官方网站：https://nwjs.io简介NW.js是基于Chromium和node.js的应用程序运行时。 您可以使用NW.js用HTML和JavaScript编写本机应用程序。 它还可以让您调用Node。 node-webkit重命名为NW.js官方网站：https://nwjs.io简介NW.js是基于Chromium和node.js的应用程序运行时。 您可以使用NW.js用HTML和JavaScript编写本机应用程序。 它还使您可以直接从DOM调用Node.js模块，并提供一种使用所有Web技术编写本机应用程序的新方式。 它是在英特尔开源技术中心创建的。 使用NW.js构建跨平台桌面应用程序使用node-webkit WebApp创建桌面应用程序
WebWorker解决切换标签页setInterval不准问题
weixin_46078854的博客
06-28 756
WebWorker解决切换标签页setInterval不准问题
vue3中使用Web Worker多线程（JS原味版）
06-17
用于《vue3中使用Web Worker多线程》这篇文章的项目Demo下载 文章地址：https://blog.csdn.net/weixin_42063951/article/details/125300644
JavaScript中的Web worker多线程API研究
10-25
主要介绍了JavaScript中的Web worker多线程API研究,Web worker是HTML5的API,允许网页在安全的情况下执行多线程代码,需要的朋友可以参考下
vue3中使用Web Worker多线程（TS风味版）
06-17
用于《vue3中使用Web Worker多线程》这篇文章的项目Demo下载 文章地址：https://blog.csdn.net/weixin_42063951/article/details/125300644
web worker线程
12-29
为什么使用Worker线程？ 1、不会阻塞主应用程序，但是fork进程一次只能处理一项任务。如果您有两个任务，一个将花费10秒，另一个将花费1秒，按照顺序执行，不理想的是必须等待10秒才能执行第二个任务。 2、如果一个...
socketio-shared-webworker:WebWorker线程内的Socket.io客户端
05-02
共享WebWorker中的Socket.io 在共享的Webworker中运行Socket.io，可以为多个浏览器窗口和选项卡共享一个Socket.io Websocket连接。 替换了socket.io客户端。 快速安装 npm i --save socketio-shared-webworker ...
react-便于与WebWorker通信的React组件
08-14
利用Render Props模式获得最大的灵活性以及易于使用的新Context API。 只需为Web Worker指定公共URL，您就可以访问它发送的任何消息或错误，以及postMessage处理程序。
html5中Webworkers的工作原理课件
08-13
html5中Webworkers的工作原理
WEB-WORKER进阶学习
chenhui88889的博客
06-24 209
WEB-WORKER 实用场景 密集型计算任务 (递归、计算、数据处理) 预处理请求 高频请求(心跳检测、用户行为捕捉等) 内部实现队列机制 初衷 一般做用户行为分析都会埋入锚点,当用户点击后通过AJAX向后台发送用户的操作、时间、功能等信息 在WEB-WORKER之前通过主线程发送...
解决setInterval和setTimeout越来越慢的问题
qq_44318215的博客
09-19 4353
后端返回一个时间差，前端将其格式化为xx时xx分xx秒后展示在页面上，然后每隔1s刷新一下倒计时。但定时器不准确，会变慢，本文给出5种方案解决此问题。
一文带你搞定什么是WebSocket和WebWorker
zxc123401的博客
07-01 1052
搞懂WebSocket和WebWorker
web worker实时刷新界面执行次数
dongyang1124的博客
09-13 1570
看了一大顿web worker 唯一的意识可能就是当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时web worker 在后台运行。 所以在前台为了实时刷新执行次数，就用webwork写了个代码，刷新的是bootstra...
如何debug web worker
weixin_33816300的博客
06-14 218
Web Workers 为 Web 前端网页上的脚本提供了一种能在后台进程中运行的方法。一旦它被创建，Web Workers 就可以通过 postMessage 向任务池发送任务请求，执行完之后再通过 postMessage 返回消息给创建者指定的事件处理程序 ( 通过 onmessage 进行捕获 )。 例子： <html> <he...
Webpack 下使用 web workers 及 基本原理 和 应用场景
_
03-24 2033
阅读目录 一：web workers的基本原理 二：web Workers 的基本用法 三：在webpack中配置 Web Workers 四：Web Worker的应用场景 回到顶部 一：web workers的基本原理 我们都知道，我们的javascript采用的是单线程模型，所有的任务都在一个主线程中完成，一次只能执行一个任务，如果有多个任务需要被执行的话，那么后面的任务会依次排队等着，那么这种情况下，如果我们需要处理大量的计算逻辑的时候，那么就会比较耗时，那么用户界面就很有可能出现假死的
vue3 webworker 多线程
09-08
Vue 3支持Web Worker多线程的特性，这是一种在浏览器中运行JavaScript代码的方式，可以在后台运行独立的线程，提高应用程序性能和响应能力。 在Vue 3中，可以使用`Vue. createApp()`方法创建Vue实例，并使用`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值