突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述

Web Worker是HTML5中为JavaScript提供的多线程的解决方案之一，可以将一些复杂和耗时的任务在独立的线程中进行，以提高整个系统的响应速度。该技术可以通过JavaScript API进行调用。

Web Worker概述

Web Worker包含两种类型：

1. 主线程中的Worker
2. 普通的Web Worker

其中，主线程中的Worker用于加载不同类型的JS文件，回应消息和传递消息。普通的Web Worker则由脚本通过JavaScript API创建。

同时，Web Worker支持与主线程进行异步通信，但通信过程中不能共享同一份数据。Web Worker还有一些API来获取线程信息、读取域名等。

Web Worker使用示例

1. 在主线程外调用Worker的示例

// worker.js
onmessage = function(e){
    var result = e.data[0] * e.data[1];
    postMessage(result);
}

// main.js
var worker = new Worker('worker.js');
worker.onmessage = function(e){
    console.log(e.data);
}
worker.postMessage([3, 5]);

在这个示例中，主线程中通过new Worker()方法实例化了一个Worker线程，然后通过onmessage和postMessage方法分别实现了监听返回结果和发送请求消息的功能。

1. 在主线程内调用Worker的示例

// main.js
var worker = new Worker(URL.createObjectURL(
    new Blob(
        [document.querySelector('#worker').textContent],
        {type: 'text/javascript'}
    )
));
worker.onmessage = function(e){
    console.log(e.data);
}
worker.postMessage([3, 5]);

// index.html
<script id = "worker" type = "javascript/worker">
onmessage = function(e){
    var result = e.data[0] * e.data[1];
    postMessage(result);
}
</script>

在这个示例中，将Worker代码写在HTML文档内，然后使用createObjectURL()+Blob()方法生成URL，最后通过new Worker()方法实例化了一个Worker线程。