本文概述
- 什么是网络工作者?
- 网络工作者的类型
- Web Workers浏览器支持
- 创建Web Worker文件
- 创建Web Worker对象
- 在辅助线程和主线程之间发送消息
- 终止Web Worker
- 浏览器支持
什么是网络工作者?每个人都希望一个网站或应用程序能够快速运行, 并且可以在不影响页面性能的情况下同时执行多项操作。但是, 有时在执行一些大操作时会遇到一些延迟响应或页面性能下降。因此, 可以使用Web Workers解决此问题。
Web Worker是一个多线程对象, 可以并行执行多个JavaScript, 而不会影响应用程序或网页的性能。
以下是Web Workers的一些关键功能:
- 网络工作者是线程化的JavaScript。
- 网络工作者是内核级的线程。
- 网络工作者需要更多的空间和CPU时间。
- 网络工作者提高了网站的速度。
- 网络工作者在客户端(而不是服务器端)执行代码。
- Web worker线程使用postMessage()回调方法相互通信
- 专用的网络工作者:
- 共享的网络工作者:
注意:在本节中, 我们将使用专用的Web Worker。Web Workers浏览器支持在首先学习Web Workers之前, 我们需要检查浏览器支持。因此, 以下是检查你的浏览器是否支持的代码。
例
<
!DOCTYPE html>
<
html>
<
head>
<
title>
Web Worker API<
/title>
<
/head>
<
body>
<
h2>
Example to check the browser support of Web Workers<
/h2>
<
div id="supported">
<
/div>
<
div id="unsupported">
<
/div>
<
button onclick="worker();
">
click me<
/button>
<
script type="text/javascript">
function worker() {if(typeof(Worker)!=="undefined"){document.getElementById("supported").innerHTML="Supporting the browser";
}else{document.getElementById("unsupported").innerHTML="Not supporting";
}}<
/script>
<
/body>
<
/html>
立即测试
创建Web Worker文件要创建Web Worker文件, 我们需要创建一个外部JavaScript文件。
在这里, 我们创建了一个用于计算数字平方的网络工作者文件。并将其保存为名称“ 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()构造函数。
【HTML5网络工作者Web Worker】以下是调用和创建Web Worker对象的语法:
var worker= new Worker('worker.js');
在辅助线程和主线程之间发送消息Worker线程的所有通信均取决于postMessage()方法和onmessage事件处理程序。
终止Web Worker如果要立即终止主线程中当前正在运行的工作程序, 则可以通过调用Web Worker的Terminate()方法来终止它。以下是Web Worker终止的语法:
worker.terminate();
也可以通过调用close()方法在工作线程中终止Web Worker。
例
<
!DOCTYPE html>
<
html>
<
head>
<
style>
.div1{margin-left: 350px;
}<
/style>
<
/head>
<
body>
<
!-- Sqaure Output Result -->
<
div class="div1">
<
h2>
Example of Web Worker<
/h2>
<
label>
Enter the number to find the square<
/label>
<
br>
<
input type="text" name="num" id="num">
<
br>
<
br>
<
button id="submit">
Submit<
/button>
<
button id="other">
Wait<
/button>
<
div id="text">
<
/div>
<
/div>
<
script type="text/javascript">
document.getElementById("other").onclick=function() {alert("Hey! Web Worker is working, and you can wait for the result.");
}//Web-worker Code.....var worker= new Worker("worker.js");
worker.onmessage= function(event){document.getElementById("text").innerText= event.data;
}document.getElementById("submit").onclick= function(){var num= document.getElementById("num").value;
worker.postMessage(num);
}<
/script>
<
p>
<
b>
Note:Try to enter a big number, and then click on other button. The page will respond properly<
/b>
<
/p>
<
/body>
<
/html>
立即测试
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 = function(event):用于在主线程和辅助线程之间发送消息。
- worker.postMessage(num); 这是用于在Worker线程和主线程之间进行通信的方法。使用此方法, 工作线程将结果返回到主线程。
API | Chrome | IE | Firefox | Opera | Safari |
Web Workers | Yes | Yes | Yes | Yes | Yes |
推荐阅读
- 使用CSS的HTML样式
- HTML Web存储
- HTML wbr标签
- HTML视频标签
- HTML var标记
- HTML URL编码
- HTML无序列表| HTML项目符号列表
- HTML u标记
- HTML教程介绍