HTML5 Web Workers 详解 (2)

2024-06-02 00:12

本文主要是介绍HTML5 Web Workers 详解 (2),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

三、高级使用

1. 多个 Web Workers

你可以在主线程中创建多个 Web Workers 来处理并行任务。例如,下面的代码创建了两个 Worker 并分别处理不同的任务。

主线程代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Multiple Web Workers Example</title>
</head>
<body><h1>Multiple Web Workers Example</h1><button onclick="startWorkers()">Start Workers</button><p id="result1"></p><p id="result2"></p><script>var worker1, worker2;// 启动多个 Web Workerfunction startWorkers() {// 检查浏览器是否支持 Web Workersif (typeof(Worker) !== "undefined") {if (!worker1) {// 创建第一个 Worker 实例worker1 = new Worker("worker1.js");// 定义 Worker 接收消息的处理函数worker1.onmessage = function(event) {// 将 Worker 返回的结果显示在页面上document.getElementById("result1").innerHTML = "Worker 1 result: " + event.data;};}if (!worker2) {// 创建第二个 Worker 实例worker2 = new Worker("worker2.js");// 定义 Worker 接收消息的处理函数worker2.onmessage = function(event) {// 将 Worker 返回的结果显示在页面上document.getElementById("result2").innerHTML = "Worker 2 result: " + event.data;};}// 向 Worker 发送消息worker1.postMessage("Start working 1");worker2.postMessage("Start working 2");} else {document.getElementById("result1").innerHTML = "Sorry, your browser does not support Web Workers...";document.getElementById("result2").innerHTML = "Sorry, your browser does not support Web Workers...";}}</script>
</body>
</html>
Worker 1 代码(worker1.js)
// worker1.js// 监听主线程发送的消息
onmessage = function(event) {var result = 0;// 模拟一个耗时计算任务for (var i = 0; i < 500000000; i++) {result += i;}// 向主线程发送结果postMessage(result);
};
Worker 2 代码(worker2.js)
// worker2.js// 监听主线程发送的消息
onmessage = function(event) {var result = 1;// 模拟一个耗时计算任务for (var i = 1; i < 1000; i++) {result *= i;}// 向主线程发送结果postMessage(result);
};

2. 共享 Worker

共享 Worker 可以被同一个页面的不同脚本或不同页面的脚本共享使用。需要通过 SharedWorker 构造函数来创建共享 Worker。

主线程代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Shared Web Workers Example</title>
</head>
<body><h1>Shared Web Workers Example</h1><button onclick="startSharedWorker()">Start Shared Worker</button><p id="result"></p><script>var sharedWorker;// 启动共享 Web Workerfunction startSharedWorker() {// 检查浏览器是否支持 Shared Workersif (typeof(SharedWorker) !== "undefined") {if (!sharedWorker) {// 创建新的 Shared Worker 实例,指定工作脚本文件sharedWorker = new SharedWorker("sharedWorker.js");// 定义 Worker 接收消息的处理函数sharedWorker.port.onmessage = function(event) {// 将 Worker 返回的结果显示在页面上document.getElementById("result").innerHTML = event.data;};}// 向 Worker 发送消息sharedWorker.port.postMessage("Start shared working");} else {document.getElementById("result").innerHTML = "Sorry, your browser does not support Shared Web Workers...";}}</script>
</body>
</html>
共享 Worker 代码(sharedWorker.js)
// sharedWorker.js// 监听主线程发送的连接事件
onconnect = function(event) {var port = event.ports[0];// 监听连接端口的消息port.onmessage = function(event) {var result = "Shared Worker received: " + event.data;// 向连接端口发送结果port.postMessage(result);};
};

3. Worker 的限制

  • 不能访问 DOM:Web Workers 没有访问 DOM 的权限。
  • 同源策略:Web Workers 只能加载与其自身脚本同源的资源。
  • 限制的 API:Web Workers 不能访问某些浏览器 API,例如 alertconfirmlocalStorage 等。

四、实战示例:计算质数

下面我们将展示一个更复杂的示例,

利用 Web Worker 来计算质数。

主线程代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Prime Number Calculation with Web Workers</title>
</head>
<body><h1>Prime Number Calculation with Web Workers</h1><button onclick="startPrimeWorker()">Start Prime Calculation</button><p id="primeResult"></p><script>var primeWorker;// 启动 Web Worker 进行质数计算function startPrimeWorker() {if (typeof(Worker) !== "undefined") {if (!primeWorker) {// 创建新的 Web Worker 实例,指定工作脚本文件primeWorker = new Worker("primeWorker.js");// 定义 Worker 接收消息的处理函数primeWorker.onmessage = function(event) {// 将 Worker 返回的结果显示在页面上document.getElementById("primeResult").innerHTML = "Largest Prime: " + event.data;};}// 向 Worker 发送消息primeWorker.postMessage(1000000); // 计算小于 1000000 的质数} else {document.getElementById("primeResult").innerHTML = "Sorry, your browser does not support Web Workers...";}}</script>
</body>
</html>
Web Worker 代码(primeWorker.js)
// primeWorker.js// 判断一个数是否为质数
function isPrime(num) {for (var i = 2; i <= Math.sqrt(num); i++) {if (num % i === 0) {return false;}}return num > 1;
}// 监听主线程发送的消息
onmessage = function(event) {var max = event.data;var largestPrime = 0;// 计算小于 max 的所有质数for (var i = 2; i <= max; i++) {if (isPrime(i)) {largestPrime = i;}}// 向主线程发送结果postMessage(largestPrime);
};

五、常见问题与解决方法

1. 为什么我的 Worker 无法访问 DOM?

Web Workers 设计为运行在独立的上下文中,因此无法直接访问 DOM。如果需要操作 DOM,可以通过消息传递与主线程通信,让主线程处理 DOM 操作。

2. 如何在 Worker 中使用外部脚本?

可以使用 importScripts 方法在 Worker 中加载外部脚本:

importScripts('script1.js', 'script2.js');

3. 如何调试 Web Workers?

调试 Web Workers 可以使用浏览器的开发者工具。在 Chrome 中,可以在 Sources 面板中找到 Worker 的脚本,并设置断点进行调试。

这篇关于HTML5 Web Workers 详解 (2)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1022498

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

Java Web指的是什么

Java Web指的是使用Java技术进行Web开发的一种方式。Java在Web开发领域有着广泛的应用,主要通过Java EE(Enterprise Edition)平台来实现。  主要特点和技术包括: 1. Servlets和JSP:     Servlets 是Java编写的服务器端程序,用于处理客户端请求和生成动态网页内容。     JSP(JavaServer Pages)

6.1.数据结构-c/c++堆详解下篇(堆排序,TopK问题)

上篇:6.1.数据结构-c/c++模拟实现堆上篇(向下,上调整算法,建堆,增删数据)-CSDN博客 本章重点 1.使用堆来完成堆排序 2.使用堆解决TopK问题 目录 一.堆排序 1.1 思路 1.2 代码 1.3 简单测试 二.TopK问题 2.1 思路(求最小): 2.2 C语言代码(手写堆) 2.3 C++代码(使用优先级队列 priority_queue)

BUUCTF靶场[web][极客大挑战 2019]Http、[HCTF 2018]admin

目录   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 [web][HCTF 2018]admin 考点:弱密码字典爆破 四种方法:   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 访问环境 老规矩,我们先查看源代码

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能