What is Web Worker? When a script is executed on an HTML page, the page status does not respond until the script is complete. Web worker is a JavaScript running in the background, independent of other scripts, and does not affect the page performance. You can continue to do anything you want: Click, select content, and so on. At this time, web worker runs in the background. Browsers support all mainstream browsers, except Internet Explorer. HTML5 Web Workers instance check whether Web Worker supports [html] if (typeof (worker) before creating a web Worker )! = "Undefined") {// Yes! Web worker support! // Some code...} else {// Sorry! No Web Worker support ..} if (typeof (Worker )! = "Undefined") {// Yes! Web worker support! // Some code...} else {// Sorry! No Web Worker support ..} create a web worker file. Now, let's create our web worker in an external JavaScript. Here, we have created a counting script. This script is stored in the "demo_workers.js" file: [html] var I = 0; function timedCount () {I = I + 1; postMessage (I); setTimeout ("timedCount () ", 500);} timedCount (); var I = 0; function timedCount () {I = I + 1; postMessage (I); setTimeout (" timedCount ()", 500);} timedCount (); an important part of the code above is the postMessage () method, which is used to return a message to an HTML page. Note: web worker is usually not used for such a simple script, but for tasks that consume more CPU resources. To create a Web Worker object, we already have a web worker file. Now we need to call it from the HTML page. The following code checks whether a worker exists. if no worker exists,-It creates a new web worker object and runs the code in "demo_workers.js": [html] if (typeof (w) = "undefined") {w = new Worker ("demo_workers.js");} if (typeof (w) = "undefined ") {w = new Worker ("demo_workers.js");} Then we can start and receive messages from the web worker. Add an "onmessage" event listener to the web worker: [html] w. onmessage = function (event) {document. getElementById ("result "). innerHTML = event. data ;}; w. onmessage = function (event) {document. getElementById ("result "). innerHTML = event. data ;}; when a web worker transmits a message, the code in the event listener is executed. Event. data contains data from event. data. Terminate a Web Worker. When a web worker object is created, it will continue to listen to messages (even after the external script is complete) until it is terminated. To terminate web worker and release Browser/computer resources, use the terminate () method: [html] w. terminate (); w. terminate (); complete Web Worker instance code we have seen the Worker code in the demo_workers.js file. The following is the code for the HTML page: [html] <! DOCTYPE html> <body> <p> Count numbers: <output id = "result"> </output> </p> <button onclick = "startWorker () "> Start Worker </button> <button onclick =" stopWorker () "> Stop Worker </button> <br/> <script> var w; function startWorker () {if (typeof (Worker )! = "Undefined") {if (typeof (w) = "undefined") {w = new Worker ("demo_workers.js");} w. onmessage = function (event) {document. getElementById ("result "). innerHTML = event. data ;};} else {document. getElementById ("result "). innerHTML = "Sorry, your browser does not support Web Workers... ";}} function stopWorker () {w. terminate () ;}</script> </body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
