首页 > html5+css > html5基础知识 > HTML5 Web Workers使用介绍
2017
08-21

HTML5 Web Workers使用介绍

web worker的作用

浏览器端JavaScript是以单线程的方式执行的,也就是说javascript和UI渲染占用同一个主线程,那就意味着,如果JavaScript进行高负载的数据处理,UI渲染就很有可能被阻断,从而造成用户体验的大打折扣。Web Workers作为HTML5新特性之一,为浏览器端JavaScript开创了一种新的运行模式,让web应用程序具备多线程处理能力,在另外的线程中创建新的运行环境,以便使JavaScript能够在后台做一些费时的处理。

Web Worker不能跨域加载,importScripts()方法也同样不能跨域加载。

worker内代码不能访问window对象和docuemnt对象

Web Worker能使用什么

1、可以使用JavaScript的全局对象:JSON、Date()、Array

2、可以使用 setTimeout(), clearTimeout(), setInterval() and clearInterval()

3、可以使用XMLHttpRequest来发送请求

4、在worker中加载一个或多个其他文件(多用来加载库函数)importScripts('a.js', 'b.js', 'c.js');相对地址的url以当前worker为参照,方法会按照参数顺序依次下载运行库函数,如果中间某个脚本出错,剩下的都不会被载入和执行,而且这个方法是同步的,只有所有脚本都加载、运行完后才会返回。

5、创建子worker,在当前woker环境下,通过new Worker(XX)方式创建子worker,需要注意以下两点:子worker路径必须与父网页同源,子worker的路径相对于父worker解析,而不是父网页

6、可以访问location对象,返回当前worker的location信息,其属性都是只读的,location.href为当前worker创建时指向的文件绝对路径

7、可以访问navigator对象

8、self引用,如self.postMessage(data),self.close()等,self关键字可以省略

一、worker的创建

需要把希望执行的javascript代码放到一个单独的js文件中,然后在页面中调用Worker构造函数来创建一个线程,参数是该文件路径,参数可以是相对地址,也可以是绝对路径,但需要保证同源(协议+主机+端口)。这个文件不需要我们在页面使用script标签显示引用

var worker=new Worker('js/worker.js');

二、发送数据

主线程向worker发送数据:worker.postMessage(data);

worker返回数据给主线程:self.postMessage(data); //self关键字可以省略

data理论上可以为任意值,不放心的话同样也可以序列化为字符串传递

三、worker事件

消息接收(message):worker.onmessage = function(evt){} //evt对象的data属性包含了传递的数据

出错处理(error):worker.onerror = function(evt){} //evt对象的data属性包含了传递的数据

四、worker终止

在主线程中worker.terminate();

在worker中self.close();

实例:

html文件:

<script type="text/javascript">

var worker=new Worker('js/worker.js');

worker.postMessage('这是传送过去的数据');

worker.onmessage=function(evt){

var test=document.getElementById('test').innerHTML=evt.data;

};

worker.terminate();

</script>

worker.js文件内容:

function fun_name(data){

self.postMessage('返回传给的数据');

self.close();

}

self.onmessage=function(evt){

fun_name(e.data);

};

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。