Sobes.tech
Middle

Kas yra interneto darbuotojai ir kam jie skirti?

sobes.tech AI

Atsakymas iš AI

Tinklalapio siuntėjai — tai būdas vykdyti scenarijus foniniuose srautuose, atskirtuose nuo pagrindinio UI srauto.

Jų pagrindinis tikslas:

  • Našumo gerinimas: sudėtingų skaičiavimų, didelių duomenų apdorojimo, analizės užduočių perkėlimas iš pagrindinio srauto, kuris atsakingas už sąsajos atvaizdavimą ir naudotojo įvykių apdorojimą. Tai užkerta kelią puslapio „užšaldymui“ ir pagerina programėlės reagavimą.
  • Paralelizmas: galimybė vienu metu vykdyti kelias užduotis, efektyviau naudoti daug branduolių procesorius.

Yra trys tinklalapio siuntėjų tipai:

  1. Dedicated Workers: susiję su konkrečiu puslapiu ir prieinami tik jam.
  2. Shared Workers: gali būti prieinami iš kelių puslapių ar skirtukų toje pačioje domeno srityje.
  3. Service Workers: veikia kaip tinklo tarpiniai serveriai, gaudami tinklo užklausas ir leidžia įgyvendinti neprisijungusio režimo funkcionalumą, pranešimus ir kitas pažangias tinklalapių galimybes.

Veikimo principai:

  • Atskiras kontekstas: siuntėjui priklauso savo globalus objektas ir prieiga prie naršyklės API (neturi prieigos prie DOM, window, document, parent).
  • Pranešimų keitimasis: sąveika tarp pagrindinio srauto ir siuntėjo vyksta per pranešimus naudojant postMessage() ir įvykio apdorotoją onmessage. Duomenys perduodami reikšme (kopijuojami) arba nuoroda (Transferable Objects).

Pavyzdys naudojant Dedicated Worker:

// main.js (pagrindinis srautas)
const worker = new Worker('worker.js'); // Siuntėjo sukūrimas

worker.onmessage = (event) => {
  // Apdoroti pranešimą iš siuntėjo
  console.log('Gauta iš siuntėjo:', event.data);
};

worker.postMessage('Pradėti sudėtingą operaciją'); // Siųsti pranešimą siuntėjui
// worker.js (siuntėjo failas)
onmessage = (event) => {
  // Apdoroti pranešimą iš pagrindinio srauto
  console.log('Gauta iš pagrindinio srauto:', event.data);

  // Atlikti sudėtingą užduotį
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }

  // Grąžinti rezultatą
  postMessage(result);
};