新浦京81707con > 软件下载 > 关于webWorker的理解和简单例子

原标题:关于webWorker的理解和简单例子

浏览次数:180 时间:2019-05-06

一、理解

当在 HTML 页面中实行脚本时,页面的状态是不行响应的,直到脚本已做到。

web worker 是运作在后台的 JavaScript,独立于任何脚本,不会影响页面的习性。您能够几次三番做此外愿意做的思想政治工作:点击、选拔内容等等,而此时 web worker 在后台运维。

webworker并不曾改观js单线程的本色,webworker八线程指的是浏览器十二线程,因为浏览器能够提供多少个js引擎的实例,各类实例能够独自的运营相应的先后,但在各类js引擎实例中js脚本依旧在单线程得推行,种种实例就一定于八个webworker。

怀有主流浏览器都帮衬weworker,除了Internet explorer。

HTML5 Web Worker,html5webworker

在 HTML5 中提议了职业线程(Web Workers)的定义,即四线程概念,能够将一些气势恢宏测算的代码交给web worker运维而不冻结用户分界面。

Web Workers 的三大入眼特征:

一)可以长日子运作(响应)

2)理想的启航质量

三)理想的内部存储器消耗

Web Workers 允许开辟职员编写能够长日子运作而不被用户所中断的后台程序,去推行专门的学业恐怕逻辑,并同时确定保证页面对用户的及时响应。

Web Workers 为 Web 前端网页上的本子提供了一种能在后台进度中运维的秘籍。一旦它被创建,Web Workers 就足以经过 postMessage 向任务池出殡职务请求,施行完之后再经过 postMessage 回来新闻给创立者钦点的事件管理程序 ( 通过 onmessage 进行捕获 )。Web Workers 进度能够在不影响用户分界面包车型客车图景下管理义务,并且,它还是能够利用 XMLHttpRequest 来拍卖 I/O,但常见,后台过程(包涵 Web Workers 进度)不能够对 DOM 实行操作。倘诺期望后台程序管理的结果可见转移 DOM,只好通过再次回到音信给创立者的回调函数实行拍卖。

 

内需在客户端页面包车型客车 JavaScript 代码中 new 3个 Worker 实例出来,参数是要求在另一个线程中运转的 JavaScript 文件名称。然后在这么些实例上监听 onmessage 事件。最终另二个线程中的 JavaScript 就能够通过调用 postMessage 方法在那八个线程间传递数据了。

 

主程序中,创造worker实例,监听onmessage事件

 <html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 <title>Test Web worker</title> 
 <script type="text/JavaScript"> 
     function init(){ 
         var worker = new Worker('compute.js'); 
         //event 参数中有 data 属性,就是子线程中返回的结果数据
         worker.onmessage= function (event) { 
             // 把子线程返回的结果添加到 div 上
             document.getElementById("result").innerHTML  = 
                event.data "<br/>"; 
         }; 
     } 
 </script> 
 </head> 
 <body onload="init()"> 
 <div id="result"></div> 
 </body> 
 </html>

在客户端的 compute.js 开拓了3个新的线程,不起阻塞实行的功效,并且提供主线程和新线程之间的多少交互接口。只是轻巧的再一次多次加和操作,最终经过 postMessage 方法把结果回到给主线程,指标就是等待一段时间。而在那段时光内,主线程不应当被卡住,用户能够通过拖拽浏览器,变大缩短浏览器窗口等操作测试那一光景。这么些非阻塞主线程的结果正是Web Workers 想到达的指标。

 

就算如此在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使十二线程施行,单实际上JavaScript使单线程的,1次只好做一件业务(关于JavaScript单线程能够看看set提姆eout()和setInterval() 何时被调用施行),看个轻便的例子证美赞臣下

二、注意点

  1. webworker与主线程之间不可能共享能源和成效域,通过异步事件在线程之间传递消息。

  2. webworker中不能够访问window,document,parent对象,可是能够访问JSON(看到书上说applicationCache,navigator,location也得以访问,但实验了1晃并无法访问,有领悟怎么访问的还请指教啦)

  3. 同3个页面打开一遍依旧反复,创制webworker的门径是同样的,但是会创设分化的webworker,且是全然独立的。有些浏览器(Firefox,Chrome的高版本)援助共享Worker,通过 new ShareWorke来创制共享Worker实例

