HTML5多线程之-- SharedWorker

最新推荐文章于 2025-05-30 17:46:23 发布

雾里看花叹朦胧

最新推荐文章于 2025-05-30 17:46:23 发布

阅读量1k

点赞数 1

分类专栏： html5 文章标签： SharedWorker HTML web worker postMessage onmessage

本文链接：https://blog.youkuaiyun.com/hsl0530hsl/article/details/106938327

版权

本文介绍了HTML5的SharedWorker特性，用于降低资源消耗，实现多个浏览上下文间的共享。SharedWorker从概念上解释了其不同于专用Worker的特点，并通过SharedWorker.js、multiply.html和square.html的示例展示如何创建和使用共享进程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用如下这种URL的方式创建的 worker 称为专用 Worker(Dedicate Worker)。

new worker("url");

而共享Workers（SharedWorker）的目的，是希望通过防止重复专用 Worker 来降低系统的资源使用。

有点类似于抽取共通方法的思想。

SharedWorker 接口代表一种特定类型的 worker，可以从几个浏览上下文中访问，例如几个窗口¹、iframe 或其他 worker。它们实现一个不同于普通 worker 的接口，具有不同的全局作用域, SharedWorkerGlobalScope 。

通过 new SharedWorker() 方法来创建一个共享进程对象。

var myWorker = new SharedWorker("worker.js");

具体实例如下：

SharedWorker.js

onconnect = function (e) {
   
	var port = e.ports[0];

	/*
	//如果已经用 onmessage 监听了 onmessage 事件，则会自动启动端口：
	port.onmessage = function (e) {
		var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
		port.postMessage(workerResult);
	};*/

	port.addEventListener('message'