7 Dinge, die Sie über Web Worker wissen sollten-HTML-Tutorial-php.cn

Einführung

Mit Web Workern können Sie JavaScript-Code im Hintergrund ausführen, ohne die Webbenutzeroberfläche zu blockieren. Web Worker können die Gesamtleistung von Webseiten verbessern und auch das Benutzererlebnis verbessern. Web Worker gibt es in zwei Varianten: dedizierte Web Worker und gemeinsam genutzte Web Worker. In diesem Artikel werden sieben wichtige Aspekte von Web-Workern erläutert, die Sie kennen müssen, um sich für den Einsatz in Ihrer Anwendung zu entscheiden.

1. Mit Web Workern können Sie JavaScript-Code im Hintergrund ausführen

Normalerweise wird der JavaScript-Code, den Sie in eine Webseite schreiben, im selben Thread wie die Benutzeroberfläche ausgeführt. Aus diesem Grund friert die Benutzeroberfläche der Webseite ein, wenn Sie auf eine Schaltfläche klicken, die einen langwierigen Vorgang auslöst. Sie können die Benutzeroberfläche erst dann bearbeiten, wenn die Verarbeitung abgeschlossen ist. Mit Web-Workern können Sie JavaScript im Hintergrund ausführen, sodass die Benutzeroberfläche auch dann reagiert, wenn einige Skripts gleichzeitig ausgeführt werden. Der Hintergrundthread, der das Skript ausführt, wird oft als Arbeitsthread oder Worker bezeichnet. Sie können so viele Arbeiter hervorbringen, wie Sie möchten. Sie können Daten auch an ein Skript übergeben, das in einem Arbeitsthread ausgeführt wird, und den Wert nach Abschluss an den Hauptthread zurückgeben. Für Web Worker gelten jedoch folgende Einschränkungen:

Web Worker können von Webseiten aus nicht auf DOM-Elemente zugreifen.
Web Worker können über die Webseite nicht auf globale Variablen und JavaScript-Funktionen zugreifen.
Web Worker können die Funktionen „alert()“ oder „firmify()“ nicht aufrufen.
Auf Objekte wie Fenster, Dokument und übergeordnete Objekte kann in Web Workers nicht zugegriffen werden.

Sie können jedoch Funktionen wie setTimeout() und setInterval() verwenden. Sie können das XMLHttpRequest-Objekt auch verwenden, um Ajax-Anfragen an den Server zu stellen.

2. Es gibt zwei Arten von Web Workern

Es gibt zwei Arten von Web Workern: dedizierte Web Worker und gemeinsam genutzte Web Worker. Engagierte Web Worker leben und sterben mit den Webseiten, die sie erstellen. Dies bedeutet, dass auf dedizierte Web Worker, die innerhalb einer Webseite erstellt wurden, nicht über mehrere Webseiten hinweg zugegriffen werden kann. Shared Web Worker hingegen werden auf mehreren Webseiten gemeinsam genutzt. Die Worker-Klasse stellt dedizierte Web-Worker dar, während die SharedWorker-Klasse gemeinsam genutzte Web-Worker darstellt.

In vielen Fällen werden dedizierte Web Worker Ihren Bedarf decken. Dies liegt daran, dass Sie normalerweise bestimmte Skripts für eine Webseite in einem Arbeitsthread ausführen müssen. Manchmal müssen Sie jedoch ein Skript in einem Arbeitsthread ausführen, der mehreren Webseiten gemeinsam ist. In diesem Fall können Sie, anstatt viele dedizierte Web Worker zu erstellen, einen für jede Seite, genauso gut gemeinsam genutzte Web Worker verwenden. Ein gemeinsam genutzter Web-Worker, der von einer Webseite erstellt wurde, kann weiterhin von anderen Webseiten verwendet werden. Es kann nur zerstört werden, wenn alle Verbindungen zu ihm geschlossen sind. Shared Web Worker sind etwas komplizierter als dedizierte Web Worker.

3.Worker-Objekt stellt einen dedizierten Web-Worker dar

Nachdem Sie nun die Grundlagen von Web Workern verstanden haben, sehen wir uns an, wie Sie dedizierte Web Worker verwenden. Bei den unten besprochenen Beispielen wird davon ausgegangen, dass Sie eine Webanwendung mit Ihren bevorzugten Entwicklungstools erstellt und außerdem die jQuery- und Modernizr-Bibliotheken in ihrem Skriptordner hinzugefügt haben. Fügen Sie die HTML-Seite zur Webanwendung hinzu und geben Sie den folgenden Code ein:

<!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>

Nach dem Login kopieren

Die obige HTML-Seite enthält eine Schaltfläche (btnStart), die eine JavaScript-Verarbeitung auslöst. Bitte beachten Sie, dass diese Seite auf die Bibliotheken Modernizr und jQuery verweist. Der

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse