Skip to main content
JavaScript was designed to run in a single-threaded environment, meaning multiple scripts cannot run at the same time. Consider a situation where you need to handle UI events, query and process large amounts of API data, and manipulate the DOM.
Javascript will hang your browser in situation where CPU utilization is high. Let us take a simple example where Javascript goes through a big loop −
<!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>
It will produce the following result −

When you click Big Loop button it displays following result in Firefox −
Big Loop

What is Web Workers?

The situation explained above can be handled using Web Workers who will do all the computationally expensive tasks without interrupting the user interface and typically run on separate threads.
Web Workers allow for long-running scripts that are not interrupted by scripts that respond to clicks or other user interactions, and allows long tasks to be executed without yielding to keep the page responsive.
Web Workers are background scripts and they are relatively heavy-weight, and are not intended to be used in large numbers. For example, it would be inappropriate to launch one worker for each pixel of a four megapixel image.
When a script is executing inside a Web Worker it cannot access the web page's window object (window.document), which means that Web Workers don't have direct access to the web page and the DOM API. Although Web Workers cannot block the browser UI, they can still consume CPU cycles and make the system less responsive.

How Web Workers Work?

Web Workers are initialized with the URL of a JavaScript file, which contains the code the worker will execute. This code sets event listeners and communicates with the script that spawned it from the main page. Following is the simple syntax −
var worker = new Worker('bigLoop.js');
If the specified javascript file exists, the browser will spawn a new worker thread, which is downloaded asynchronously. If the path to your worker returns an 404, the worker will fail silently.
If your application has multiple supporting javascript files, you can import them importScripts() method which takes file name(s) as argument separated by comma as follows −
importScripts("helper.js", "anotherHelper.js");
Once the Web Worker is spawned, communication between web worker and its parent page is done using the postMessage() method. Depending on your browser/version, postMessage() can accept either a string or JSON object as its single argument.
Message passed by Web Worker is accessed using onmessage event in the main page. Now let us write our bigLoop example using Web Worker. Below is the main page (hello.htm) which will spawn a web worker to execute the loop and to return the final value of variable 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>
Following is the content of bigLoop.js file. This makes use of postMessage() API to pass the communication back to main page −
for (var i = 0; i <= 1000000000; i += 1){
   var j = i;
}
postMessage(j);
This will produce following result −

Now let us keep hello.htm and bigLoop.js file in the same directory and try to access hello.htm using latest version of either Safari or Firefox.

Stopping Web Workers

Web Workers don't stop by themselves but the page that started them can stop them by calling terminate() method.
worker.terminate();
A terminated Web Worker will no longer respond to messages or perform any additional computations. You cannot restart a worker; instead, you can create a new worker using the same URL.

Handling Errors

The following shows an example of an error handling function in a Web Worker JavaScript file that logs errors to the console. With error handling code, above example would become as following −
<!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>

Checking for Browser Support

Following is the syntax to detect a Web Worker feature support available in a browser
<!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>
This will produce following result −

Comments

Post a Comment

Popular posts from this blog

In this chapter, we will see how to enable remote desktop application. It is important because this enables us to work remotely on the server. To do this, we have the following two options. For the first option, we have to follow the steps given below. Step 1  − Go to Start → right click “This PC” → Properties. Step 2  − On Left side click “Remote Setting”. Step 3  − Check radio button “Allow Remote connection to this computer” and Check box “Allow connection only from computers running Remote Desktop with Network Level Authentication (recommended)” → click “Select Users”. Step 4  − Click Add. Step 5  − Type user that you want to allow access. In my case, it is administrator → click OK. For the  second option , we need to follow the steps given below. Step 1  − Click on “Server Manage” → Local Server → click on “Enable” or Disable, if it is Disabled.
Post a Comment
Read more
The table creation command requires: Name of the table Names of fields Definitions for each field Syntax: Here is generic SQL syntax to create a MySQL table: CREATE TABLE table_name ( column_name column_type ); Now, we will create following table in  TUTORIALS  database. tutorials_tbl ( tutorial_id INT NOT NULL AUTO_INCREMENT , tutorial_title VARCHAR ( 100 ) NOT NULL , tutorial_author VARCHAR ( 40 ) NOT NULL , submission_date DATE , PRIMARY KEY ( tutorial_id ) ); Here few items need explanation: Field Attribute  NOT NULL  is being used because we do not want this field to be NULL. So if user will try to create a record with NULL value, then MySQL will raise an error. Field Attribute  AUTO_INCREMENT  tells MySQL to go ahead and add the next available number to the id field. Keyword  PRIMARY KEY  is used to define a column as primary key. You can use multiple columns separated by comma to define...
Post a Comment
Read more
The Windows Firewall with Advanced Security is a firewall that runs on the Windows Server 2012 and is turned on by default. The Firewall settings within Windows Server 2012 are managed from within the  Windows Firewall Microsoft Management Console . To set Firewall settings perform the following steps − Step 1  − Click on the Server Manager from the task bar → Click the Tools menu and select Windows Firewall with Advanced Security. Step 2  − To see the current configuration settings by selecting  Windows Firewall Properties  from the MMC. This  allows access to modify the settings  for each of the three firewall profiles, which are –  Domain, Private and Public  and IPsec settings. Step 3  − Applying custom rules, which will include the following two steps − Select either  Inbound Rules  or  Outbound Rules  under  Windows Firewall with Advanced Security  on the left side of the management console...
Post a Comment
Read more