html5入门教程(五)web Worker-多线程
2019-11-20 本文已影响0人
党云龙
一般来说Javascript和页面的UI会共用一个线程,当一段Javascript代码运行完毕之前,此时的浏览器反映就是:鼠标变成忙碌状态,点击页面没有任何反映。
通过使用Web Worker, 我们可以在浏览器后台运行Javascript, 而不占用浏览器自身线程。Web Worker可以提高应用的总体性能,并且提升用户体验。
注意,多线程在IE6、7、8、9下均不支持
示例图worker分为两个部分,在主页面创建worker对象,并发送到js文件上
然后js对接收到的内容做出相应,在发送到创建worker对象的页面上。
创建worker对象的页面:
<script type="text/javascript">
var box=document.getElementById("box");
var work=new Worker("work1.js"); //创建worker对象 记住这个W一定要写成大写
work.postMessage("hello world"); //使用 postMessage()方法 发送内容
work.addEventListener("message",function(ev){ //message事件用于监听返回的内容
var event=ev||window.event;
box.innerHTML=event.data; //这里面的event.data就代表得到的返回内容
},false)
</script>
执行worker的js
addEventListener("message",function(ev){
var event=ev||window.event;
console.log(event.data);
//event.data 是页面传过来的数据
var str="小明说"+event.data;
postMessage(str); //多线程页面得到内容以后 也需要用同样的方法 再返回给主页面
},false)