H5 Web Worker的一个小坑

最新推荐文章于 2025-03-12 08:55:52 发布

Charooon。

最新推荐文章于 2025-03-12 08:55:52 发布

阅读量637

点赞数 1

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_44240082/article/details/104680819

版权

前端专栏收录该内容

4 篇文章

订阅专栏

本文探讨了在Chrome浏览器中使用Web Worker时遇到的问题，由于Chrome不支持直接通过本地文件系统运行Web Worker，需要在Web容器（如Tomcat）中进行。对比了VSCode和WebStorm环境下运行代码的不同结果，指出WebStorm的本地端口方式可以解决这个问题。

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

chrome浏览器无法正确使用web worker

Web Worker示例代码：

主线程：

var input = document.getElementById('inp')

document.getElementById('btn').onclick = function(){
	var number = input.value;

	// 创建一个Worker对象
	var worker = new Worker('worker.js');

	// 向分线程发送消息
	worker.postMessage(number);
	console.log('主线程向分线程发送数据：'+number);

	// 绑定监听，接收分线程的响应
	worker.onmessage = function(event){
		console.log('主线程接收分线程数据：'+event.data)
		// console.log(event.data)
	}
}

分线程：

function fibonacci(n){
	return n < 2 ? n : fibonacci(n-1) + fibonacci(n-2)
}

var onmessage = function(event){
    var number = event.data
    console.log('分线程接收到主线程发送的数据：'+number)
    var result = fibonacci(number)

    postMessage(result)
    console.log('分线程向主线程返回数据：'+result)
}

问题：

使用vscode运行代码时，采用的本地调用的方式，此时的地址栏信息为：

file:///F:/JavaScriptTest/JavaScript_Senior/2_FunctionSenior/demo2.html

运行程序报错：

demo2.js:9 Uncaught DOMException: Failed to construct 'Worker': Script at 'file:///F:/JavaScriptTest/JavaScript_Senior/2_FunctionSenior/worker.js' cannot be accessed from origin 'null'.
    at HTMLButtonElement.document.getElementById.onclick (file:///F:/JavaScriptTest/JavaScript_Senior/2_FunctionSenior/demo2.js:9:15)

原因是chrome浏览器不支持这种本地方式使用web worker！ 需要放在web容器中运行（如tomcat）。

而使用Web Storm运行代码时，浏览器使用了本地的端口，地址栏信息为：

http://localhost:63342/JavaScriptTest/JavaScript_Senior/2_FunctionSenior/demo2.html?_ijt=jdh235h8hp4h2b9tbqmkftb7ml

此时程序就可以正常运行。