Обзор работников

Как веб-воркеры и сервис-воркеры могут улучшить производительность вашего сайта, и когда следует использовать веб-воркер, а когда сервис-воркер.

Эндрю Гуан
Andrew Guan
Демиан Рензулли
Demián Renzulli

В этом обзоре объясняется, как веб-воркеры и сервис-воркеры могут повысить производительность вашего сайта, а также когда следует использовать веб-воркер, а когда — сервис-воркер. Ознакомьтесь с оставшейся частью этой серии статей , чтобы узнать о конкретных моделях взаимодействия между объектами Windows и сервис-воркерами.

Как работники могут улучшить ваш сайт

Браузер использует один поток ( основной поток ) для выполнения всего JavaScript-кода на веб-странице, а также для выполнения таких задач, как рендеринг страницы и сборка мусора. Выполнение избыточного JavaScript-кода может блокировать основной поток, замедляя выполнение этих задач браузером и ухудшая пользовательский опыт.

При разработке приложений для iOS/Android распространённым подходом, гарантирующим, что основной поток приложения останется свободным для реагирования на пользовательские события, является передача операций в дополнительные потоки. Более того, в последних версиях Android слишком длительная блокировка основного потока приводит к сбою приложения .

В Интернете JavaScript был разработан на основе концепции одного потока и не имеет возможностей, необходимых для реализации многопоточной модели, которая есть в приложениях, например, общей памяти.

Несмотря на эти ограничения, аналогичный подход можно реализовать в вебе, используя воркеры для запуска скриптов в фоновых потоках, что позволяет им выполнять задачи, не мешая основному потоку. Воркеры — это полноценная область JavaScript, работающая в отдельном потоке без какой-либо общей памяти.

В этой статье вы узнаете о двух различных типах воркеров (веб-воркерах и сервис-воркерах), их сходствах и различиях, а также о наиболее распространенных шаблонах их использования на производственных веб-сайтах.

Диаграмма, показывающая две связи между объектом Window и веб-воркером и сервис-воркером.

Веб-работники и работники сферы услуг

Сходства

Веб-воркеры и сервис-воркеры — это два типа работников, доступных для веб-сайтов. У них есть несколько общих черт:

  • Оба работают во вторичном потоке, что позволяет выполнять код JavaScript, не блокируя основной поток и пользовательский интерфейс.
  • У них нет доступа к объектам Window и Document , поэтому они не могут напрямую взаимодействовать с DOM, а также у них ограниченный доступ к API браузера.

Различия

Можно подумать, что большинство задач, которые можно делегировать веб-воркеру, можно выполнить в сервис-воркере и наоборот, но между ними есть важные различия:

  • В отличие от веб-воркеров, сервис-воркеры позволяют перехватывать сетевые запросы (через событие fetch ) и прослушивать события Push API в фоновом режиме (через событие push ).
  • Страница может порождать несколько веб-воркеров, но один сервис-воркер управляет всеми активными вкладками в области, в которой он зарегистрирован.
  • Жизненный цикл веб-воркера тесно связан с вкладкой, к которой он принадлежит, в то время как жизненный цикл сервис-воркера не зависит от неё. Поэтому закрытие вкладки, на которой запущен веб-воркер, приведёт к его завершению, в то время как сервис-воркер может продолжать работу в фоновом режиме, даже если на сайте нет открытых активных вкладок.

Варианты использования

Различия между этими двумя типами работников подсказывают, в каких ситуациях может потребоваться использование того или иного типа:

Варианты использования веб-воркеров чаще всего связаны с передачей работы (например, тяжелых вычислений ) во вторичный поток, чтобы избежать блокировки пользовательского интерфейса.

Диаграмма, показывающая связь объекта Window с веб-работником.
  • Пример: команда, создавшая видеоигру PROXX, хотела максимально освободить основной поток для обработки пользовательского ввода и анимации. Для этого они использовали веб-воркеры для выполнения игровой логики и поддержки состояния в отдельном потоке.
Скриншот видеоигры PROXX.

Задачи Service Worker, как правило, больше связаны с работой в качестве сетевого прокси-сервера, обработкой фоновых задач, а также такими вещами, как кэширование и работа в автономном режиме.

Скриншот видеоигры PROXX.

Пример: в PWA-приложении для подкастов может потребоваться разрешить пользователям загружать полные выпуски для прослушивания офлайн. Для этого можно использовать сервис-воркер и, в частности, API Background Fetch . Таким образом, если пользователь закроет вкладку во время загрузки выпуска, процесс не будет прерван.

Скриншот подкаста PWA.
Интерфейс пользователя обновлён, отображая ход загрузки (слева). Благодаря сервис-воркерам операция может продолжаться после закрытия всех вкладок (справа).

Инструменты и библиотеки

Взаимодействие между окнами и рабочими процессами можно реализовать с помощью различных низкоуровневых API. К счастью, существуют библиотеки, абстрагирующие этот процесс, обеспечивая наиболее распространённые сценарии использования. В этом разделе мы рассмотрим две из них, которые обеспечивают взаимодействие между окнами и веб-воркерами и сервис-воркерами соответственно: Comlink и Workbox .

Скриншот видеоигры PROXX.

Comlink — это небольшая (1,6 КБ) RPC- библиотека, которая учитывает множество базовых деталей при создании веб-сайтов с использованием Web Workers. Она применялась в таких проектах, как PROXX и Squoosh . Краткое описание её предназначения и примеры кода можно найти здесь .

Рабочий ящик

Workbox — популярная библиотека для создания веб-сайтов с использованием сервис-воркеров. Она включает в себя набор передовых практик в области кэширования, автономной работы, фоновой синхронизации и т. д. Модуль workbox-window обеспечивает удобный способ обмена сообщениями между сервис-воркером и страницей.

Следующие шаги

Остальная часть этой серии посвящена моделям общения между работниками окон и службами:

  • Руководство по императивному кэшированию : вызов сервисного работника со страницы для предварительного кэширования ресурсов (например, в сценариях предварительной выборки).
  • Трансляция обновлений : вызов страницы из сервис-воркера для информирования о важных обновлениях (например, о доступности новой версии веб-сайта).
  • Двусторонняя связь : делегирование задачи сервисному работнику (например, тяжелая загрузка) и информирование страницы о ходе выполнения.

О моделях взаимодействия окон и веб-воркеров читайте здесь: Использование веб-воркеров для запуска JavaScript вне основного потока браузера .