Introduction aux WebWorker

by Mehdi Betari

Sommaire

1. Javascript
2. Limitations
3. Web Worker
4. Browser Support
5. Q & A

Comment le navigateur execute le JS?

• Javascript est un language "event-driven"
• 3 possibilités d’exécution des scripts:
  • <script></script>
  • Événements interne aux scripts (page load, setTimeout, etc)
  • Action des utilisateurs (click, focus, etc)
• A chaque occurrences, l'événement est ajouté à la pile d’exécution.

The event loop

• La JS event loop regarde de façon périodique dans la pile.
• Elle execute les event (callback/handlers) quand la pile est remplie.

Limitations

• Le JS est single threaded, il ne fait qu'une chose à la fois.
• Les navigateurs utilisent une pile d'évenement à simple voie pour le JS et les rendu UI.

WebWorker - Definition

• Une API qui permet aux auteurs d'applications Web de lancer des scripts de fond en cours d'exécution des scripts de leur page principale en parallèle.
• Utilise d'autres API-HTML5 notamment l'API-Messaging, pour communiquer entre les Thread.

WebWorker - Logic Flow

WebWorker - Features

• Les propriétés du navigator object
• La lecture du location object
• XMLHttpRequest
• Les time et interval functions
• Utilisation de script externe grâce à la méthode importScript.
• Json support.
• Appeler d'autre WebWorker (sous WebWorker)

WebWorker - Cas concrets

• Prefetching de data
• Travail en background (AceEditor linter)
• Parsing de XML/json trop Fat
• De l'image processing (calcul d'effets ou de filtre sur des canvas)
• D'autres taches gourmandes en CPU (rendu 3D)

WebWorker - Browser Support

Passons au code