JavaScript被设计为在单线程环境中运行,这意味着多个脚本不能同时运行。考虑一种情况,您需要处理UI事件,查询和处理大量API数据以及操纵DOM。
当CPU使用率很高时,JavaScript会挂起您的浏览器。让无涯教程举一个简单的示例,其中JavaScript经历一个大循环-
<!DOCTYPE HTML> <html> <head> <title>Big for loop</title> <script> function bigLoop() { for (var i=0; i <= 10000; i += 1) { var j=i; } alert("Completed " + j + "iterations" ); } function sayHello(){ alert("Hello sir...." ); } </script> </head> <body> <input type="button" onclick="bigLoop();" value="Big Loop" /> <input type="button" onclick="sayHello();" value="Say Hello" /> </body> </html>
它将产生以下输出-
可以使用 Web Workers 处理上述情况,他们将执行所有计算量大的任务,而不会中断用户界面,并且通常在单独的线程上运行。
Web Workers允许长时间运行的脚本不会被响应单击或其他用户交互的脚本中断,并允许执行长任务而不会产生使页面保持响应的状态。
在Web Worker中执行脚本时,它无法访问网页的窗口对象(window.document),这意味着Web Worker无法直接访问网页和DOM API。尽管Web Workers不能阻止浏览器UI,但是他们仍然可以消耗CPU周期并降低系统响应速度。
Web Workers使用JavaScript文件的URL初始化,其中包含该Worker将执行的代码。此代码设置事件侦听器并与从主页派生事件的脚本进行通信。
var worker=new Worker('bigLoop.js');
如果指定的javascript文件存在,浏览器将产生一个新的工作线程,该线程异步下载。
如果您的应用程序具有多个支持的JavaScript文件,则可以将其导入 importScripts()方法,该方法将文件名作为参数,并以逗号分隔,如下所示-
importScripts("helper.js", "anotherHelper.js");
生成Web Worker后,将使用 postMessage()方法完成Web Worker及其父页面之间的通信。根据您的浏览器版本,postMessage()可以接受字符串或JSON对象作为其单个参数。
通过使用主页中的 onmessage 事件访问由Web Worker传递的消息。现在,让无涯教程使用Web Worker编写bigLoop示例。以下是主页(hello.htm),它将产生一个Web工作者来执行循环并返回变量 j 的最终值-
<!DOCTYPE HTML> <html> <head> <title>Big for loop</title> <script> var worker=new Worker('bigLoop.js'); worker.onmessage=function (event) { alert("Completed " + event.data + "iterations" ); }; function sayHello() { alert("Hello sir...." ); } </script> </head> <body> <input type="button" onclick="sayHello();" value="Say Hello"/> </body> </html>
以下是bigLoop.js文件的内容。这利用 postMessage() API将通信传递回主页-
链接:https://www.learnfk.comhttps://www.learnfk.com/html5/html5-web-workers.html
来源:LearnFk无涯教程网
for (var i=0; i <= 1000000000; i += 1) { var j=i; } postMessage(j);
这将产生以下输出-
Web Workers不会自己停下来,但是启动他们的页面可以通过调用 terminate()方法来阻止他们。
worker.terminate();
下面显示了Web Worker JavaScript文件中的错误处理函数示例,该函数将错误记录到控制台。使用错误处理代码,上面的示例将如下所示-
<!DOCTYPE HTML> <html> <head> <title>Big for loop</title> <script> var worker=new Worker('bigLoop.js'); worker.onmessage=function (event) { alert("Completed " + event.data + "iterations" ); }; worker.onerror=function (event) { console.log(event.message, event); }; function sayHello() { alert("Hello sir...." ); } </script> </head> <body> <input type="button" onclick="sayHello();" value="Say Hello"/> </body> </html>
以下是检测浏览器中可用的Web Worker函数支持的语法-
<!DOCTYPE HTML> <html> <head> <title>Big for loop</title> <script src="/js/modernizr-1.5.min.js"></script> <script> function myFunction() { if (Modernizr.webworkers) { alert("Congratulation!! you have web workers support." ); } else { alert("Sorry!! you do not have web workers support." ); } } </script> </head> <body> <button onclick="myFunction()">Click me</button> </body> </html>
这将产生以下输出-
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)