zoukankan      html  css  js  c++  java
  • 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 };
  • 相关阅读:
    linux下网络排错与查看
    linux下判断网络是否连接
    Linux 下操作gpio(两种方法,驱动和mmap)
    Kernel 中的 GPIO 定义和控制
    springboot jpa 解决延迟加载问题
    Hibernate @OneToOne懒加载实现解决方案
    Hibernate缓存和懒加载的坑你知道多少?这5个简单问题回答不上来就不敢说会用hibernate
    Spring Boot JPA 懒加载
    Spring Boot中使用Spring-data-jpa让数据访问更简单、更优雅
    Spring Data Jpa 详解 (配置篇)
  • 原文地址:https://www.cnblogs.com/chaofei/p/8052578.html
Copyright © 2011-2022 走看看