Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Уважает Ё, исправляет опечатки в статье 'Web Workers' #5291

Merged
merged 2 commits into from
Apr 16, 2024
Merged

Уважает Ё, исправляет опечатки в статье 'Web Workers' #5291

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d88f128
Уважает Ё, исправляет опечатки
vitya-ne Apr 16, 2024
b6b1049
Удаляет лишнюю запятую
vitya-ne Apr 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions js/web-workers/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,19 @@ tags:

Web worker — это API, которое позволяет выполнять код вне основного потока. Благодаря этому долгие или сложные вычисления, которые выполняются на воркерах, не блокируют пользовательский интерфейс (UI).

Веб воркер создается в основном потоке. При создании воркеру передается URL-адрес скрипта. После загрузки создается отдельный поток, в котором выполнится скрипт воркера.
Веб воркер создаётся в основном потоке. При создании воркеру передаётся URL-адрес скрипта. После загрузки создаётся отдельный поток, в котором выполнится скрипт воркера.

У скрипта будет свой собственный контекст, отличный от контекста окна `window`. В основном потоке глобальный контекст привязывается к переменной `window`, а в воркере — к переменной `self`. Контекст выполнения веб воркера [WorkerGlobalScope](https://html.spec.whatwg.org/multipage/workers.html#workerglobalscope) отличается от контекста выполнения основного потока. У него нет доступа к объекту документа `document` и `DOM API`.

## Особенности потока выполнения

Поток, в котором выполняется код воркера, изолирован от основного. В Chromium каждому из этих потоков соответствует свой собственный экзепляр [движка JavaScript](https://v8docs.nodesource.com/node-0.8/d5/dda/classv8_1_1_isolate.html). Из-за этого создание нового воркера считается «тяжёлой» операцией. Обычно предполагают, что воркеров будет немного, и они будут долго жить.
Поток, в котором выполняется код воркера, изолирован от основного. В Chromium каждому из этих потоков соответствует свой собственный экземпляр [движка JavaScript](https://v8docs.nodesource.com/node-0.8/d5/dda/classv8_1_1_isolate.html). Из-за этого создание нового воркера считается «тяжёлой» операцией. Обычно предполагают, что воркеров будет немного, и они будут долго жить.

Потоки могут общаться между собой через отправку сообщений. Используйте для отправки сообщений функцию [`postMessage()`](https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage).

<aside>

📨 При помощи `postMessage()` можете косвенно управлять DOM основного потока. Учитывайте, что механизм `postMessage` — асинхронный. То есть основной поток подписывается на событие `message`, воркер отправиляет сообщение-команду для обновления DOM, а основной поток её обрабатывает и обновляет DOM.
📨 При помощи `postMessage()` можете косвенно управлять DOM основного потока. Учитывайте, что механизм `postMessage` — асинхронный. То есть основной поток подписывается на событие `message`, воркер отправляет сообщение-команду для обновления DOM, а основной поток её обрабатывает и обновляет DOM.

</aside>

Expand Down Expand Up @@ -80,7 +80,7 @@ worker.onmessage = function (e) { // Слушаем сообщения из во

## Что доступно внутри?

Ранее упоминали, что в контексте выполнения воркера недоступны многоие API из объекта `window` основного потока. Что же тогда доступно? Перечислим некоторые функции API, которые часто ипользуются: `fetch()`, `setInterval()`, `setTimeout()`, `requestAnimationFrame()` и `queueMicrotask()`. Для любознательных — [полный список поддерживаемых API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers).
Ранее упоминали, что в контексте выполнения воркера недоступны многие API из объекта `window` основного потока. Что же тогда доступно? Перечислим некоторые функции API, которые часто используются: `fetch()`, `setInterval()`, `setTimeout()`, `requestAnimationFrame()` и `queueMicrotask()`. Для любознательных — [полный список поддерживаемых API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers).

## Типы воркеров

Expand Down Expand Up @@ -155,7 +155,7 @@ onconnect = (connect) => {

### Отправка данных без копирования

Для оптимизации производительности и минимизации затрат на копирование данных можно использовать технику передачи данных через *Transferable objects*. Transferable objects не копируются а перемещаются между контекстами. После оправки Transferable object пропадает из места откуда его отправили. Примерами transferable objects являются `ArrayBuffer` и `MessagePort`.
Для оптимизации производительности и минимизации затрат на копирование данных можно использовать технику передачи данных через *Transferable objects*. Transferable objects не копируются, а перемещаются между контекстами. После оправки Transferable object пропадает из места откуда его отправили. Примерами transferable objects являются `ArrayBuffer` и `MessagePort`.

### Пример использования Transferable objects

Expand All @@ -182,7 +182,7 @@ onmessage = function(e) {

```

В этом примере объект типа `ArrayBuffer` отправляется в воркер через `postMessage`, массив с этим объектом также передается вторым аргументом как transferable object.
В этом примере объект типа `ArrayBuffer` отправляется в воркер через `postMessage`, массив с этим объектом также передаётся вторым аргументом как transferable object.

Обратите внимание:

Expand All @@ -193,4 +193,4 @@ Transferable objects работают быстро, так как позволя

## Заключение

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