Pracownicy HTML5 w sieci Web - Przewodnik po najlepszych 3 typach pracowników sieci w HTML5

Spisie treści:

Anonim

Kim są pracownicy sieci?

W tym artykule chodzi o wykorzystaniu robotów sieciowych i ich znaczenia w silniku skryptowym HTML5.Java zbudowanym z jednego wątku i nie ma za nimi równoległego procesu (żaden inny proces nie jest wykonywany, dopóki pierwszy proces nie zostanie zakończony). Ponieważ skrypt JavaScript działa na pierwszym planie i powoduje, że strona internetowa jest czasochłonna. Dlatego, aby uniknąć tego poważnego problemu, HTML5 opracował nową technologię o nazwie Web Workers. Jest to mały skrypt w tle, który wykonuje obliczenia przy kosztownych zadaniach bez ingerencji w interfejs użytkownika ani wydajność strony internetowej. Ten izolowany wątek jest stosunkowo lekki i jest obsługiwany we wszystkich przeglądarkach internetowych. To sprawia, że ​​HTML uruchamia dodatkowe wątki.

Typy pracowników sieci w HTML5

Pracownicy sieci są również określani jako „pracownicy oddani”. Otrzymali osobny model pamięci dzielonej. Innymi słowy, możemy powiedzieć, że cały zakres javascript został uruchomiony w jednym wątku. Podczas pracy w przeglądarce internetowej napotkaliśmy komunikat dialogowy pasa startowego z powodu intensywnego przetwarzania strony. Aby zapewnić dobre rozwiązanie, przeglądarka internetowa HTML API wymyśliła jednoczesne rządzenie różnymi obliczeniami.

Poniżej podano trzy ważne typy pracowników sieci:

1. Współużytkowany pracownik sieciowy

Ten typ korzysta z interfejsu API, a każda jednostka robocza ma wiele połączeń podczas wysyłania wiadomości (wiele skryptów), pod warunkiem, że każdy kontekst pochodzi z tego samego źródła. Obsługa przeglądarki dla tego pracownika jest ograniczona. Są one wywoływane za pomocą konstruktora Shared Worker ().

2. Dedykowany pracownik sieciowy

Utworzenie pliku jest bardzo proste, wystarczy wywołać Konstruktora ze ścieżką źródłową. Korzystają z komunikacji wiadomości zwanej metodą post message () podczas przesyłania wiadomości. Nawet programy obsługi zdarzeń są używane, gdy ma miejsce jakiś detektor. Do odebrania wiadomości użyto modułu obsługi onmessage ().

3. Pracownik serwisu

Ten pracownik nie wchodzi bezpośrednio w interakcję ze stroną internetową i działa w tle. Mogą przywracać, gdy jest to wymagane i działa jako serwer proxy, można uzyskać do nich dostęp za pomocą wielu wątków.

Jak utworzyć plik pracowników sieci?

Nie obsługują niektórych funkcji, takich jak obiekt okna, DOM, obiekt nadrzędny. Wszystkie funkcje są wykonywane przez przekazanie ich repliki.

Krok 1: Aby utworzyć import pliku Konstruktor Worker () Plik jest tworzony przy użyciu nowego obiektu, a skrypt wygląda jak.

var worker = new Worker(sample.js);

Krok 2: Utworzenie wiadomości post (). Utworzone pliki robocze automatycznie wywołują metodę post message (). Metody post message () kierują przekazywanie wiadomości do głównego wątku. Podobnie możemy wysłać wiadomość z głównego wątku do wątku roboczego. Tutaj zaczyna się pracownik.

worker. postMessage();

Krok 3: Następnie wyrzuć moduł obsługi zdarzeń, aby zezwolić na wiadomość od pracownika sieci.

worker. onmessage = function(event)

Odtąd widzieliśmy, jak wysyłać i odbierać wiadomości, teraz zobaczmy, jak zakończyć proces roboczy w trakcie procesu.

Krok 4: Aby zatrzymać proces.

worker.terminate()

Krok 5: Aby wdrożyć scenariusz obsługi błędów, którego używa pracownik.

Worker.onerror();

Top 9 funkcji pracowników HTML5

  1. Pracownicy sieci Web będący protokołem asynchronicznym najlepiej nadawali się do wykonywania zadań obliczeniowych i uważali je za profesjonalne funkcje Javascript.
  2. Pracownicy sieci płacą ścisłą platformę wykonawczą dla okien mobilnych i stacjonarnych, pozwalając na uruchamianie strony internetowej bez zamrażania strony w przeglądarkach.
  3. Podstawową korzyścią jest to, że możemy uruchamiać drogie procesy w ramach pojedynczego wątku, co nie przerywa działania głównego wątku.
  4. Pracownicy sieci to małe, lekkie wątki, które na żywo przeplatają interfejs użytkownika.
  5. Pracownicy sieciowi, którzy są wątkami zorientowanymi na jądro, pomagają dotrzeć do wysokiej wydajności strony przeglądarek.
  6. Pracownicy sieci pomagają w tworzeniu programowania równoległego i wykonują działania wielowątkowe.
  7. Pracownicy sieci Web zwiększają szybkość aplikacji Java JScript.
  8. Pracownik sieciowy jest uważany za skrypt po stronie klienta i używany wyżej w aplikacjach do gier.
  9. Wątki pracujące w sieci komunikują się ze sobą za pomocą metody zwrotnej post Message ().

