Travailleur Web est l'une des nouvelles caract?ristiques int?ressantes en HTML5 , parce que les d?veloppeurs Web peuvent faire beaucoup de choses impressionnant et int?ressant avec elle :

? Traitement des fichiers locaux en JavaScript avec HTML5

? La mise en cache JavaScript dans HTML5
HOT nouvelles API JavaScript avec HTML5, mais aujourd'hui, dans ce message , ACC @ nk voudrais pr?senter une demande plus grande JavaScript qui utilise des proc?d?s multi - threading .

• Demo
• Agrandir
• Recharger
• New window

Web Workers defines an API that can be used for running scripts in background threads. In traditional browsers javascript was capable of running in a single thread, due to which it was difficult to run background tasks. Also the capabilities and performance of client side applications were limited. However, there are some asynchronous functions like "setTimeout" and "setInterval" which provide nice work around for running background tasks.

I have divided this blog into two parts. First one explains the single threaded model of traditional browsers and the second one explains how to use Web Workers. You can skip the first section, if you have good hold on javascript.

Single Threaded Model
The way javascript handles various asynchronous ajax calls or various timer functions, it makes us feel that javascript runs in multiple threads. Now, how does browser handle the UI events when it is executing a particular block of code, or how does browser handle the asynchronous timer and ajax calls when it just has a single thread for execution. The answer to all these questions lies in the way browser queues up various functions for execution.

Let us take an example of the following script

Figure below shows the execution of the above script. Please pay extra attention to this figure as it contains a lot of information

Let us say that at 0 ms init() function starts executing and during the execution of init() function, a mouse click event occurs at 5ms. Now, as the main thread is already executing the init() function and is capable of executing just a single block of code at a time, it queues up handleMouseClick() function next in the execution queue. At 10 ms init() function sets a timer which will execute every 10 ms. Fist execution of the timer task is scheduled at 20 ms, second at 30 ms and so on. The execution of init() function takes 15 ms and after its completion, handleMouseClick() being next in the queue starts executing i.e. starts executing at 15ms. Execution of handleMouseClick() function takes 8 ms i.e. it completes at 23 ms and as timerTask() function was scheduled to run at 20ms, timerTask() function gets queued up in execution queue and is executed after the handleMouseClick() completes. Since there is no other function present in the execution queue that need to be run, timerTask() function runs at its scheduled time i.e. 30 ms , 40 ms and so on.

Web Workers
Web Workers allows you to load your script dynamically and run it in background thread. Creating a worker is simple. All you have to do is, call the constructor and pass the URI of the script you want to execute as an argument. Workers are relatively heavy weight and are not intended to be used in large number.

Workers don't have access to the DOM i.e. you don't have direct access to the 'parent' page. However, Web Workers API do provide you with methods like "onmessage" and "postmessage" which let you communicate with the main thread.

1. onmessage : method used for receiving messages sent from the worker, also can be used in worker for receiving messages sent from main thread.
2. postmessage : method used for sending messages from worker to the main thread, also can be used in main thread for sending messages to worker.

Lets take an example and see how exactly these methods can be used for communicating through messages

Here is the main script that created a new worker. In worker's onmessage event handler, we log all the messages received from the worker, i.e. this event handler is called when postmessage() function is called from the worker. This script also sets a timer, which calls the sendMsgToWorker() function every 5 sec.

Lets have a look at "worker.js" script.

When we load the page containing the main script, the logs shown on the browser console are as follows

In this example, the main thread starts a new thread and instantiates a timer which calls sendMsgToWorker() function every 5 seconds. sendMsgToWorker() function sends a message i.e. "Sent Message From main" to worker by calling postmessage function on worker object. The worker receives this message in the onmessage callback function(in "worker.js" script) which prefixes the message with "In worker on message method :" and sends it back to the main thread using postMessage() function of worker API. Also, worker thread instantiates a timer which calls sendMsgToMain() function every 5 seconds. sendMsgToMain() sends a message i.e. "Sent Message From worker" to the main thread using postmessage() function. Messages sent by calling postmessage in 'worker.js' are received by worker.onmessage callback function(in main script) and are then logged to the console.

So, now there are two threads that run forever. First one is the main thread that receives messages sent from worker and logs them to the console and also sends a message every 5 seconds to the worker. Second thread, is the worker thread which sends the received messages from the main thread, back to the main thread and also sends a message every 5 seconds.

At last I would like to mention the objects and functions that can be used inside worker

Functions that can be called from Web Workers are

• importScripts(): used to load external Javascript for use in the worker
• setTimeout() and setInterval(): used for setting timer tasks
• close(): stops the worker immediately

Objects that are available in Web Workers are

• navigator
• location
• All javascript objects, like Array, Date, etc
• XMLHttpRequest

• Code
• Imprimer

• Commentaire (0)
• �crire

par Avant-premi�re

Annuler r�ponse

�crivez votre commentaire

Commentaires du client sera publi� avant previwed
Donnez votre email r�el pour obtenir des r�ponses notification ou commentaire sera supprim�

Votre nom *
Votre e-mail^g *
Votre site

Comment's Titre

J'assure � 100% je suis humain r�el
Je le r�p�te, je ne suis pas bot

• Sent (0)
• Nouveau