7 choses à savoir sur les travailleurs du Web-tutoriel HTML-php.cn

Présentation

Les Web Workers vous permettent d'exécuter du code JavaScript en arrière-plan sans bloquer l'interface utilisateur Web. Les Web Workers peuvent améliorer les performances globales des pages Web et également améliorer l'expérience utilisateur. Les Web Workers sont disponibles en deux versions : les Web Workers dédiés et les Web Workers partagés. Cet article aborde sept aspects clés des Web Workers que vous devez connaître pour vous aider à décider de les utiliser dans votre application.

1.Web Workers vous permet d'exécuter du code JavaScript en arrière-plan

En règle générale, le code JavaScript que vous écrivez dans une page Web s'exécute sur le même thread que l'interface utilisateur. C'est pourquoi l'interface utilisateur de la page Web se fige lorsque vous cliquez sur un bouton qui déclenche un long processus. Vous ne pouvez pas travailler sur l'interface utilisateur tant que le traitement n'est pas terminé. Les Web Workers vous permettent d'exécuter JavaScript en arrière-plan afin que l'interface utilisateur reste réactive même si certains scripts s'exécutent en même temps. Le thread d'arrière-plan qui exécute le script est souvent appelé thread de travail ou travailleur. Vous pouvez générer autant de travailleurs que vous le souhaitez. Vous pouvez également transmettre des données à un script en cours d'exécution dans un thread de travail et renvoyer la valeur au thread principal une fois terminé. Cependant, les Web Workers ont certaines limitations, comme suit :

Les Web Workers ne peuvent pas accéder aux éléments DOM à partir des pages Web.
Les Web Workers ne peuvent pas accéder aux variables globales et aux fonctions JavaScript à partir de la page Web.
Les Web Workers ne peuvent pas appeler les fonctions alert() ou confirm().
Les objets tels que la fenêtre, le document et le parent ne sont pas accessibles dans Web Workers.

Cependant, vous pouvez utiliser des fonctions telles que setTimeout(), setInterval(), etc. Vous pouvez également utiliser l'objet XMLHttpRequest pour envoyer des requêtes Ajax au serveur.

2. Il existe deux types de Web Workers

Il existe deux types de Web Workers : les Web Workers dédiés et les Web Workers partagés. Les Web Workers dédiés vivent et meurent avec les pages Web qui les créent. Cela signifie que les Web Workers dédiés créés dans une page Web ne sont pas accessibles sur plusieurs pages Web. Les Shared Web Workers, en revanche, sont partagés sur plusieurs pages Web. La classe Worker représente des Web Workers dédiés, tandis que la classe SharedWorker représente des Web Workers partagés.

Dans de nombreux cas, des Web Workers dédiés répondront à vos besoins. En effet, vous devez généralement exécuter des scripts spécifiques pour une page Web dans un thread de travail. Parfois, cependant, vous devez exécuter un script dans un thread de travail commun à plusieurs pages Web. Dans ce cas, au lieu de créer plusieurs Web Workers dédiés, un pour chaque page, autant utiliser des Web Workers partagés. Un travailleur Web partagé créé par une page Web peut toujours être utilisé par d'autres pages Web. Il ne peut être détruit que si toutes les connexions avec celui-ci sont fermées. Les Web Workers partagés sont un peu plus compliqués que les Web Workers dédiés.

3.L'objet Worker représente un Web Worker dédié

Maintenant que vous comprenez les bases des Web Workers, voyons comment utiliser des Web Workers dédiés. Les exemples présentés ci-dessous supposent que vous avez créé une application Web à l'aide de vos outils de développement préférés et que vous avez également ajouté les bibliothèques jQuery et Modernizr dans son dossier Script. Ajoutez la page HTML à l'application web et tapez le code suivant :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="scripts/modernizr.js"></script>
    <script src="scripts/jquery-2.0.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            if (!Modernizr.webworkers)
            {
                alert("This browser doesn&#39;t support Web Workers!");
                return;
            }
            $("#btnStart").click(function () {
                var worker = new Worker("scripts/lengthytask.js");
                worker.addEventListener("message", function (evt) {
                    alert(evt.data);
                },false);
                worker.postMessage(10000);
            });
        });

    </script>
</head>
<body>
    <form>
        <input type="button" id="btnStart" value="Start Processing" />
    </form>
</body>
</html>

Copier après la connexion

La page HTML ci-dessus contient un bouton (btnStart) qui déclenche un traitement JavaScript. Veuillez noter que cette page fait référence aux bibliothèques Modernizr et jQuery. Le bloc

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours