რა არის ვებ-შრომლები და რა მიზნით სჭირდებათ?

ვებ-ვორქერები — ეს არის მეთოდი სკრიპტების შესრულებისთვის ფონის ნაკადებში, რომლებიც დამოუკიდებელია ძირითადი UI ნაკადიდან:

მთავარი დანიშნულება:

• შესაძლებლობის გაუმჯობესება: რესურსმომხმარებელ დავალებების გადატანა (სირთულე გამოთვლები, დიდი მონაცემების დამუშავება, პარსინგი) ძირითადი ნაკადიდან, რომელიც პასუხისმგებელია ინტერფეისის რენდერობაზე და მომხმარებლის მოვლენების დამუშავებაზე. ეს თავიდან აცილებს გვერდის „ჩამონტაჟებას“ და აუმჯობესებს აპლიკაციის რეაგირებას.
• პარალელიზმი: შესაძლებლობა ერთდროულად შეასრულოს რამდენიმე დავალება, ეფექტურად გამოიყენოს მრავალძრავიანი პროცესორები.

არსებობს სამი ტიპის ვებ-ვორქერი:

1. Dedicated Workers: დაკავშირებულია კონკრეტულ გვერდთან და ხელმისაწვდომია მხოლოდ მასთან.
2. Shared Workers: შეიძლება იყოს ხელმისაწვდომი რამდენიმე გვერდიდან ან ჩანართიდან ერთ დომენში.
3. Service Workers: მუშაობს როგორც ქსელური პროქსი, იჭერს ქსელურ მოთხოვნებს და საშუალებას აძლევს განახორციელოს ოფლაინ-ფუნქციონალობა, პუშ-შეტყობინებები და სხვა პროგრესული ვებ-აპლიკაციების შესაძლებლობები.

სამუშაოს პრინციპები:

• საკუთარი კონტექსტი: ვებ-ვორქერის აქვს თავისი გლობალური ობიექტი და წვდომა ბრაუზერის API-ების ნაწილისთვის (არ აქვს DOM, window, document, parent).
• შეტყობინებების გაცვლა: ურთიერთქმედება ძირითად ნაკადსა და ვებ-ვორქერს შორის ხდება შეტყობინებების მეშვეობით postMessage() და onmessage მოვლენის დამუშავებლის საშუალებით. მონაცემები გადაეცემა მნიშვნელობით (კოპირებულია) ან რგოლით (Transferable Objects).

გამოყენების მაგალითი Dedicated Worker-ის:

// main.js (ძირითადი ნაკადი)
const worker = new Worker('worker.js'); // ვებ-ვორქერის შექმნა

worker.onmessage = (event) => {
  // შეტყობინების დამუშავება ვებ-ვორქერიდან
  console.log('მიღებულია ვებ-ვორქერიდან:', event.data);
};

worker.postMessage('სირთულე ოპერაციის დაწყება'); // შეტყობინების გაგზავნა ვებ-ვორქერს

// worker.js (ვებ-ვორქერის ფაილი)
onmessage = (event) => {
  // შეტყობინების დამუშავება ძირითადი ნაკადიდან
  console.log('მიღებულია ძირითადი ნაკადიდან:', event.data);

  // სირთულე დავალების შესრულება
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }

  // შედეგის დაბრუნება
  postMessage(result);
};