Понимание веб-воркеров в браузере и изучение того, как вызывать API в фоновом режиме, не влияя на потоки пользователей с помощью JavaScript.
Здравствуйте, разработчики 👋,
В этом посте мы рассказали, чем полезны веб-воркеры, и обсудили некоторые примеры из реальной жизни.
В последние годы веб-приложения становятся все более сложными, и к ним добавляется все больше и больше функциональных возможностей. В результате производительность и скорость отклика стали серьезной проблемой для веб-разработчиков. Одним из решений этой проблемы является использование Web Workers.
👉 Что такое веб-воркеры
Веб-воркеры — это JavaScript API, который позволяет разработчикам запускать сценарии в фоновом режиме веб-страницы, не блокируя пользовательский интерфейс.
Это означает, что длительные задачи, такие как вызов API или выполнение сложных вычислений, могут выполняться в фоновом режиме, не влияя на производительность веб-страницы.
Веб-воркеры работают, создавая отдельный поток выполнения, который запускает скрипт в фоновом режиме.
Этот поток полностью отделен от основного потока, который отвечает за отрисовку веб-страницы и реагирование на вводимые пользователем данные.
Это означает, что фоновый скрипт может работать независимо от основного потока, не блокируя его.
👉 Преимущества использования веб-воркеров
Использование Web Workers в веб-приложениях может дать несколько преимуществ, в том числе:
- Улучшенная производительность.
Запуская длительные задачи в фоновом режиме, Web Workers может повысить производительность веб-приложений. Это связано с тем, что основной поток не блокируется длительной задачей, что позволяет ему продолжать отображать веб-страницу и реагировать на ввод пользователя. - Улучшенная скорость отклика
Web Workers также может повысить скорость отклика веб-приложений. Благодаря запуску задач в фоновом режиме пользовательский интерфейс остается отзывчивым, даже когда приложение выполняет длительные задачи. - Улучшение взаимодействия с пользователем
Повышая производительность и скорость отклика, Web Workers может улучшить взаимодействие с пользователем для веб-приложений. Пользователи с большей вероятностью будут продолжать использовать быстрое и отзывчивое приложение, а не медленное и неотзывчивое.
👉 Вызов асинхронного API в фоновом режиме браузера
Давайте разберемся на примере.
Шаг 1. Создание Web Worker
Чтобы создать Web Worker, нам нужно создать новый файл JavaScript, который будет содержать код, который мы хотим запускать в фоновом режиме.
В этом примере мы создадим файл с именем worker.js.
self.onmessage = function(event) {
// Retrieve the data from the event
const requestData = event.data;
// Perform the asynchronous API call
performAPICall(requestData)
.then(responseData => {
// Send the response data back to the main thread
self.postMessage(responseData);
})
.catch(error => {
// Handle any errors that occur during the API call
console.error('Error:', error);
});
};
В этом файле мы определяем функцию с именем onmessage, которая будет вызываться, когда Web Worker получит сообщение из основного потока.
Шаг 2. Создание вызова API
Далее нам нужно создать код, который будет выполнять вызов API.
В этом примере мы будем использовать функцию performAPICall() для вызова конечной точки API с помощью fetch().
function performAPICall() {
// Create a new Promise to encapsulate the asynchronous API call
return new Promise((resolve, reject) => {
// Perform the API call using fetch or any other suitable method
fetch('https://jsonplaceholder.typicode.com/posts/', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
})
.then(response => {
if (response.ok) {
// Resolve the Promise with the response data
resolve(response.json());
} else {
// Reject the Promise with an error message
reject('API call failed with status: ' + response.status);
}
})
.catch(error => {
// Reject the Promise with any error that occurs during the API call
reject(error);
});
});
}
Примечание: в этом примере я использую JSONPlaceHolder API для целей тестирования.
Шаг 3. Создание основного потока
Теперь, когда мы создали Web Worker и вызов API, нам нужно создать основной поток, который будет взаимодействовать с Web Worker.
В этом примере давайте создадим файл app.js
// Create a new web worker
const worker = new Worker('worker.js');
// Send the data to the web worker
worker.postMessage('API Call');
// Listen for messages from the web worker
worker.onmessage = function (event) {
// Retrieve the response data from the event
const responseData = event.data;
// Process the response data
processResponse(responseData);
console.log("Response Arrived", responseData);
};
function processResponse(responseData) {
// Handle and process the response data from the API call
let ulElem = document.getElementById("listing");
ulElem.innerHTML = '';
for (let i = 0; i < 10; i++) {
let elem = `<li>${responseData[i].title}</li>`
ulElem.innerHTML += elem;
}
}
Мы используем функцию postMessage() для отправки сообщения Web Worker, который запустит вызов API.
В этом коде мы создаем новый экземпляр Web Worker и определяем функцию с именем onmessage, которая будет вызываться, когда Web Worker отправляет сообщение обратно в основной поток.
функция processResponse(responseData) — это функция, которая обрабатывает данные ответа и помогает отображать их в виде списка. (Вспомогательная функция)
Шаг 4. Запуск кода
Чтобы запустить код, нам нужно создать файл HTML, включающий файл main.js.
<!DOCTYPE html> <html> <head> <title>Web Worker Example</title> </head> <body> <script src="app.js"></script> </body> </html>
Когда мы откроем этот HTML-файл в веб-браузере, Web Worker начнет выполнять вызов API в фоновом режиме. Как только вызов API завершится, Web Worker отправит ответ обратно в основной поток, где мы сможем обработать данные по мере необходимости.
Вы также можете проверить вкладку Сеть. (Осмотрите элемент F12 -> Сеть)
👉 Реальные примеры веб-воркеров
Web Workers можно использовать в различных приложениях, в том числе:
- Игры
Web Workers можно использовать в веб-играх для выполнения сложных вычислений, таких как физическое моделирование или алгоритмы искусственного интеллекта. Выполняя эти вычисления в фоновом режиме, игра может оставаться отзывчивой даже при выполнении сложных задач. - Обработка видео и аудио
Web Workers можно использовать в приложениях, обрабатывающих видео или аудиоданные, таких как программное обеспечение для редактирования видео или инструменты для обработки звука. Выполняя эти задачи в фоновом режиме, приложение может оставаться отзывчивым даже при обработке больших объемов данных. - Визуализация данных
Web Workers можно использовать в приложениях, выполняющих визуализацию данных, таких как диаграммы или графики. Выполняя эти задачи в фоновом режиме, приложение может оставаться отзывчивым даже при обработке больших объемов данных.
Заключение
Web Workers — это мощный инструмент для повышения производительности и скорости отклика веб-приложений.
Запуская длительные задачи в фоновом режиме, Web Workers может улучшить взаимодействие с пользователем и сделать веб-приложения более приятными в использовании.
Хотя Web Workers могут подходить не для всех приложений, они являются ценным инструментом для разработчиков, стремящихся повысить производительность и скорость отклика своих веб-приложений.
Спасибо за прочтение 🙏😇
Свяжитесь со мной
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