Przykłady pracowników HTML5

Pracownicy sieci mają dostęp do nawigatora, żądania XMLHTTP, nawigatora ze względu na ich działania związane z wieloma przetwarzaniami. Poniższy przykład koncentruje się na typach pracowników dedykowanych do zademonstrowania.

Przykład 1

Pokazuje przykładowy plik Worker Demonstrujący działanie przeglądarki.

Kod:



Web Worker Demo

Validating the browser compatibility of Web Browsers

Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)



Web Worker Demo

Validating the browser compatibility of Web Browsers

Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)



Web Worker Demo

Validating the browser compatibility of Web Browsers

Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)

Wynik:

Przykład nr 2

Poniższy przykład pokazuje, w jaki sposób zadania robocze biegną za zadaniem przy użyciu klasy, a liczenie jest wykonywane dla zadań roboczych. Zadania robocze automatycznie aktualizują stronę internetową w każdej pętli, dopóki pętla się nie zakończy. Aby zakończyć wykonywanie pracownika, tutaj zastosowano terminate ().

Praca wykonana w tle przez pracownika sieci:

Kod:

wrk.html




Web Workers Demo
body (padding-top:18px;)
.output-cont (margin-left:12%; margin-top:28px;)
.output-cont h2 (width:150px; height:95%;)
.output-cont button (padding:3px 7px; font-size:1.3rem; font-family:sans-serif; )

start worker terminate

start blocking thread

test responsiveness
var worker;
function testWork() (
if (typeof(Worker) !== "undefined") (
if (typeof(worker) == "undefined") (
worker = new Worker("demo.js");
)
worker.onmessage = function(event) (
document.getElementById("wOutput").innerHTML = event.data;
);
) else (
document.getElementById("wOutput").innerHTML = "Web Workers are unsupported";
)
)
function stopWorker() (
worker.terminate();
worker = undefined;
)
function test() (
for (var j = 0; j < 20000; j++) (
document.getElementById("mainThreadOutput").innerHTML = "Main Thread Counter: " + j;
)
)

Next creating an separate external javascript file demo.js and the code comes as shown.
demo.js
j = 0;
while (j < 200000)
( postMessage("Web Worker Counter: " + j);
j++;
)



Web Workers Demo
body (padding-top:18px;)
.output-cont (margin-left:12%; margin-top:28px;)
.output-cont h2 (width:150px; height:95%;)
.output-cont button (padding:3px 7px; font-size:1.3rem; font-family:sans-serif; )

start worker terminate

start blocking thread

test responsiveness
var worker;
function testWork() (
if (typeof(Worker) !== "undefined") (
if (typeof(worker) == "undefined") (
worker = new Worker("demo.js");
)
worker.onmessage = function(event) (
document.getElementById("wOutput").innerHTML = event.data;
);
) else (
document.getElementById("wOutput").innerHTML = "Web Workers are unsupported";
)
)
function stopWorker() (
worker.terminate();
worker = undefined;
)
function test() (
for (var j = 0; j < 20000; j++) (
document.getElementById("mainThreadOutput").innerHTML = "Main Thread Counter: " + j;
)
)

Next creating an separate external javascript file demo.js and the code comes as shown.
demo.js
j = 0;
while (j < 200000)
( postMessage("Web Worker Counter: " + j);
j++;
)



Web Workers Demo
body (padding-top:18px;)
.output-cont (margin-left:12%; margin-top:28px;)
.output-cont h2 (width:150px; height:95%;)
.output-cont button (padding:3px 7px; font-size:1.3rem; font-family:sans-serif; )

start worker terminate

start blocking thread

test responsiveness
var worker;
function testWork() (
if (typeof(Worker) !== "undefined") (
if (typeof(worker) == "undefined") (
worker = new Worker("demo.js");
)
worker.onmessage = function(event) (
document.getElementById("wOutput").innerHTML = event.data;
);
) else (
document.getElementById("wOutput").innerHTML = "Web Workers are unsupported";
)
)
function stopWorker() (
worker.terminate();
worker = undefined;
)
function test() (
for (var j = 0; j < 20000; j++) (
document.getElementById("mainThreadOutput").innerHTML = "Main Thread Counter: " + j;
)
)

Next creating an separate external javascript file demo.js and the code comes as shown.
demo.js
j = 0;
while (j < 200000)
( postMessage("Web Worker Counter: " + j);
j++;
)

Wynik:

Wniosek

Do końca widzieliśmy, jak pracownicy sieci pracują niezależnie od głównego wątku, który pomaga organizacjom internetowym w tworzeniu wymagających aplikacji. Zdecydowanie zaleca się używanie robotów internetowych w javascript do ciężkich zadań. Zaleca się, aby gdy przeglądarka internetowa nie jest już używana, powinna zostać zamknięta, aby zużywać zasoby systemowe.

Polecany artykuł

To jest przewodnik po HTML5 Web Workers. Tutaj omawiamy 9 najważniejszych funkcji HTML5 Web Workers i jego przykłady z implementacją kodu. Możesz także przejrzeć nasze sugerowane artykuły, aby dowiedzieć się więcej -

  1. HTML5 Nowe elementy | Top 10
  2. Ramki HTML ze składnią
  3. Wprowadzenie do zalet HTML
  4. 10 najlepszych pytań i odpowiedzi do wywiadu HTML5