首页 > 编程语言> 文章详细

怎么用JavaScript启动浏览器的后台线程？

2021-12-27 20:01:05 阅读：186 来源： 互联网

标签：function work 浏览器 JavaScript worker 线程 myWorker btn

一、简介

Worker 对象用于创建独立后台线程，可以处理一些耗时的操作且不会阻塞主线程(通常是UI线程)。可用的 Worker有：专用worker、共享worker、Service Worker。

二、专用worker

只能被单一脚本调用创建后台线程。但在worker内，不能直接操作DOM节点，也不能使用window对象的默认方法和属性，可用方法和对象，看这里!

1、worker 实例

创建 work 线程并与主线程进行通讯。主线程和 worker 线程之间通过postMessage() 发送信息并用onmessage 接收消息。

<!DOCTYPE html>
<html lang='zh-CN'>
<head>
    <meta charset="utf-8">
    <title>work</title>
</head>
<body>
    <h1>点击按钮向 work 发送消息！</h1>
    <button id="number">click</button>
    <script>
        // 1、创建 work线程 和 接收work信息的处理函数
        const myWorker = new Worker('worker.js');
        myWorker.onmessage = function (e) {
            alert(e.data);
        }

        // 2、发送信息给 work线程
        const btn = document.querySelector('#number');
        btn.onclick = function () {
            myWorker.postMessage("btn click");
        }
    </script>
</body>
</html>

// worker.js
// 3、接收消息
onmessage = function (e) {
    const workerResult = e.data + " : worker send";
    // 4、发送消息给主线程
    postMessage(workerResult);
}

2、DedicatedWorkerGlobalScope

专用worker的全局对象，也可以用 self 来访问。

三、SharedWorker

可以被多个脚本调用并创建多个后台线程，前提是这些脚本所在页面必须同源（相同的协议、host 以及端口）。

1、简单实例

创建 SharedWorker 线程并与主线程进行通讯。

<!DOCTYPE html>
<html lang='zh-CN'>
<head>
    <meta charset="utf-8">
    <title>work</title>
</head>
<body>
    <h1>点击按钮向 work 发送消息！</h1>
    <button id="number">click</button>
    <script>
        if (!!window.SharedWorker) {
            // 1、创建 sharedwork线程 和 接收sharedwork信息的处理函数
            const myWorker = new SharedWorker('worker.js');
            myWorker.port.onmessage = function (e) {
                alert(e.data);
                console.log('Message received from worker');
            }

            // 2、发送信息给 sharedwork线程
            const btn = document.querySelector('#number');
            btn.onclick = function () {
                myWorker.port.postMessage("btn click");
                console.log('Message posted to worker');
            }
        } else {
            console.log("此浏览器不支持 SharedWorker ！")
        }
    </script>
</body>
</html>

// worker.js
// 3、消息处理函数
onconnect = function (e) {
    var port = e.ports[0];

    port.onmessage = function (e) {
        var workerResult = e.data + " : worker send";
        // 4、发送消息给主线程
        port.postMessage(workerResult);
    }

}

2、SharedWorkerGlobalScope

共享worker的全局对象，也可以用 self 来访问。

四、Service Worker

Service workers 本质上充当 Web 应用程序、浏览器与网络（可用时）之间的代理服务器。这个 API 旨在创建有效的离线体验，它会拦截网络请求并根据网络是否可用来采取适当的动作、更新来自服务器的的资源。它还提供入口以推送通知和访问后台同步 API。

Service workers 只能用于 https，不能用于 Firefox浏览器的隐身模式。

Service workers大量使用Promise，因为通常它们会等待响应后继续，并根据响应返回一个成功或者失败的操作。Promise非常适合这种场景。

目前只有 Chrome、Firefox 对此功能有比较完整的支持，其他浏览器暂时不支持。

五、参考文档

怎么用JavaScript启动浏览器的后台线程？

标签：function,work,浏览器,JavaScript,worker,线程,myWorker,btn
来源： https://blog.csdn.net/fanlehai/article/details/122179230

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9