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

web worker原理

时间:2017-08-27 12:47:54      阅读:622      评论:0      收藏:0      [点我收藏+]

标签:页面   nat   接收   term   targe   一个   点击   set   document   

什么是 web worker? 

  我们一直强调JavaScript是单线程的,但是web worker的出现使得JavaScript可以在多线程上跑,只是web worker本身适合用于一些复杂的、耗费cpu的运算,不能操作window、document、parent对象,所以说本质上的JavaScript还是单线程的。

  这里,我们仅仅举一个简单的例子,看看web worker是怎么运行的,毕竟是html5的规范,目前浏览器的支持还不是很好。

  web worker就是运行在后台的JavaScript,独立于其他脚本,不会影响页面的性能。您还可以做任意想做的事情,不会影响点击等操作。

 

 

 

为什么需要web worker?

  对于耗时而不操作DOM的JavaScript,我们就可以使用web worker,增强性能。 

 

 

web worker有什么要注意的地方?  

  • 不是所有的浏览器都支持,使用前要检查浏览器是否支持。 
  • web worker运行于外部文件中,所以他们无法访问下面的JavaScript对象。
  • 理解好 worker,worker在计算机领域通常被翻译为线程或者是进程。而这里的worker意义也是如此。 我们需要将之正确对待。 

 

 

web worker实例

创建worker.js外部文件:

var i = 0; 
setInterval(function () {
  postMessage(i++);
}, 1000);

 

html文件如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <p>计数:<span id="result"></span></p>
  <button onclick="start()">web worker开始工作</button>
  <button onclick="stop()">web worker结束工作</button>
  <script>
    var w;
    function start() {
      if (typeof Worker != undefined) {
        w = new Worker(worker.js);
        w.onmessage = function (event) {
          document.getElementById(result).innerHTML = event.data;
        }
      } else {
        document.getElementById(result).innerHTML = 您的浏览器不支持web worker;
      }

    }

    function stop() {
      w.terminate();
      w = undefined;
    }
  </script>
</body>
</html>

即首先判断:是否支持Worker构造函数,如果支持,就传递一个js文件创建这个文件的实例,然后就可以调用 message 事件,接收从 worker.js 中获得的数据。 

注意: 必须在服务器上测试,否则会有跨域问题。

最终,我就可以看到效果了。 

代码地址: https://github.com/zzw918/cross-origin/tree/master/webWorker

  

 

  

  

web worker原理

标签:页面   nat   接收   term   targe   一个   点击   set   document   

原文地址:http://www.cnblogs.com/zhuzhenwei918/p/7440038.html

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