代码改变世界

html5 web worker

  youxin  阅读(427)  评论(0)  编辑  收藏  举报

A web worker is a JavaScript running in the background, without affecting the performance of the page.

web worker是运行在后台的js，不影响页面的性能。

What is a Web Worker?

When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.

当执行js脚本时，页面是不可响应的直到脚本运行完。

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.

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

The example below creates a simple web worker that count numbers in the background:

 

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..
  }

 

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.

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.

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();
 
完整例子：
复制代码
<!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("demo_workers.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>
复制代码

demo_workers.js:

复制代码
var i=0;

function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();
复制代码

 

编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
历史上的今天：
2012-11-06 vs2010画uml图
2011-11-06 js Arrays
2011-11-06 我希望四年前就有人告诉我的事情
2011-11-06 实用javascript代码收藏
2011-11-06 加载Google cdn jQuery库
2011-11-06 Visual Studio 2010 无法打开 源 文件 "iostream.h"
2011-11-06 eclipse相关技巧总结及eclipse提速
点击右上角即可分享
微信分享提示