Имало едно време в необятния пейзаж на интернет имаше усърдна катерица на име Спиди. Спиди беше главен архитект на Wisedoc AI, иновативна онлайн платформа за редактиране, анализиране и създаване на професионални автобиографии.

Speedy имаше голямо предизвикателство: Wisedoc беше популярен и неговите потребители непрекъснато редактираха документите си в платформата. Всяко натискане на клавиш в редактораотстраняване на отскок ще задейства актуализация на състоянието на приложението чрез Redux и това състояние след това се прочита от процес, наречен генератора. Задачата на генератора беше да преобразува необработените данни на редактора (нека го наречем формат X) във формат, който може лесно да бъде показан в панела за визуализация (формат Y). Тази операция, особено за големи документи, беше доста интензивна и понякога водеше до бавна работа.

Един ден Спиди има идея. „Ами ако можем да преместим работата на Генератора в отделна нишка?“ той помисли. „По този начин основната нишка може да остане отзивчива, дори когато генераторът работи върху голям документ.“ Тогава той открива Web Workers на JavaScript.

Уеб работниците на помощ

Web Workers са инструмент, който позволява на JavaScript кода да се изпълнява в отделна нишка, което означава, че дълготрайните операции могат да бъдат прехвърлени на работна програма, освобождавайки основната нишка за обработка на потребителските взаимодействия. Спиди разбра, че това може да е решението на проблема му.

Speedy се зае със създаването на нов Web Worker за Generator. Вместо да стартира Генератора директно в отговор на актуализация на състоянието на Redux, той накара главната нишка да изпрати съобщение до работника с новото състояние. Работникът ще стартира генератора, трансформирайки данните на редактора във формат за предварителен преглед и ще изпрати съобщение обратно до основната нишка с резултата.

Ето как той настрои работника:

В работника (generator-worker.js) той настрои генератора:

Нова зора за Wisedoc

Тъй като Generator сега работи в Web Worker, производителността на предварителния преглед на Wisedoc се подобри значително. Без значение колко голям е документът, потребителският интерфейс остава отзивчив, осигурявайки гладко потребителско изживяване.

Това е само един случай на използване на Web Workers, има много, като актуализация на свойствата на изображението при клиент, като филтри или обработка на изображението на клиент, сложни изчисления, които се нуждаят от изчислителна мощност или избягване на извиквания на API - не е необходимо за рендиране, но блокира рендиране и т.н. ,

Моралът на историята

Историята на катерицата Спиди е доказателство за силата на уеб работниците. Чрез разрешаване на дълготрайни операции да се изпълняват във фонов режим, Web Workers могат да помогнат да се гарантира, че вашите JavaScript приложения остават отзивчиви и производителни, дори при голямо натоварване. Независимо дали генерирате сложни структури от данни като Speedy, управлявате мрежови заявки или изпълнявате други интензивни задачи, помислете дали Web Worker може да ви помогне да запазите основната си нишка свободна и вашия потребителски интерфейс гладък.