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文件：

worker.js文件内容：

function fun_name(data){

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

self.close();

}

self.onmessage=function(evt){

fun_name(e.data);

};