html5---webworker多线程

最新推荐文章于 2024-11-15 19:51:40 发布

weixin_30758821

最新推荐文章于 2024-11-15 19:51:40 发布

阅读量89

点赞数

文章标签： javascript 网络 ViewUI

原文链接：http://www.cnblogs.com/stefanlee/p/3390977.html

版权

javascript本身就是一个单线程的语言，一开始它的出现是为了简单的网页设计，设计者并没有考虑到多线程的问题，要知道，线程的开销是非常昂贵的。但是随着web开发的潮流化，javascript不是仅仅一门网页脚本语言那么简单了，它可以涉及到socket(websocket),canvas等复杂的操作,这时候单线程的计算远远不够,在此时html5引入了webworker(多线程)对象，用于实现js的多线程操作,虽然本身js还是门单线程的语言，实现多线程是基于Event loop的实现,这里介绍更加详细http://blog.jobbole.com/30445/。

1.webworker分为Worker（专用线程）和 SharedWorker（共享线程）两种，都必须遵守同源策略

同源策略：

为了能和服务器交互，worker必须遵守同源策略（same-origin policy）(译注：可参考国人文章同源策略)。比如，位于http://www.example.com/内的脚本文件不能访问https://www.example.com的脚本。尽管域名相同，但同源策略要求端口也必须一致。通常，这不会成为一个很大的问题。但是你很有可能会同一个域名编写worker和client，所以知道这点对你总是有所帮助。

（1）Worker(专用线程)一般用于交换信息，而不是共享信息，而SharedWorker则用于共享信息

（2）因为worker一般都是在后台运行的，所以不建议在worker中访问DOM,并进行一系列的DOM操作

2.在这里为了粗略介绍，我们只讲Worker(专用线程),有兴趣了解ShareWorker的可以在这里参考

我们将会做一个加载图片的demo,其中有三个文件:test.html,Fthread.js(父线程),Sthread.js(子线程)，test.png位于web服务器网站的根目录下

test.html

<!DOCTYPE html>
<html>
<body>
</body>
<script src="Fthread.js"></script>
</html>

Fthread.js

var worker = new Worker("Sthread.js"); 创建一个子进程
worker.addEventListener("message", function(e) {
    e = window.event || e; //加入一些js hack
    var imgSrc = e.data;   //收到子进程传递过来的数据
    //创建一个图片便签并在页面显示图片
    var img = document.createElement("img");
    img.src = imgSrc;
    document.body.appendChild(img); 
   /*由父进程关闭终止子进程*/
    //this.terminate();
});

//很重要,不可少，这个将会触发向子进程的请求
worker.postMessage("begin");

Sthread.js

//当收到父进程传递过来的消息时，子进程响应，发回图片url
onmessage = function(e){
    e = window.event || e;
    
    if (e.data === "begin") {
      
   postMessage("test.png");
}
     
}
this.close();//关闭子进程
}


需要注意的是，chrome不支持本地测试，最好使用其他浏览器测试。

3.除次之外，我们还可以进行线程嵌套，即子线程再创建一个子进程，只需要在Sthread.js作些修改

//当收到父进程传递过来的消息时，子进程响应，发回图片url
onmessage = function(e){
    e = window.event || e;
    
    if (e.data === "begin") {
      
       var worker = new Worker("SSThread.js");//再创建子进程
       worker.onmessage = function(e1) {
            e1 = window.event || e1;
      postMessage(e1.data);  //返回图片url到父进程      
}
       worker.postMessage("get url");
}
this.close();//关闭子进程
}

SSthread.js

//当收到父进程传递过来的消息时，子进程响应，发回图片url
onmessage = function(e){
    e = window.event || e;
    
    if (e.data === "get url") {

      postMessage("test.png");  //返回图片url到父进程      
}
     
}
this.close();//关闭子进程
}