HTML学习笔记(八) Web Worker
Web Worker 为 JavaScript 创建多线程环境
主线程可以创建 Worker 线程，并将一些高延迟的任务分配给 Worker 线程在后台运行
而主线程只会负责渲染和交互，从而保证页面的流畅性
Web Worker 有两种类型，分别是 Dedicated Web Worker 和 Shared Web Worker
- Dedicated Web Worker：只有一个页面可以使用这个 Web Worker
- Shared Web Worker：多个同源页面可以共享一个 Web Worker，为跨页面通信提供一种解决方案
下面介绍 Dedicated Web Worker
主线程通过构造函数 Worker()，创建一个 Worker 线程，并在参数中指定需要执行的脚本文件
var worker = new Worker('worker.js')
构造函数返回一个 Worker 对象，便于主线程与 Worker 线程通信，Worker 对象常用的属性和方法如下：
onerror：用于指定error事件的监听函数，当 Worker 发生错误时触发onmessage：用于指定message事件的监听函数，当接收到传递的数据时触发onmessageerror：用于指定messageerror事件的监听函数，当收到的数据无法进行反序列化时触发postMessage()：传递数据给 Worker 线程terminate()：终止 Worker 线程
<!DOCTYPE html>
<html>
<head>
<script>
var worker;
function submit() {
if (typeof(Worker) === 'undefined') {
return
}
if (typeof(worker) === "undefined") {
worker = new Worker('worker.js')
}
let input = document.getElementById('data').value
worker.postMessage(input)
worker.onmessage = function(event) {
let result = event.data
document.getElementById('result').innerText = result
worker.terminate()
worker = undefined
}
worker.onerror = function(event) {
console.log('出错的信息', event.message)
console.log('出错的文件', event.filename)
console.log('出错的行数', event.lineno)
console.log('出错的列数', event.colno)
worker.terminate()
worker = undefined
}
}
</script>
</head>
<body>
<input type="text" id="data" name="data" placeholder="Please Enter Something">
<button onclick="submit()">Reverse String</button>
<span id="result"></span>
</body>
</html>
Worker 线程有一个自己的全局对象，self 和 this 都提供对该对象的引用，这个对象常用的属性和方法如下：
onmessage：用于指定message事件的监听函数，当接收到传递的数据时触发onmessageerror：用于指定messageerror事件的监听函数，当收到的数据无法进行反序列化时触发importScripts()：用于加载其它脚本postMessage()：传递数据给主线程close()：关闭 Worker 线程
// worker.js
this.onmessage = function(event) {
let data = event.data
let result = reverse(data)
this.postMessage(result)
this.close()
}
function reverse(content) {
return content.split('').reverse().join('')
}
使用 Web Worker 需要注意以下的点：
-
主线程分配给 Worker 线程的脚本文件，不能从本地读取，它必须来自网络
-
主线程分配给 Worker 线程的脚本文件，必须与主线程的脚本文件同源，准确来说应该是与页面文档同源
-
Worker 线程不能访问 window、document、parent 对象，但是可以使用 navigator、location 对象
-
Worker 线程不能使用 alert、confirm，但是可以使用 setTimeout、setInterval、XMLHttpRequest
-
主线程和 Worker 线程不能直接通信，必须通过消息传递，消息传递有两种方式，一种是拷贝，一种是转让
拷贝：拷贝原始数据，产生一份副本，将副本传递给目标线程，这种方法在传递较大的数据时比较消耗性能
转让：将原始数据的所有权转让给目标线程，原来线程不再具有这个数据
在默认的实现中，除 ArrayBuffer 外都是拷贝传递
【 阅读更多 HTML 系列文章，请看 HTML学习笔记 】