compute.js 中调用 postMessage 方法再次来到总计结果
 var i=0; 

 function timedCount(){ 
     for(var j=0,sum=0;j<100;j  ){ 
         for(var i=0;i<1000000;i  ){ 
             sum =i; 
         } 
     } 
     // 调用 postMessage 向主线程发送消息
     postMessage(sum); 
 } 

 postMessage("获取计算之前的时间," new Date()); 
 timedCount(); 
 postMessage("获取计算之后的时间," new Date());

演示地址:

 

出于javascript是单线程实行的,在错综复杂地运算的进程中浏览器不可能奉行其它javascript脚本,UI渲染线程也会被挂起,从而形成浏览器进入僵死状态。使用web worker将数列的总计进度放入三个新线程里去实践将防止那种景观的面世。

除外能够行使web  worker加载贰个JS进行大气的复杂计算而不挂起主进度,并透过postMessage,onmessage实行通讯外;能够在worker中经过importScripts(url)加载别的的剧本文件,使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval(),使用XMLHttpRequest来发送请求,访问navigator的有的属性。

 

只是也是存在必然的局限性

1.不可能跨域加载JS(同源计策限制)

二.worker内代码不能够访问DOM

三.梯次浏览器对Worker的完结非常的小同样

四.不是每一种浏览器都帮忙那一个新特征

 

Web Worker,html伍webworker 在 HTML5中提议了 工作线程 (Web Workers)的定义,即二十四线程概念,能够将有个别大气测算的代码交给web worker运营而不...

图片 1

三、基本例子

//index.html
<body>
          <div id="num"></div>
          <input type="number" />
          <button>发送</button>
          <button>停止</button>
          <script>
              //子线程向主线程传递消息
              var w = new Worker("worker.js");
//            w.onmessage=function(e){//监听子线程的message事件
//                 document.getElementById("num").innerText =   JSON.parse(e.data).num;
//            }
              w.addEventListener("message",function (e){//监听子线程的message事件,既可以采用这种方式,也可以用上边注释里的方式
                  document.getElementById("num").innerText =  JSON.parse(e.data).num;
              })
                //主线程向子线程传递消息
              var btn =  document.getElementsByTagName("button")[0];
              btn.onclick = function () {
                   var num=  document.getElementsByTagName("input")[0].value;
                   w.postMessage(num);//向子线程发送message事件

              }
              var stopBtn =  document.getElementsByTagName("button")[1];
               stopBtn.onclick=function() {
                   w.terminate();//停止webworker
              }
          </script>
     </body>

 

//index.html
<body>
          <div id="num"></div>
          <input type="number" />
          <button>发送</button>
          <button>停止</button>
          <script>
              //子线程向主线程传递消息
              var w = new Worker("worker.js");
//            w.onmessage=function(e){//监听子线程的message事件
//                 document.getElementById("num").innerText =   JSON.parse(e.data).num;
//            }
              w.addEventListener("message",function (e){//监听子线程的message事件,既可以采用这种方式,也可以用上边注释里的方式
                  document.getElementById("num").innerText =  JSON.parse(e.data).num;
              })
                //主线程向子线程传递消息
              var btn =  document.getElementsByTagName("button")[0];
              btn.onclick = function () {
                   var num=  document.getElementsByTagName("input")[0].value;
                   w.postMessage(num);//向子线程发送message事件

              }
              var stopBtn =  document.getElementsByTagName("button")[1];
               stopBtn.onclick=function() {
                   w.terminate();//停止webworker
              }
          </script>
     </body>

从这几个事例中可旁观

  • 子线程内监听音信依旧发送音讯,间接调用add伊芙ntListener、postMessage就能够

  • 主线程内监听音讯依然发送新闻,要调用Worker实例上的add伊芙ntListener、postMessage

  • 要想获取通讯的实际内容,必要拜访回调函数的参数中的data属性

  • webworker里能够采用JSON来传递复杂类型值

 

 

<!DOCTYPE html>
<html>
<head>
    <title>Web Workers</title>
</head>
<body>
    <h1>Web Workers</h1>

    <script type="text/javascript">
    setTimeout(function(){
        console.log('timeout function');
    },1000);
    alert('do not close');
    </script>
</body>
</html>

图片 2

 

本文由新浦京81707con发布于软件下载,转载请注明出处:关于webWorker的理解和简单例子

关键词: 新浦京81707con HTML/HTML5

上一篇:使用ILDasm查看托管代码的元数据,软件方法

下一篇:没有了