学习了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学习
原文地址:http://www.cnblogs.com/chaofei/p/8052578.html