API-ul Web Workers în HTML

API-ul HTML pentru Web Workers

Un web worker este un fișier JavaScript extern care rulează în fundal, fără a afecta performanța paginii.

Ce este un Web Worker?

Când un script rulează pe o pagină HTML, pagina devine indisponibilă până când scriptul se termină. Un web worker este un fișier JavaScript extern care rulează în fundal, independent de alte scripturi, fără a afecta pagina, astfel încât poți continua să dai click și să selectezi în timp ce acesta rulează. Web workerii sunt utili pentru cod „greu” care altfel ar crea sarcini lungi și ar bloca pagina.

Suport pentru browsere

API-ul Web Workers este suportat în toate browserele moderne (începând cu Chrome 4, Edge 10, Firefox 3.5, Safari 4 și Opera 11.5).

Exemplu de API Web Workers

Un web worker simplu poate număra numere în fundal, în timp ce pagina rămâne receptivă.

Notă: Web workerii nu sunt de obicei folosiți pentru scripturi atât de simple, ci pentru sarcini mai solicitante pentru procesor.

Verificarea Suportului pentru API-ul Web Worker

Înainte de a folosi un web worker, poți verifica rapid suportul testând typeof(Worker).

Exemplu

Verificarea suportului pentru Web Worker.

O pagină cu un script care verifică dacă browserul acceptă Web Workers (typeof Worker) și scrie fie un mesaj de suport, fie unul de lipsă a suportului într-un paragraf cu id result.

> Rezultat: pagină HTML completă

Prompt

O pagină cu un script care verifică dacă browserul acceptă Web Workers (typeof Worker) și scrie fie un mesaj de suport, fie unul de lipsă a suportului într-un paragraf cu id result.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test suport</title>
</head>
<body>

<p id="result"></p>

<script>
const x = document.getElementById("result");
if (typeof(Worker) !== "undefined") {
  x.innerHTML = "Browserul tău acceptă Web Workers!";
} else {
  x.innerHTML = "Ne pare rău, browserul tău nu acceptă Web Workers.";
}
</script>

</body>
</html>

Crearea unui Fișier Web Worker .js

Un web worker trăiește într-un fișier JavaScript extern. Iată un script care numără, stocat în demo_workers.js.

Notă: Partea importantă este metoda postMessage(), care trimite mesaje înapoi către pagina HTML.

demo_workers.js

Fișierul worker extern care numără și trimite fiecare număr înapoi.

var i = 0;

function timedCount() {
  i = i + 1;
  postMessage(i);
  setTimeout("timedCount()", 500);
}

timedCount();

Crearea unui Obiect Web Worker

Odată ce fișierul .js există, îl apelezi dintr-o pagină HTML. Codul verifică dacă un worker există deja și, dacă nu, creează unul cu new Worker("demo_workers.js"). Datele sunt transmise între worker și firul principal prin mesaje: ambele părți trimit cu postMessage() și răspund cu handlerul de evenimente onmessage. Adaugi un listener onmessage obiectului worker, iar când worker-ul trimite un mesaj, listener-ul rulează, cu datele disponibile în event.data.

Oprirea unui Web Worker

Odată creat, un web worker continuă să asculte mesaje până este oprit. Pentru a-l opri și a elibera resursele, apelează metoda terminate().

Reutilizarea Web Worker-ului

Dacă setezi variabila worker la undefined după oprirea acestuia, poți reutiliza codul worker-ului.

Exemplu Complet de Web Worker

Mai jos este pagina HTML completă care lucrează cu fișierul worker prezentat anterior.

Exemplu

O pagină completă care pornește și oprește un web worker de numărare.

O pagină completă care folosește un web worker: un element output (id result) și butoanele Pornește Worker și Oprește Worker. Pornirea creează un Worker din demo_workers.js (dacă nu a fost deja creat) și afișează mesajele prin onmessage; Oprirea termină worker-ul și îl setează la undefined. Revine la un mesaj de rezervă dacă Web Workers nu sunt acceptați.

> Rezultat: pagină HTML completă

Prompt

O pagină completă care folosește un web worker: un element output (id result) și butoanele Pornește Worker și Oprește Worker. Pornirea creează un Worker din demo_workers.js (dacă nu a fost deja creat) și afișează mesajele prin onmessage; Oprirea termină worker-ul și îl setează la undefined. Revine la un mesaj de rezervă dacă Web Workers nu sunt acceptați.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Worker complet</title>
</head>
<body>

<p>Numără numere: <output id="result"></output></p>
<button onclick="startWorker()">Pornește Worker</button>
<button onclick="stopWorker()">Oprește Worker</button>

<script>
let w;

function startWorker() {
  const x = document.getElementById("result");
  if (typeof(Worker) !== "undefined") {
    if (typeof(w) == "undefined") {
      w = new Worker("demo_workers.js");
    }
    w.onmessage = function(event) {
      x.innerHTML = event.data;
    };
  } else {
    x.innerHTML = "Ne pare rău! Nu există suport pentru Web Worker.";
  }
}

function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>

Web Workers și DOM

Deoarece web workerii trăiesc în fișiere .js externe, ei nu pot accesa obiectul window, obiectul document sau obiectul parent.