标签:页面 nat 接收 term targe 一个 点击 set document
我们一直强调JavaScript是单线程的,但是web worker的出现使得JavaScript可以在多线程上跑,只是web worker本身适合用于一些复杂的、耗费cpu的运算,不能操作window、document、parent对象,所以说本质上的JavaScript还是单线程的。
这里,我们仅仅举一个简单的例子,看看web worker是怎么运行的,毕竟是html5的规范,目前浏览器的支持还不是很好。
web worker就是运行在后台的JavaScript,独立于其他脚本,不会影响页面的性能。您还可以做任意想做的事情,不会影响点击等操作。
对于耗时而不操作DOM的JavaScript,我们就可以使用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
标签:页面 nat 接收 term targe 一个 点击 set document
原文地址:http://www.cnblogs.com/zhuzhenwei918/p/7440038.html