码迷,mamicode.com
首页 > Web开发 > 详细

webwork学习

时间:2017-12-17 18:12:56      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:style   this   div   .post   创建   char   工作   加法   htm   

学习了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学习

标签:style   this   div   .post   创建   char   工作   加法   htm   

原文地址:http://www.cnblogs.com/chaofei/p/8052578.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!