Add web worker documentation
This commit is contained in:
parent
f1a9d912b8
commit
df94e7904d
2 changed files with 40 additions and 0 deletions
38
docs/#Project/Pages/WebWorkers.md
Normal file
38
docs/#Project/Pages/WebWorkers.md
Normal file
|
@ -0,0 +1,38 @@
|
|||
# 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`.
|
Loading…
Add table
Add a link
Reference in a new issue