Maison >interface Web >tutoriel HTML >7 choses à savoir sur les travailleurs du Web
7 choses à savoir sur les travailleurs du Web
- 巴扎黑original
- 2017-05-21 09:21:541040parcourir
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'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>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 3f1c4e4b6b16bbbd69b2ee476dc4f83a inclut le gestionnaire de méthode ready(), et ce gestionnaire gère à son tour l'événement click de btnStart. Le gestionnaire ready() vérifie d'abord si le navigateur prend en charge les web Workers. Cela se fait en utilisant la propriété webworkers de Modernizr. Si le navigateur ne prend pas en charge les Web Workers, un message d'erreur s'affiche à l'attention de l'utilisateur.
Ensuite, le code se connecte au gestionnaire d'événements click de btnStart. Le code du gestionnaire d'événements click est important car il utilise un objet Worker pour exécuter le script en arrière-plan. Le gestionnaire d'événements click crée un objet Worker et le stocke dans une variable locale - worker. Le chemin d'accès au fichier JavaScript à exécuter en arrière-plan est passé dans le constructeur. Vous créerez LongyTask.js en un rien de temps. Le code ajoute ensuite un gestionnaire d'événements pour l'événement de message de l'objet Worker. L'événement message est déclenché lorsque le script cible (LengthyTask.js dans ce cas) renvoie certaines valeurs à la page Web. Les gestionnaires d'événements de message peuvent utiliser la propriété evt.data pour accéder à la valeur renvoyée. Enfin, la méthode postMessage() est appelée sur l'objet Worker pour déclencher l'exécution de LongyTask.js. La méthode postMessage() vous permet également de transmettre des données au script cible. Dans cet exemple, un nombre (10 000) est transmis à postMessage(), qui indique le nombre de millisecondes que le traitement doit durer. Vous pouvez transmettre toute autre donnée dans l'appel postMessage(), telle que des objets ou des chaînes JavaScript.
Le fichier LongyTask.js contient le code à exécuter en arrière-plan, comme indiqué ci-dessous :
addEventListener("message", function (evt) {
var date = new Date();
var currentDate = null;
do {
currentDate = new Date();
} while (currentDate - date < evt.data);
postMessage(currentDate);
}, false);上面的代码处理worker thread的消息事件。当主页面调用Worker对象上的postMessage()方法时，会引发消息事件。消息事件处理程序通过运行某些毫秒的do-while循环来模拟冗长的处理。此循环运行的毫秒数从主页传递（回忆前面讨论的postMessage()）。因此，evt.data在此示例中返回10000。一旦长时间操作完成，代码调用postMessage()会把处理结果发送回主页面。在本例中，传递currentDate的值（currentDate是一个Date对象）。
如果你运行主网页并单击Start Processing按钮，那么你将在10秒后收到alert()。同时，页面的用户界面不会被阻止，你可以执行诸如滚动，点击等操作，表明来自LengthyTask.js的代码正在后台运行。
4. SharedWorker对象代表共享Web Worker
前面的示例使用了专用Web worker。让我们将同样的示例转换为使用共享Web worker。共享Web worker由SharedWorker对象表示。下面的代码显示了来自主页的代码的修改版本：
$(document).ready(function () {
if (!Modernizr.webworkers)
{
alert("This browser doesn't support Web Workers!");
return;
}
$("#btnStart").click(function () {
var worker = new SharedWorker("scripts/sharedlengthytask.js"); worker.port.addEventListener("message", function (evt) { alert(evt.data); }, false); worker.port.start(); worker.port.postMessage(10000); });
});注意用粗体字标记的代码。它创建了一个SharedWorker实例，并在构造函数中传递SharedLengthyTask.js。你将很快创建此文件。然后，代码将消息事件处理程序连接到SharedWorker对象的端口对象。消息处理程序函数执行与前面示例中相同的工作。然后代码在端口对象上调用start()方法。最后，在端口对象上调用postMessage()方法将数据（10000）发送到共享worker thread。
SharedLengthyTask.js文件包含以下代码：
var port;
addEventListener("connect", function (evt) {
port = evt.ports[0];
port.addEventListener("message", function (evt) {
var date = new Date();
var currentDate = null;
do {
currentDate = new Date();
} while (currentDate - date < evt.data);
port.postMessage(currentDate);
}, false);
port.start();
}, false);代码首先声明一个名为port的变量，用于存储端口对象的引用。这次处理了两个事件——connect和message。当与共享Web worker建立连接时，会触发connect事件。 connect事件处理程序捕获evt.port [0]对象并将其存储在之前声明的端口变量中。然后在端口对象上连接消息事件处理程序。调用端口对象的start()方法来开始侦听该端口上的消息。消息事件处理程序几乎与你在前面的示例中编写的消息事件处理程序相同，除了它附加到端口对象这一点。此外，在端口对象上调用postMessage()，以将处理结果发送到主页面。
5. Web Workers可以使用XMLHttpRequest与服务器通信
有时Web Worker可能需要与Web服务器通信。例如，你可能需要驻留在某些RDBMS中的数据以便于客户端处理。要完成此类任务，你可以使用XMLHttpRequest对象向服务器端资源发出请求。实例化Worker对象和处理消息事件的整个过程保持不变。但是，你需要向服务器端资源发出GET或POST请求。考虑下面的代码：
addEventListener("message", function (evt) {
var xhr = new XMLHttpRequest(); xhr.open("GET", "lengthytaskhandler.ashx"); xhr.onload = function () { postMessage(xhr.responseText); }; xhr.send(); }, false);
上面显示的代码创建了XMLHttpRequest对象的实例。然后调用open()方法，并指定向服务器端资源LengthyTaskHandler.ashx（一个ASP.NET通用处理程序）发出GET请求。（虽然此示例使用ASP.NET通用处理程序，但你可以使用任何其他服务器端资源。）然后它处理XMLHttpRequest对象的load事件并调用postMessage()。 xhr.responseText作为postMessage()的参数。xhr.responseText将是ASP.NET通用处理程序作为响应返回的值。请求完成时引发load事件。
LengthyTaskHandler.ashx包含以下代码：
namespace WebWorkersDemo
{
public class LengthyTaskHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context) { System.Threading.Thread.Sleep(10000); context.Response.ContentType = "text/plain"; context.Response.Write("Processing successful!"); }
public bool IsReusable
{
get
{
return false;
}
}
}
}正如你可以看到，ProcessRequest()通过在Thread类上调用Sleep()方法来模拟一些冗长的处理，并阻止执行10秒。然后它返回一个成功消息“Processing successful!”给调用者。如果你在进行这些更改后运行主网页，你会发现在10秒后，将显示一个包含此成功消息的警报对话框。
6.你可以使用错误事件捕获未处理的错误
如果你的Web worker正在进行一些复杂的操作，那么你可能需要添加错误处理到主网页代码，以便在worker中出现任何未处理错误时，可以采取适当的操作。这可以通过处理Worker对象的错误事件来完成。每当work thread中存在任何未处理的错误时，就会抛出错误事件。以下代码显示了如何完成此操作：
$("#btnStart").click(function () {
var worker = new Worker("scripts/lengthytask.js");
worker.addEventListener("message", function (evt) {
alert(evt.data);
}, false);
worker.addEventListener("error", function (evt) { alert("Line #" + evt.lineno + " - " + evt.message + " in " + evt.filename); }, false); worker.postMessage(10000);
});从上面的代码可以看出，错误处理程序已经连接到worker对象的错误事件。错误处理函数接收一个事件对象，而该对象提供错误信息，例如发生错误的行号（evt.lineno），错误消息（evt.message）和发生错误的文件（evt.filename）。
7. Vous pouvez utiliser la méthode Terminate() pour mettre fin au travailleur
Parfois, vous souhaiterez peut-être annuler une tâche en cours d'exécution dans un travailleur. Pour cela, vous pouvez détruire le Worker en appelant sa méthode terminate(). Une fois qu'un Worker est terminé, vous ne pouvez pas le réutiliser ou le redémarrer. Bien entendu, vous pouvez toujours créer une autre instance de Worker et l'utiliser. Mais rappelez-vous, terminate() tue immédiatement le travailleur et ne vous donne aucune chance d'effectuer des opérations de nettoyage.
Résumé
Les Web Workers vous permettent d'exécuter des scripts en arrière-plan sans geler l'interface utilisateur Web. Il existe deux types : les Web Workers dédiés et les Web Workers partagés. Créez un travailleur Web dédié pour chaque page Web, tout en utilisant un travailleur Web partagé pour partager sur plusieurs pages Web. La classe Worker représente un travailleur Web dédié et la classe SharedWorker représente un travailleur Web partagé. Cet article explique comment utiliser les deux types. Il explique également comment les erreurs sont gérées et comment le webworker utilise XMLHttpRequest pour communiquer avec le serveur Web.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!