Understating Web Workers Basics

Posted By : Pawanpreet Singh | 29-Dec-2017
javascript

As you know javascript is single threaded language, we cannot run multiple scripts in javascript at same time. Various situations occurs when developers need things to run simultaneously. To handle those situations developers do some hacks like setTimeout etc. But in HTML 5 we have been provided with certain API’s to handle such scenarios which are known as Webworkers.

Basic Methods

  1. Creating object - Web worker execute in an environment which is isolated from other code. Thats why it needs a separate file to craete an object for the worker. Below is the example of contructor that has the name of file as input paramenter. 
                    var myWorker = new Worker(‘heavyLoop.js’);
  2. postMessage - After the worker is created execute it using this method as shown below. 
                    myWorker.postMessage();

  3. onmessage - This event captures the message sent by post message method we have to implement this in the main html file where we have constructed the worker. We get data in the event of this method, its implementation is as shown below.

    myWorker.onmessage = function(e){
	alert(“Executed ” + e.data + “”);
};

Basic Code Example:

welcome.html

<!DOCTYPE HTML>
<html>
<title>Heavy Loop</title>
	<script>
		var myWorker = new Worker(‘heavyLoop.js’);
		myWorker.onmessage = function(e){
	alert(“Executed ” + e.data + “”);
};

function welcomeMessage() {
	alert(“Welcome Man...”);
}

	</script>
	<body>
		<input type=”button” onclick=”welcomeMessage();” value=”Welcome Message”/>
	</body>
</html>

Below code will be the content of heavyLoop.js file.

var iterations = 600000000;
var times = 0;
for(var a = 0; a

Now we have to keep welcome.html and heavyLoop.js in same place in server.

Happy Coding.

Related Tags
PWA
cloud computing
saas
Web Apps
Java
Angular
nodejs
php
vue.js
Spring boot
mysql
ReactJS
Django
angularjs
Angular2
bootstrap
jquery
grails
LMS
Java Virtual Machine
html
Mean stack
Moodle
html5
oops
Shopify
reverseajax
Knockoutjs
ngrok
Meteor
plugin

About Author

Author Image
Pawanpreet Singh

Pawanpreet is an seasoned Project Manager with a wealth of knowledge in software development, specializing in frontend and mobile applications. He possesses a strong command of project management tools, including Jira, Trello, and others. With a proven track record, he has successfully overseen the delivery of multiple software development projects, managing budgets and large teams. Notable projects he has contributed to include TimeForge, Yogyata, Kairos, Veto, Inspirien App, and more. Pawanpreet excels in developing and maintaining project plans, schedules, and budgets, ensuring timely delivery while staying within allocated resources. He collaborates closely with clients to define project scope and requirements, establish timelines and milestones, and effectively manage expectations. Regular project status meetings are conducted by him, providing clients and stakeholders with consistent updates on project progress, risks, and issues. Additionally, he coaches and mentors project leads, offering guidance on project management best practices and supporting their professional development.

Request for Proposal

Name is required

Comment is required

Sending message..