- 您好！欢迎来到鲲鹏知舟
HTML5 Web Workers 网络工作者
Web Workers 是独立的 JavaScript 代码，它在网页后台运行而不影响用户界面。
什么是网络工作者？
每个人都希望网站或应用程序运行速度快，并且可以同时执行多个操作而不影响页面的性能。但是，有时我们在执行一些大型操作时会遇到一些延迟响应或页面性能下降。所以这个问题可以使用 Web Workers 来解决。
Web Workers 是多线程对象，它可以并行执行多个 JavaScript，而不会影响应用程序或网页的性能。
以下是 Web Workers 的一些主要功能：
网络工作者是线程化的 JavaScript。
Web-Worker 是内核级线程。
网络工作者需要更多的空间和 CPU 时间。
网络工作者提高了网站的速度。
Web-worker 在客户端（而不是服务器端）执行代码。
Web 工作线程使用 postMessage() 回调方法相互通信
提示：在使用 HTML Web Workers 之前，您必须了解 JavaScript，因为 Web Worker 依赖于 JavaScript。
Web Worker 的类型：
在 HTML5 中，Web Workers 有两种类型：
专用网络工作者：
专用工作者只能由一个调用它的脚本访问。专用工作线程在其父线程结束时结束。专用工作者仅由一个或单个主线程使用。
共享网络工作者：
它可以被多个脚本共享，并且可以使用端口进行通信。不同的窗口、iframe 或工作人员可以访问共享工作人员。
注意：在本节中，我们将使用专用的 Web Workers。
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 文件。
这里我们创建了一个用于计算数字平方的 web worker 文件。并使用名称“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 线程和主线程之间发送消息：
Worker 线程的所有通信都依赖于postMessage()方法和onmessage事件处理程序。
终止 Web Worker：
如果你想立即终止主线程中当前正在运行的worker，那么你可以通过调用Web Worker的terminate()方法来终止它。这是 Web Worker 终止的语法：
worker.terminate();
Web Worker 也可以通过调用close()方法在工作线程中终止。
例子
<!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线程之间发送消息。
worker.postMessage(num); 这是用于在 Worker 线程和主线程之间进行通信的方法。使用此方法工作线程将结果返回给主线程。
支持浏览器
| 元素 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Web Workers | Yes | Yes | Yes | Yes | Yes |
-
使用社交账号登录,本站支持