HTML5网络工作者Web Worker

本文概述

  • 什么是网络工作者?
  • 网络工作者的类型
  • 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()构造函数。
【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

    推荐阅读