使用Worker实现多线程

主线程[/worker.html]

<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>使用Worker实现多线程</title>
</head>
<body>
<script type="text/javascript">
    // 创建两个Worker子线程
    let worker1 = new Worker('worker1.js'); // 重要提醒：JavaScript文件有同源限制
    let worker2 = new Worker('worker2.js'); // 重要提醒：JavaScript文件有同源限制

    worker1.onerror = function (event) {
        console.log('子线程[worker1.js]出错辣~~~', event);
    };

    worker2.onerror = function (event) {
        console.log('子线程[worker2.js]出错辣~~~', event);
    };

    // 接收worker1子线程消息
    worker1.onmessage = function (event) {
        console.log('主线程[worker.html]收到子线程[worker1.js]消息：' + event.data);
    };

    // 接收worker2子线程消息
    worker2.onmessage = function (event) {
        console.log('主线程[worker.html]收到子线程[worker2.js]消息：' + event.data);
    };

    // 向worker1子线程发送消息
    worker1.postMessage('PHP');

    // 向worker2子线程发送消息
    worker2.postMessage('MySQL');

    // 销毁Worker子线程
    // worker1.terminate();
    // worker2.terminate();

    //========== 控制台输出结果·开始 ==========//
    // 子线程[worker1.js]收到主线程[worker.html]消息：PHP
    // 子线程[worker2.js]收到主线程[worker.html]消息：MySQL
    // 主线程[worker.html]收到子线程[worker1.js]消息：PHP·从入门到放弃
    // 主线程[worker.html]收到子线程[worker2.js]消息：MySQL·从删库到跑路
    //========== 控制台输出结果·结束 ==========//

    //========== 总结 ==========//
    // 1、在子线程里是无法使用window对象的（undefined），所以无法操作cookie、localStorage，也无法调用alert()、confirm()等方法。
    //    需要注意的是子线程可以使用navigator对象和location对象，但这两个对象并不属于window对象。
    // 2、由于子线程无法使用window对象，所以子线程想更新页面（包括alert和confirm）只能向主线程发送消息，由主线程去执行更新页面操作。
    // 3、Worker有同源限制（同协议、同域名、同端口），即子线程JavaScript文件必须和主线程页面同源。
    // 4、子线程被创建后会一直运行，比较消耗资源，使用完毕后应及时销毁。
    // 5、所有AJAX请求都应该在子线程里发起，因为AJAX请求只是异步，它仍然是在主线程里执行的，而在子线程发起AJAX请求可以避免发生阻塞。
</script>
</body>
</html>

子线程[/worker1.js]

// 接收主线程消息
self.onmessage = function (event) {
    console.log('子线程[worker1.js]收到主线程[worker.html]消息：' + event.data);

    // 向主线程发送消息（延迟执行模拟耗时操作）
    setTimeout(function () {
        self.postMessage(event.data + '·从入门到放弃'); // 向主线程发送消息
        self.close(); // 关闭子线程
    }, 2500);
};

子线程[/worker2.js]

// 接收主线程消息
self.onmessage = function (event) {
    console.log('子线程[worker2.js]收到主线程[worker.html]消息：' + event.data);

    // 向主线程发送消息（延迟执行模拟耗时操作）
    setTimeout(function () {
        self.postMessage(event.data + '·从删库到跑路'); // 向主线程发送消息
        self.close(); // 关闭子线程
    }, 5000);
};