HTML5 Web Workers 详解 (2)

最新推荐文章于 2024-07-04 00:59:27 发布
最新推荐文章于 2024-07-04 00:59:27 发布
阅读量1.4k 收藏 28
点赞数 35
分类专栏： HTML5\CSS3 文章标签： 前端 html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/imdeity/article/details/139377893
版权

三、高级使用

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 Worker
        function startWorkers() {
            // 检查浏览器是否支持 Web Workers
            if (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 Worker
        function startSharedWorker() {
            // 检查浏览器是否支持 Shared Workers
            if (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，例如 alert、confirm 和 localStorage 等。

四、实战示例：计算质数

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

利用 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 的脚本，并设置断点进行调试。

昱晏
关注
  • 35
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML 5 Web Workers
www.i201314.net
10-11 548
web worker 是运行在后台的 JavaScript，不会影响页面的性能。 什么是 Web Worker？ 当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。 web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
HTML5 Web Workers 详解 (1)
一名全栈开发工程师
06-01 1123
Web Workers 允许你在后台线程中运行 JavaScript 代码，主线程和 Web Worker 线程通过消息传递进行通信。
HTML5之webworker详解
静水
02-28 2240
一、介绍 当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。 web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。 二、限制 Web Worker无法访问DOM节点； Web Worker无法访问全局变量或是全局函数； Web...
html5应用缓存教程视频教程,html5应用缓存与Web Workers的图文详解
weixin_33558072的博客
06-10 102
在html5当中引入了应用程序缓存，这意味着web应用可以进行缓存，并且可以在没有网络连接的时候进行访问。应用缓存的优势离线浏览，用户可以在离线的时候浏览已经加载并且缓存好的数据加快加载速度。减少服务器负载。实现用缓存如果启用应用程序缓存，需要在标签当中包含manifest属性，manifest文件的建议扩展名是:”.appcache”manifest文件manifest文件为我们提供了三种缓存的...
html worker 执行函数,H5+WebWorkers多线程开发使用详解
weixin_33206646的博客
06-23 489
我们都知道，浏览器执行js代码是单线程的，当页面脚步执行时，页面是没办法响应别的的，直到脚步的结束，而这里介绍的WebWorkers就可以改变这一切。WebWorkers是运行在后台的js代码，独立于其他脚本，不会影响页面的性能。我们可以继续做任何愿意做的事情：点击、选取内容等等，而此时WebWorkers在后台运行。所有主流浏览器均支持webworker，除了InternetExplorer。第...
前端 Web Workers 简介
weixin_46787337的博客
12-10 489
以前我们总说，JS 是单线程没有多线程，当 JS 在页面中运行长耗时同步任务的时候就会导致页面假死影响用户体验，从而需要设置把任务放在任务队列中；执行任务队列中的任务也并非多线程进行的，然而现在 HTML5 提供了我们前端开发这样的能力 - Web Workers API，我们一起来看一看 Web Worker 是什么，怎么去使用它，在实际生产中如何去用它来进行产出。Web Workers 使得一个 Web 应用程序可以在与主执行线程分离的后台线程中运行一个脚本操作。
html5实例开发详解,HTML 5开发精要与实例详解
weixin_39732316的博客
06-05 114
这是一本以综合性案例为导向并辅之以精要知识点讲解的html5实战教程。内容分为两大部分：第一部分通过一系列中大型案例全方位对html5的各个重要知识点进行了详细的讲解，每个案例包含案例概述、页面效果展示、案例所涉及主要知识点(精要)、源代码剖析4个部分，读者既能根据书中的步骤动手实践，又能重点学习案例中用到的核心理论知识，同时还能领会源代码的设计思路和方法；第二部分讲解了jwebsocket、rg...
HTML5新特性总结及对应详解
DOM曼珠沙华的博客
05-07 696
HTML是创建网页的标准标记语言，描述了使用标记的网页结构，元素由标签显示，浏览器不会显示HTML标签，而是使用它们呈现页面的内容。
HTML5新特性详解
if(true){ I love it }
03-16 4626
转载请注明出处： http://blog.csdn.net/gane_cheng/article/details/52819118 http://www.ganecheng.tech/blog/52819118.html （浏览效果更好） 2014年10月29日，W3C宣布，经过接近8年的艰苦努力，HTML5标准规范终于制定完成。 Html5将会取代1999年制定的HTML 4.01、XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝
html5常用知识详解
10-07
2. **结构元素**：HTML5引入了更清晰的文档结构，如`<header>`定义页面头部，`<nav>`用于导航链接，`<section>`表示文档中的一个独立部分，`<article>`定义独立的内容单元，`<aside>`作为相关内容的侧边栏，`...
HTML5开发精要与实例详解
08-23
本教程“HTML5开发精要与实例详解”旨在深入剖析HTML5的核心特性，并通过丰富的实例帮助开发者掌握实际应用技巧。 一、HTML5的新特性 1. 结构化元素：HTML5引入了如、、、等新元素，使得网页结构更加清晰，有利于...
《HTML5开发精要与实例详解》配套源码
11-21
《HTML5开发精要与实例详解》这本书无疑是一本深入学习HTML5的优秀教程，通过配套的源码，我们可以更直观地理解并实践书中的理论知识。 首先，HTML5的新元素是其一大亮点。例如，`<header>`、`<footer>`、`<nav>`和...
HTML5详解 Html5实战
01-31
HTML5是下一代超文本标记语言，它在2014年正式成为W3C的推荐标准，极大地丰富了Web开发的潜力。HTML5的核心目标是提高用户体验，简化开发者的工作，并推动互联网应用程序的进步。本篇文章将深入探讨HTML5的各个方面...
Vuex 核心揭秘：打造高效前端状态库
a3098448071的博客
07-03 1027
状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。
在 .NET 8 Web API 中实现弹性
技术探索驿站
07-03 514
通过执行这些步骤，您已使用 Microsoft.Extensions.Http.Resilience 库将弹性集成到 .NET 8 Web API 项目中。重试策略、断路器设置和超时将有助于确保您的 API 能够抵御瞬时故障，从而提高其可靠性和用户体验。
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1273
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue前端打包
最新发布
weixin_63680330的博客
07-04 182
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
2022年优秀-HTML开发微信企业号的示例.pptx
11-13
Web Workers和Web Socket则为高性能的后台处理和实时通信提供了可能，使得Web应用可以实现更多原本只能在桌面应用中实现的功能。 对于微信企业号开发，HTML5的这些特性使得开发者能够创建功能强大、用户体验良好的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值