HTML5 Web Workers

Web Workers是独立的JavaScript代码，它们在网页的后台运行而不影响用户界面。

什么是Web Workers?

每个人都希望一个网站或应用程序能够快速运行，并且可以在不影响页面性能的情况下同时执行多项操作。但是，有时我们在执行一些大操作时会遇到一些延迟响应或页面性能下降。因此，可以使用Web Workers解决此问题。

Web Worker是一个多线程对象，可以并行执行多个JavaScript，而不会影响应用程序或网页的性能。

以下是Web Workers的一些关键功能：

• Web Workers是线程化的JavaScript。
• 内核级的线程。
• 需要更多的空间和CPU时间。
• 提高了网站的速度。
• 在客户端(而不是服务器端)执行代码。
• Web worker线程使用postMessage()回调方法相互通信

提示：使用HTML Web Worker之前，您必须具有JavaScript知识，因为Web Worker依赖JavaScript。

Web Workers的类型：

在HTML5中，Web Workers有两种类型：

• 专用的Web Workers：

专用工作者只能通过一个调用它的脚本来访问。专用工作线程结束，其父线程结束。专用工作者只能由一个或单个主线程使用。

• 共享的Web Workers：

它可以由多个脚本共享，并且可以使用端口进行通信。共享的工作程序可以通过不同的窗口，iframe或工作程序访问。

注意：在本节中，我们将使用专用的Web Worker。

Web Workers浏览器支持：

在首先学习Web Workers之前，我们需要检查浏览器支持。因此，以下是检查您的浏览器是否支持的代码。

例

  


Example to check the browser support of Web Workers


click me

创建Web工作文件：

要创建Web Worker文件，我们需要创建一个外部JavaScript文件。

在这里，我们创建了一个用于计算数字平方的Web Workers文件。并将其保存为名称“ worker.js”。

以下是worker.js文件的代码。

onmessage =function(event){
var num= event.data;
var sqr=num*num;
var result="";
for(var i=1;i<=sqr; i++)
{
result= "Sqaure result is:"+ " "+i;
}
postMessage(result);
}

创建Web Worker对象：

在上面的“ worker.js”文件中，我们为Web Worker创建了JS文件，现在它需要调用HTML文件。要创建Web Worker对象，您需要调用Worker()构造函数。

以下是调用和创建Web Worker对象的语法：

     var worker= new Worker('worker.js');

在工作线程和主线程之间发送消息：

Worker线程的所有通信均取决于postMessage()方法和onmessage事件处理程序。

终止Web Worker：

如果要立即终止主线程中当前正在运行的工作程序，则可以通过调用Web Worker的Terminate()方法来终止它。以下是Web Worker终止的语法：

  worker.terminate();     

也可以通过调用close()方法在工作线程中终止Web Worker。

例

  




  
Example of Web Worker
Enter the number to find the square




Submit
Wait



Note:Try to enter a big number, and then click on other button. The page will respond properly

Worker.js文件：

onmessage=function(event){
var num= event.data;
var sqr=num*num;
var result="";
for(var i=1;i<=sqr; i++)
{
result= "Sqaure result is:"+ " "+i;
}
postMessage(result);
}

示例说明：

在上面的HTML文件示例中，我们使用了

• var worker = new Worker(“ worker.js”);创建Web Worker对象。
• worker.onmessage =函数(事件)：用于在主线程和Worker线程之间发送消息。
• worker.postMessage(num);这是用于在Worker线程和Main线程之间进行通信的方法。使用此方法，工作线程将结果返回到主线程。

浏览器支持：

API	Chrome	IE	Firefox	Opera	Safari
Web Workers	Yes	Yes	Yes	Yes	Yes