HTML学习笔记(八) Web Worker_将webworker代码内联至html文件中-CSDN博客

本文链接：https://blog.csdn.net/wsmrzx/article/details/104845234

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 外都是拷贝传递