如何通过 Blob URL 动态创建并运行内联线程教程

陌萱小哥_9654

陌萱小哥_9654

2026-05-25

662人浏览

原创

必须用 blob + url.createobjecturl() 创建 worker,mime 类型须为 "application/javascript";worker 内无法访问闭包或 dom,仅通过 postmessage 通信;使用后需调用 terminate() 和 revokeobjecturl() 清理资源。

如何通过 blob url 动态创建并运行内联线程教程

不能直接用字符串或函数创建 Worker,必须借助 Blob + URL.createObjectURL() 生成合法的 JavaScript URL。这种方式不依赖外部文件,适合封装逻辑、按需启动、避免额外请求。

写好自包含的 Worker 脚本字符串

Worker 内部无法访问闭包、document、window 或主线程变量,所有输入输出都靠 postMessage 和 onmessage。脚本必须是完整可执行的 JS 字符串:

  • 显式绑定 self.onmessage 或使用事件监听器
  • 用 self.postMessage() 向主线程回传结果
  • 避免任何 DOM 操作和全局对象引用
  • 如需解析 XML,可用 DOMParser;如需复杂计算,确保数据已序列化传入

示例:

const workerCode = `self.onmessage = function(e) {<br>  const result = e.data ** 2 + 1;<br>  self.postMessage(result);<br>};`;

用 Blob 封装并生成可执行 URL

Blob 是二进制容器,必须指定正确的 MIME 类型才能被 Worker 加载:

  • MIME 类型必须为 "application/javascript"("text/javascript" 在部分浏览器中可能兼容,但不保证)
  • 调用 URL.createObjectURL(new Blob([workerCode], { type: "application/javascript" }))
  • 生成的 URL 形如 blob:http://localhost/xxx-xxx,仅在当前页面生命周期内有效

⚠️ 若页面以 file:// 协议打开,Blob URL Worker 会被浏览器禁用——必须通过 http:// 或 https:// 服务运行。

实例化 Worker 并通信

拿到 URL 后即可创建 Worker,并建立消息通道:

  • 主线程用 worker.postMessage(data) 发送任意可结构化克隆的数据(对象、数组、数字等)
  • 监听 worker.onmessage 或 worker.addEventListener('message', ...) 接收返回
  • Worker 内处理完后调用 self.postMessage(result)

示例调用:

const blob = new Blob([workerCode], { type: "application/javascript" });<br>const url = URL.createObjectURL(blob);<br>const worker = new Worker(url);<br><br>worker.onmessage = (e) => console.log("结果:", e.data);<br>worker.postMessage(5); // 输出:26

务必清理资源防止内存泄漏

每个 createObjectURL 都会保留对 Blob 的引用,不释放会导致内存持续占用,尤其在频繁创建/销毁场景下:

  • 任务完成后调用 worker.terminate() 终止线程
  • 立即调用 URL.revokeObjectURL(url) 解除引用
  • 不要等到页面卸载才清理;应在收到最终响应后同步执行

完整收尾代码:

worker.onmessage = (e) => {<br>  console.log(e.data);<br>  worker.terminate();<br>  URL.revokeObjectURL(url);<br>};
PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
线程和进程的区别
线程和进程的区别

线程和进程的区别:线程是进程的一部分,用于实现并发和并行操作,而线程共享进程的资源,通信更方便快捷,切换开销较小。本专题为大家提供线程和进程区别相关的各种文章、以及下载和课程。

2023.08.10

4238

6

Playwright 测试失败怎么办
Playwright 测试失败怎么办

Playwright测试失败专题汇集超时、定位器匹配、浏览器提前关闭、依赖与插件配置、文件上传、SSL及Docker启动等故障文章,并介绍通过截图、报告和Trace定位错误。

2026.10.21

0

15

Playwright 页面操作指南
Playwright 页面操作指南

Playwright页面操作专题汇集元素定位、点击与输入、等待响应、多页面切换、Iframe、事件监听及文件处理的已审核文章,便于按操作场景查阅示例与常见问题。

2026.10.21

0

16

Playwright 入门教程
Playwright 入门教程

Playwright入门专题汇集测试框架安装、VS Code配置、录制脚本、编写首个用例、运行调试及查看报告的已审核文章,帮助初学者搭建端到端测试流程。

2026.10.21

0

16

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

2026.10.16

100

10

OpenJDK怎么配置Java开发环境
OpenJDK怎么配置Java开发环境

怎样用OpenJDK搭建开发环境?本专题介绍版本选择、下载安装、环境变量配置和编译运行验证,帮助你理清JDK的作用及基本配置流程,并通过简单程序检查环境是否可用,为后续项目开发做好准备。

2026.10.16

80

10

OpenJDK怎么部署Java应用
OpenJDK怎么部署Java应用

Java项目开发完成后,怎样部署到目标环境并正常运行?本专题介绍OpenJDK应用部署流程,涵盖运行环境准备、版本兼容检查、应用打包、启动参数配置和日志查看,帮助你理清部署前后的操作顺序,减少环境差异造成的运行问题。

2026.10.16

40

10

Revel框架模板渲染与表单验证
Revel框架模板渲染与表单验证

本专题围绕Revel框架视图层开发,介绍模板语法、变量输出、布局复用、表单提交、参数绑定与验证规则,帮助开发者完成安全规范的页面交互。

2026.10.16

40

15

Revel框架MVC路由与控制器
Revel框架MVC路由与控制器

本专题聚焦Revel框架MVC核心机制,讲解路由定义、控制器Action、参数绑定、请求响应和反向路由,并结合常见场景梳理接口请求处理流程。

2026.10.16

20

15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
热门推荐
/
最新课程
phpStudy极速入门视频教程
phpStudy极速入门视频教程

共6课时 | 54.7万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时 | 133.9万人学习