Web workers

Master Internet, Données et Connaissances

Alexandre Niveau

Enseignement des technologies du Web

 

Web workers

Notes de cours

Travail personnel

Objectifs

L'exercice est une application directe des web workers pour constater leur intérêt en pratique.

Exercice 1 — Nombres premiers #

On utilise un prétexte simple pour manipuler un peu les web workers : une appli qui calcule le n-ième nombre premier. Par exemple le premier nombre premier est 2, le deuxième est 3, le troisième est 5, etc.

  1. Créer une page avec deux formulaires, qui vont nous servir à tester avec ou sans workers. Chaque formulaire doit contenir un input (pour un nombre), un output et un bouton.
  2. Écrire une fonction is_prime(z) qui teste si le nombre entier z donné est premier. Ne pas viser l'efficacité ! L'objectif ici est de tester des fonctions qui prennent du temps à s'exécuter de toute façon…
    On pourra copier le code suivant pour aller plus vite :
    function is_prime(nb) {
    	for (let i = 2; i <= Math.sqrt(nb); i++) {
    		if (nb % i == 0) {
    			return false;
    		}
    	}
    	return true;
    }
    
  3. Écrire une fonction nth_prime(n) qui retourne le n-ième nombre premier (comme expliqué plus haut). On utilisera évidemment la fonction précédente, et on ne cherchera pas à faire quelque chose de malin !
    On pourra copier le code suivant pour aller plus vite :
    function nth_prime(n) {
    	let current = 1
    	for (let i = 0; i < n; i++) {
    		do {
    			current++;
    		} while (! is_prime(current));
    	}
    	return current;
    }
    
  4. Faire en sorte que le premier formulaire calcule le n-ième nombre premier dans son output, avec n l'entier donné en input par l'internaute.
  5. Donnez un input suffisamment grand pour que le calcul prenne du temps ; en fonction de la machine et de votre implémentation, avec un n de l'ordre de 100 000 ça devrait déjà être pas mal (augmentez progressivement pour que le calcul prenne au moins quelques secondes). Constater que l'UI de la page n'est pas utilisable du tout.
  6. Utiliser un web worker pour que le second formulaire fasse le même calcul, mais dans un autre thread (et potentiellement, en fonction de la machine, dans un autre cœur). Constater que l'UI de la page reste majoritairement utilisable.
    Attention, les navigateurs peuvent mettre en cache le script exécuté par les workers, et ne pas le mettre à jour lors d'un rafraîchissement de la page, ce qui est très ennuyeux lors du développement. Si vous rencontrez le problème, une solution simple est d'ajouter à l'URL du script un paramètre bidon qui change à chaque appel, afin de forcer le téléchargement malgré le cache. On pourra utiliser par exemple "worker.js?v=" + new Date().getTime(). (On enlèverait évidemment ce paramètre sur un site en production.) Une autre possibilité est d'utiliser une option de la console de Firefox qui désactive le cache HTTP lorsque la console est ouverte.
  7. Optionnel : ajouter une progressbar indiquant la progression du calcul.