webwork学习

Posted 逗比煎饼侠

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webwork学习相关的知识,希望对你有一定的参考价值。

学习了H5中的webworker

主机 > 程序 > 进程 > 线程 > 纤程

          多进程(重)                    多线程(轻)
开销      创建、销毁开销大               创建、销毁开销小
安全性    进程之间是隔离                 线程之间是共享
资源      每个进程独立资源               同一个进程的所有线程共享资源
共享资源  麻烦                          方便
编程难度  低(资源是独享的)             高(资源是共享的)

总结:
多进程:性能低、编写简单
多线程:性能高、编写复杂

Java、c          多进程/多线程
php              多进程
JS               多进程

--------------------------------------------------------------------------------------------------------

WebWorker——浏览器上实现的多进程

Web端:
主进程             UI进程
子进程(工作进程)    看不见的;只能完成计算、数据请求这些操作

优点:
1.充分利用资源(多个进程同时工作)
2.防止主进程卡住

缺点:
不能执行任何UI操作,子进程只能执行计算型任务



结论:WebWorker在工作中用的很少——Web中计算型任务就不多

下面写了个demo:一个加法计算器

html文件中:

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <script>
 7     window.onload=function (){
 8       let oBtn=document.getElementById(btn1);
 9       let oTxt1=document.getElementById(txt1);
10       let oTxt2=document.getElementById(txt2);
11 
12       oBtn.onclick=function (){
13         let n1=parseInt(oTxt1.value);
14         let n2=parseInt(oTxt2.value);
15 
16         //1.创建子进程
17         let w=new Worker(w1.js);
18 
19         //2.发送
20         w.postMessage({n1, n2});
21 
22         //6.接收结果
23         w.onmessage=function (ev){
24           alert(ev.data);
25         };
26       };
27     };
28     </script>
29   </head>
30   <body>
31     <input type="text" id="txt1">
32     <input type="text" id="txt2">
33     <input type="button" value="计算" id="btn1">
34   </body>
35 </html>

在w1.js文件中

 1 //3.接收
 2 this.onmessage=function (ev){
 3   //console.log(‘我得到了:‘, ev.data);
 4 
 5   //4.处理任务
 6   let sum=ev.data.n1+ev.data.n2;
 7 
 8   //5.返回
 9   this.postMessage(sum);
10 };

 

以上是关于webwork学习的主要内容,如果未能解决你的问题,请参考以下文章

Webpack:Webworker 和 Web 代码之间共享代码的通用块?

H5多线程开发:WebWorkers

JavaScript学习手册(63)

WEBWORK入门及实例说明

struts2框架学习笔记

IOS开发-OC学习-常用功能代码片段整理