Web Workers are a welcome addition to the HTML. Since JavaScript is not a multiple threaded environment, it becomes impossible to run multiple scripts at the same time. Also when running scripts in html, the web page becomes unresponsive until the script stops or has run its course(this affects performance and leads to a bad user experience).
\n
\nWeb workers allows web pages or browsers run scripts in the background. It’s always better to run CPU intensive scripts in the background to avoid distorting the user experience and causing the webpage to become unresponsive.
\n
\n
\n
\n[ulp id=’tgm4cmEWcKUikZNn’]
\n
\nIn this example we are going to learn about HTML5 Web Workers and how to use them. For this example we will use:<\/p>\n
Since Web workers run JavaScript in the background, web page performance and user experience is not distorted or affected. To create a new worker you simply<\/p>\n
var worker= new Worker(\"worker.js\");\/\/ creating a new worker.\r\n<\/pre>\nWe simply instantiate the
Worker()<\/code>object and passing the URI of the JS file to run as an argument. Before spawning a worker to run JS code, it is sensible to check if the browser supports it(for backward compatibility). You can do this by wrapping your code in anif <\/code> statement.<\/p>\nif\u00a0(typeof(Worker) !==\"undefined\") {\/\/ web workers are supported in this browser\r\n\u00a0\u00a0\u00a0var worker= new Worker(\"worker.js\");\/\/ creating a new worker.\r\n}\u00a0else\u00a0{\/\/web worker not supported\r\n\u00a0\u00a0\u00a0alert(\"Your browser does not support web workers, please download the latest version\");\r\n\r\n}\r\n<\/pre>\nIf the browser supports web workers, we easily create a web worker object, with the URI of the required JS file as an argument. If the JS file supplied as an argument does not exist, the process or worker fails silently.
\nNote:<\/b> Web workers do not have access to the following JavaScript objects:<\/p>\n\n
- The window object<\/li>\n
- The document object<\/li>\n<\/ul>\n
1.1 Sending messages to and from a worker<\/h3>\n
In this section we will learn how to send messages to our worker and receive messages from our worker. To send message to the worker we simply call
\nworker.postMessage()<\/code>
\nDepending on browser vendor or version, you can pass a string, JSON or an array as an argument to thepostMessage<\/code><\/p>\nif\u00a0(typeof(Worker) !==\"undefined\") {\/\/ web workers are supported in this browser\r\n\u00a0\u00a0\u00a0var worker= new Worker(\"worker.js\");\/\/ creating a new worker.\r\nworker.postMessage(\"processs this\");\/\/post a message to the worker \r\n}\u00a0else\u00a0{\/\/web worker not supported\r\n\u00a0\u00a0\u00a0alert(\"Your browser does not support web workers, please download the latest version\");\r\n}<\/pre>\nInside the worker we can process information or message received by registering an event handler.<\/p>\n
onmessage = function(e) { \r\nconsole.log('Message has been received and it is been processed'); \/\/log the message to console\r\nvar workerResult = e.data; console.log('returning message back to main script'); postMessage(workerResult);\r\n }<\/pre>\nWe can send messages from our worker by calling
postMessage()<\/code> and passing the data we want to send as an argument. To receive messages sent by our worker we simply use:<\/p>\nworker.onmessage=function(e){\r\n\/\/the data sent by the worker can be accessed is available in the event data attribute\r\n\r\n}\r\n<\/pre>\nLets create a full example to describe what we have learnt so far.<\/p>\n
index.html<\/em><\/span><\/p>\n
<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:hidden;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title>HTML5 WEB WORKER EXAMPLE<\/title>\r\n\t\r\n\t<\/head>\r\n\t<body onload=init()>\r\n<script>\r\nif\u00a0(typeof(Worker) !==\"undefined\") {\/\/ web workers are supported in this browser\r\n\u00a0\u00a0\u00a0var worker= new Worker(\"index.js\");\/\/ creating a new worker.\r\n}\u00a0else\u00a0{\/\/web worker not supported\r\n\/\/alert the error\r\n\u00a0\u00a0\u00a0alert(\"Your browser does not support web workers, please download the latest version\");\r\n}\r\n\/\/function called to initialize some global variables\r\nfunction init(){\r\n\/\/store a reference to the textbox\r\nb= document.getElementById(\"press\");\r\n\/\/ add a click listener to the button\r\nb.addEventListener(\"click\",clicked);\r\nc= document.getElementById(\"text\");\r\n\r\n}\r\n\/\/function clicked when the button is clicked\r\nfunction clicked(){\r\n\/\/send a message to the worker js\r\nworker.postMessage(c.value);\r\n\r\n\r\n}\r\n\/\/here we listen for the worker message\r\nworker.onmessage = function(e) { console.log('Message received from worker:'+ e.data);\/\/ we log the data\r\nalert(e.data);\/\/ we also show a dialog with the data\r\n }\r\n<\/script>\r\n<input type=text id=text ><br>\r\n<input type=button id=press value=press>\r\n\r\n\t<\/body>\r\n\t<\/html>\r\n<\/pre>\nindex.js<\/em><\/span><\/p>\n
\/\/this worker simple sends back any message posted to it, note that workers are actually used for CPU intensive tasks not trivial tasks like this\r\nonmessage = function(e) { \r\nconsole.log('Message has been received and it is been processed'); \/\/log the message to console\r\nvar workerResult = e.data; console.log('returning message back to main script'); postMessage(workerResult);\r\n }<\/pre>\nThe worker simply returns the message posted to it from the main thread. Fill in any value in the textbox and click the button below, the data in the textbox is posted to the worker for processing.<\/p>\n
1.2 Terminating Workers<\/h3>\n
You can terminate a worker by calling<\/p>\n
worker.terminate();\/\/where worker is a Worker object.\r\n<\/pre>\n2. Summary<\/h2>\n
In this example we learnt about web workers, how to create and use them.<\/p>\n
3. Download the source code<\/h2>\n