Kommentar: Web Workers ist eine neue Technologie, die in HTML5 hinzugefügt wurde, um die Backend -Verarbeitung in Webanwendungen zu implementieren.
Web Workers ist eine neue Technologie, die in HTML5 hinzugefügt wurde, um die Hintergrundverarbeitung in Webanwendungen zu implementieren.
In HTML4 sind die von JS erstellten Programme alle Single-Threaden. Wenn es lange dauert, reagiert die Webschnittstelle lange nicht. Im schlimmsten Fall wird ein Skript -Eingabeaufforderung Box angezeigt:
Es fordert, dass das Skript zu lange ausgeführt wird, ob sie fortgesetzt werden sollen. . . . Der Protagonist dieses Artikels wird also vorgestellt: Web Workers API
Die Verwendung dieser API -Benutzer kann problemlos Threads erstellen, die im Hintergrund ausgeführt werden, und es ist sehr einfach, Hintergrundprogramme zu erstellen:
var Worker = neuer Arbeiter ('*. JS');
HINWEIS: Hintergrund -Threads können nicht auf Seiten oder Fensterobjekte zugreifen.
Daten können mit Hintergrund -Threads übergeben werden, indem Nachrichten gesendet und Nachrichten empfangen werden:
Worker.onMessage = Funktion (e) {};
Worker.postMessage = Funktion (e) {};
Lassen Sie uns über Summing sprechen:
<! DocType html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<title> </title>
<script type = "text/javaScript">
Funktion calculate () {
var num = 10000000000;
var r = 0;
für (var i = 1; i <num; i ++) {
r += i;
}
Alarm (r);
}
berechnen();
</script>
</head>
<body>
</body>
</html>
Also wurde mein schöner Rahmen gegeben. . . Die Verwendung von Webarbeitern wird jedoch nicht:
<! DocType html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<title> </title>
<script type = "text/javaScript">
var Worker = neuer Arbeiter ('C.JS');
Worker.onMessage = Funktion (e) {
alert ('und:' + e.data);
};
Funktion calculate () {
var num = 1000000;
Worker.PostMessage (num);
}
berechnen();
</script>
</head>
<body>
</body>
</html>
OnMessage = Funktion (e) {
var num = e.data;
var r = 0;
für (var i = 1; i <num; i ++) {
r += i;
}
Postmessage (R);
}
Manchmal denke ich, warum berechnet ich eine so große Zahl, wenn ich nichts zu tun habe? . . . . Natürlich ist dies ein langweiliger Trick, aber ich denke, es gibt ein Szenario, das dies möglicherweise erfordern.
Als ich die Datei -API früher lernte, gab es eine Operation zum Lesen lokaler Dateien. Wenn die Datei zu groß ist, ist sie sehr langsam. Ich frage mich, ob dies angewendet werden kann. Es ist notwendig, es während der zweiten Studie zu versuchen.
Interagieren Sie Daten mit Threads
Wir erledigen hier eine Funktion, erzeugen zufällig ein Array im Vordergrund und kehren dann zum Vordergrund zurück, um im Hintergrund zu drucken, wenn die Berechnung 3 von 3 sein kann:
Hauptprogramm
<! DocType html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<title> </title>
<Styles>
Spanne
{
Polsterung: 10px;
}
</style>
<script src = "../ jQuery-1.7.1.js" type = "text/javaScript"> </script>
<script type = "text/javaScript">
$ (Dokument) .Ready (function () {
var Worker = neuer Arbeiter ('t1.js');
Worker.PostMessage ('');
Worker.onMessage = Funktion (e) {
var arr = e.data.split (';');
für (var i = 0, len = arr.length; i <len; i ++) {
var dom = $ ('<span>' + arr [i] + '</span>');
$ ('#body'). append (DOM);
}
}
});
</script>
</head>
<body>
<div>
</div>
</body>
</html>
Das Programm, das ein Array generiert
OnMessage = Funktion (e) {
var arr = [];
für (var i = 0; i <100; i ++) {
arr.push (parseInt (math.random () * 100));
}
var Worker = neuer Arbeiter ('t2.js');
Worker.PostMessage (json.Stringify (arr));
Worker.onMessage = Funktion (e) {
// Senden Sie die Auswahlergebnisse an die Rezeption zurück
Postmessage (e.data);
};
}
Stellen Sie fest, ob alle Daten im Array durch 3 geteilt sind
OnMessage = Funktion (e) {
var arr = json.Parse (e.data);
var str = '';
für (var i = 0, len = arr.length; i <len; i ++) {
if (parseInt (arr [i]) % 3 == 0) {
if (str! = '') str += ';';
str += arr [i];
}
}
Postmessage (STR);
schließen();
};
Programmlogik Beschreibung:
Hier wird ein Fadenverschachtung verwendet
Führen Sie zunächst das Vordergrundprogramm aus, bei dem ein Kinderfaden T1 initialisiert wird, um 100 Arrays zu initialisieren.
Dann initialisiert der untergeordnete Thread T1 den untergeordneten Thread T2 (zum Durchqueren des Arrays verwendet, Nummern herausnehmen, die durch 3 teilbar sein können und eine Zeichenfolge bilden können), und T1 übergibt die Array -Daten an T2
T2 empfängt T1 -Daten und überträgt nach der Berechnung die Zeichenfolge auf T1, T1 an die Rezeption, und die Rezeption führt eine eigene Logik aus
Prozess endet
Abschluss
Einfach ausgedrückt, ich deklariere hier den untergeordneten Thread, sende dann Daten an die Kinderpostmessage und warte dann auf das Ergebnis.
In Kombination mit den letzten Kommunikations -API -Web -Sockets können zwei zu einem Web -Chat -Programm kombiniert werden, und selbst einige lokale Speicher-/lokale Datenbanken können verwendet werden.
Das kann eine gute Sache sein.