38 lines
No EOL
1.6 KiB
Markdown
38 lines
No EOL
1.6 KiB
Markdown
# Web workers
|
|
|
|
Cette page explique la raison d'utiliser un web worker.
|
|
|
|
|
|
# Qu'est-ce qu'un web worker ?
|
|
|
|
Rapidement, c'est juste un fichier js qui est exécuté côté dans un Thread différent.
|
|
|
|
Il attend un réponse, la traite et peut répondre ensuite.
|
|
|
|
|
|
# Pourquoi en utiliser ?
|
|
|
|
Cela permet du véritable code asynchrone évitant le freeze du navigateur lorsqu'il fait des calculs compliqués ou lorsqu'il attend.
|
|
|
|
Exemple: https://mdn.github.io/dom-examples/web-workers/fibonacci-worker/
|
|
|
|
|
|
# Comment sont-ils utilisés ?
|
|
|
|
## Sauvegarde
|
|
|
|
Le premier web worker, situé dans [`public/workers/worker.js`](../../../public/workers/worker.js) s'occupe de faire une seule est unique tâche : `JSON.stringify` cependant on fonction de la taille de l'objet à stringifier en JSON cela peut prendre plusieurs secondes auquel cas l'utilisateur peut croire que son navigateur à bloqué.
|
|
|
|
On le met donc dans un web worker pour éviter cela.
|
|
|
|
Dans `Save.ts`, on crée le web worker avec `new Worker('workers/worker.js')` et on le termine quand il a fini sa tache avec `terminate()`
|
|
|
|
## Envois de message
|
|
|
|
Le deuxième web worker, situé dans [`public/workers/worker.js`](../../../public/workers/message_worker.js) s'occupe de faire des appels REST en stringifiant l'état de l'application.
|
|
|
|
Pour la même raison que la sauvegarde, on le met pour éviter un freeze.
|
|
|
|
Il est évidemment moins utile que la sauvegarde qui prends un objet beaucoup plus lourd.
|
|
|
|
Contrairement à la sauvegarde, le web worker est crée dans `UI.tsx` avec `UseWorker()` et existe sur tout le long de la durée de vie de l'application. Il est initialisé dans l'utilisation du module `UseWorker.tsx`. |