srcmini本文概述
- 什么是网络工作者？
- 网络工作者的类型
- Web Workers浏览器支持
- 创建Web Worker文件
- 创建Web Worker对象
- 在辅助线程和主线程之间发送消息
- 终止Web Worker
- 浏览器支持
Web Workers是独立的JavaScript代码, 它们在网页的后台运行而不影响用户界面。
什么是网络工作者？
每个人都希望一个网站或应用程序能够快速运行, 并且可以在不影响页面性能的情况下同时执行多项操作。但是, 有时在执行一些大操作时会遇到一些延迟响应或页面性能下降。因此, 可以使用Web Workers解决此问题。
Web Worker是一个多线程对象, 可以并行执行多个JavaScript, 而不会影响应用程序或网页的性能。
以下是Web Workers的一些关键功能：
- 网络工作者是线程化的JavaScript。
- 网络工作者是内核级的线程。
- 网络工作者需要更多的空间和CPU时间。
- 网络工作者提高了网站的速度。
- 网络工作者在客户端（而不是服务器端）执行代码。
- Web worker线程使用postMessage()回调方法相互通信
提示：使用HTML Web Worker之前, 你必须具有JavaScript知识, 因为Web Worker依赖JavaScript。
网络工作者的类型
在HTML5中, Web Workers有两种类型：
- 专用的网络工作者：
专用工作者只能通过一个调用它的脚本来访问。专用工作线程结束, 其父线程结束。专用工人仅由一个或单个主线程使用。
- 共享的网络工作者：
它可以由多个脚本共享, 并且可以使用端口进行通信。共享的工作程序可以通过不同的窗口, iframe或工作程序访问。
注意：在本节中, 我们将使用专用的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()构造函数。
以下是调用和创建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 |
评论前必须登录！
注册