<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br /><br />
<script>
var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
if(typeof(w)=="undefined")
{
w=new Worker("dem.js");
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}
function stopWorker()
{
w.terminate();
}
</script>
</body>
</html>
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
一、概述
A web worker is a JavaScript running in the background, without affecting the performance of the page.
What is a Web Worker?
When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.
A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to
do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.
二、使用方法及步骤
（1）
检查浏览器是否支持
Check Web Worker Support
Before creating a web worker, check whether the user's browser supports it:
if(typeof(Worker)!=="undefined")
{
// Yes! Web worker support!
// Some code.....
}
else
{
// Sorry! No Web Worker support..
}
（2）
Create a Web Worker File
Now, let's create our web worker in an external JavaScript.
Here, we create a script that counts. The script is stored in the "demo_workers.js" file:
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
The important part of the code above is the postMessage() method - which is used to posts a message back to the HTML page.
Note: Normally web workers are not used for such simple scripts, but for more CPU intensive tasks.
（3）
Create a Web Worker Object
Now that we have the web worker file, we need to call it from an HTML page.
The following lines checks if the worker already exists, if not - it creates a new web worker object and runs the code in "demo_workers.js":
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
Then we can send and receive messages from the web worker.
Add an "onmessage" event listener to the web worker.
w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};
When the web worker posts a message, the code within the event listener is executed. The data from the web worker is stored in event.data.
（4）
Terminate a Web Worker
When a web worker object is created, it will continue to listen for messages (even after the external script is finished) until it is terminated.
To terminate a web worker, and free browser/computer resources, use the terminate() method:
w.terminate();
三、注意事项
Web Workers and the DOM
Since web workers are in external files, they do not have access to the following JavaScript objects:
The window object
The document object
The parent object
web worker must run in container
分享到：
相关推荐
"Web Worker版调用Face-Api.js"是一个解决方案，它利用Web Worker技术来封装并异步执行Face-API.js库，从而避免阻塞主线程，提供高性能的用户体验。以下是关于这个主题的详细知识点： 1. **Web Worker**：Web ...
然而，默认情况下，Webpack 不直接支持原生Web Worker的捆绑和编译。Web Worker是HTML5引入的一个特性，用于在后台线程中执行脚本，以实现多线程处理，避免阻塞主线程。由于Web Worker的特殊性，其加载和运行机制与...
NextJS Worker示例这是使Web Worker在NextJS项目中运行的示例。 要使用worker-loader将Web Worker加载到NextJS站点上，并允许在其worker上运行babel等webpack加载器，必须覆盖构建输出路径。 感谢。 // next.config....
Web Worker使得复杂的、计算密集型的任务可以在不阻塞用户界面的情况下运行，显著提升了Web应用的性能体验。下面我们将深入探讨Web Worker的基本概念、工作原理以及如何在实际项目中应用。 一、Web Worker基础 1. ...
Web Worker的出现就是为了缓解这一问题，它允许开发者创建额外的线程来处理计算密集型或长时间运行的任务，而不影响主线程上的用户交互。 Web Worker的使用主要包括以下几个步骤： 1. **创建Worker**: 使用`new ...
用于《vue3中使用Web Worker多线程》这篇文章的项目Demo下载 文章地址：https://blog.csdn.net/weixin_42063951/article/details/125300644
用于《vue3中使用Web Worker多线程》这篇文章的项目Demo下载 文章地址：https://blog.csdn.net/weixin_42063951/article/details/125300644
完整测试用例，含数据和第三方库 用于《web worker处理js长任务卡死，含引入第三方库》这篇文章的项目Demo下载 文章地址：https://blog.csdn.net/weixin_43718790/article/details/135197630
Web Worker的出现就是为了解决这个问题，它允许开发者创建后台线程来处理耗时的任务，而不会影响主线程，从而提高网页应用的性能和用户体验。 **Web Worker的基本概念和结构** 1. **Worker的创建**：开发者可以...
在JavaScript开发中，Web Worker是一种可以提升应用性能的技术，它允许我们在后台线程中执行耗时的计算任务，不阻塞用户界面。标题提到的"将独立函数类移动到Web Worker"是解决JavaScript单线程限制的有效手段。下面...
`react-worker-image`是一个专为解决这个问题而设计的库，它利用Web Worker技术在后台线程中加载图像，从而避免阻塞主线程，提高应用性能。本文将详细介绍这个React组件的工作原理、使用方法及其在图片编辑场景中的...
创建一个新的Web Worker，导入`via.js`库，然后在Worker中，你可以使用`via`对象来执行DOM操作。例如，你可以创建一个新的元素，设置属性，甚至添加事件监听器。所有这些操作都会被转换为消息传递到主线程，由主线程...
Web Worker Manager作为一个开源库，它的主要目标是简化Web Worker的创建、管理和通信流程，提供更高级别的抽象，使得开发者能够更加方便地利用Web Worker的多线程能力。它通常包含以下功能： 1. **Worker实例化和...
【Web Worker 在 WebGL 中的应用】 Web Worker 是一种在 Web 应用中实现后台线程处理的技术，用于解决 JavaScript 在浏览器环境中单线程运行的问题。它为浏览器提供了额外的 JavaScript 运行时环境，使得计算密集型...
5. Web Worker的实现方法：可以使用JavaScript创建Web Worker对象，并将JavaScript代码传递给Web Worker对象，然后Web Worker对象将执行JavaScript代码。 6. Web Worker的调试方法：可以使用浏览器的调试工具来调试...
node-webworker, NodeJS的WebWorkers实现 node-webworkers 是网络工作者API的一个实现，用于 node.js 。请参见这里的设计文档 。示例主源var sys = require('sys');var Worker = require('web
利用Render Props模式获得最大的灵活性以及易于使用的新Context API。 只需为Web Worker指定公共URL，您就可以访问它发送的任何消息或错误，以及postMessage处理程序。
Web Worker 是一种在浏览器环境中运行后台脚本的技术，它允许开发者在主线程之外创建独立的线程，处理计算密集型任务，从而不阻塞用户界面。这个“在Web Worker中运行一个模块”的主题，主要是关于如何利用...
WorkerDOM 是一个JavaScript库，它的主要目标是将DOM API和框架功能带入Web Worker环境。在Web Worker中执行DOM操作可以显著提升Web应用的性能，因为它允许我们在后台线程处理复杂的计算任务，而不阻塞主线程，从而...