Добавляет статью про Web Workers #5190

ByMarsel · 2024-03-05T19:14:57Z

Описание

Closes Статья "Использование Web Workers"

Чек-лист

Текст оформлен согласно руководству по стилю
Ссылки на внутренние материалы начинаются со слеша и заканчиваются слэшем либо якорем на заголовок (/css/color/, /tools/json/, /tools/gulp/#kak-ponyat)
Ссылки на картинки, видео и демки относительные (images/example.png, demos/example/, ../demos/example/)

ByMarsel · 2024-03-05T19:16:20Z

Привет!
Это моя первая попытка контрибьюта в доку, поэтому не судите, пожалуйста строго. Очень буду рад фидбэку, особенно о том насколько статья попала в ожидания issue.

…a-guide into article/web-workers

HellSquirrel · 2024-03-14T18:56:25Z

@ByMarsel а докинь еще себя, пожалуйста в папочку People прямо в этом PR. Примерно вот так:
https://github.com/doka-guide/content/blob/main/people/ipogorelova/index.md?plain=1 :) Пасиба!

HellSquirrel

Я посмотрела только кусочек. Оставила немножко комментов. Чуть позже принесу еще :)
Очень крутая статья. Спасибо тебе большое 💪

js/web-workers/index.md

HellSquirrel · 2024-03-14T22:44:31Z

js/web-workers/index.md

+
+## Что такое Web Worker?
+
+Web Worker — это функциональность JavaScript, которая позволяет выполнять скрипты в фоновом режиме параллельно с основным потоком выполнения, не блокируя его и не влияя на производительность пользовательского интерфейса. Это дает возможность выполнять сложные вычисления или обработку данных без замедления отзывчивости веб-страницы.


Может как-то так?)

Suggested change

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

WebWorker — это функциональность JavaScript, которая позволяет выполнять код вне основного потока, не блокируя его. Долгие или сложные вычисления на WebWorkers не блокируют пользовательский интерфейс.

HellSquirrel · 2024-03-14T22:51:15Z

js/web-workers/index.md

+
+Web Worker — это функциональность JavaScript, которая позволяет выполнять скрипты в фоновом режиме параллельно с основным потоком выполнения, не блокируя его и не влияя на производительность пользовательского интерфейса. Это дает возможность выполнять сложные вычисления или обработку данных без замедления отзывчивости веб-страницы.
+
+По сути, это скрипт js, который запускается в отдельном потоке браузера и выполняет код параллельно основному потоку браузера. К тому же Web Workers имеют свой собственный контекст, отличный от window. 


Вот тут надо очень аккуратно. WebWorker (в хроме) выполняется в отдельном isolate https://v8docs.nodesource.com/node-0.8/d5/dda/classv8_1_1_isolate.html. Это отдельный экземпляр JS движка. Это чуть хитрее чем отдельный поток
Давай как-то попробуем это донести? )

HellSquirrel · 2024-03-14T23:13:40Z

js/web-workers/index.md

+
+По сути, это скрипт js, который запускается в отдельном потоке браузера и выполняет код параллельно основному потоку браузера. К тому же Web Workers имеют свой собственный контекст, отличный от window. 
+
+Что скрывается под фразой “собственный контекст”? Если упростить, то внутри Web Workers недоступны **`window`**, **`document`** или **`parent`** объекты, то есть нам недоступно управление DOM. По крайней мере, напрямую, но ничто не мешает нам манипулировать DOM косвенно, например, через отправку команд в window-поток с помощью `postMessage`.


Вот что-то такое :)

Suggested change

Что скрывается под фразой “собственный контекст”? Если упростить, то внутри Web Workers недоступны **`window`**, **`document`** или **`parent`** объекты, то есть нам недоступно управление DOM. По крайней мере, напрямую, но ничто не мешает нам манипулировать DOM косвенно, например, через отправку команд в window-поток с помощью `postMessage`.

Разберёмся что означает “собственный контекст”? Контекст выполнения WebWorkers [WorkerGlobalScope](https://html.spec.whatwg.org/multipage/workers.html#workerglobalscope), отличается от контекста выполнения для обычного потока. В нем недоступны объекты window и document и DOM API. Чтобы управлять DOM можно использовать другой механизм – отправку команд в основной поток через `postMessage`

HellSquirrel · 2024-03-14T23:16:43Z

js/web-workers/index.md

+const worker = new Worker('worker.js');
+```
+
+Давайте теперь разберёмся, как нам связать главный поток браузера и поток Worker. Они общаются между собой с помощью сообщений: 


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

HellSquirrel · 2024-03-14T23:17:13Z

js/web-workers/index.md

+worker.postMessage({ message: '415тый, я база, ответьте' }); 
+```
+
+Далее в Web Worker с помощью свойства onmessage, которое находится в глобальном контексте Worker или другими словами `self`, мы записываем туда наш обработчик сообщений из вышестоящего контекста.  Обратите внимание, что postMessage или self.postMessage мы можем вызвать из любого места нашего Worker.


Я бы написала про self где-то в начале, там где мы говорим про глобальный поток

HellSquirrel · 2024-03-24T19:37:07Z

Супер! Я чуть подредачу и помержим.

TatianaFokina · 2024-03-27T16:56:13Z

У меня фундаментальный вопрос: а можем транслит использовать и называть их веб-воркеры/воркеры везде? Насколько это устоявшийся термин? Или это как с API или, не знаю, user agent, которые в переводе ну такое.

HellSquirrel · 2024-03-27T21:01:48Z

О! Я задавалась тем же самым вопросом при редактировании. У меня даже был вариант "веб работники" :)
Я не могу уверенно утверждать что воркер это устоявшееся понятие, но кажется такая замена выглядит более естественно чем, например, такой вариант https://developer.mozilla.org/ru/docs/Web/API/Web_Workers_API/Using_web_workers
Но так как я не автор статьи, давай уточним у @ByMarsel окей ли он с такой заменой :)

ByMarsel · 2024-03-27T21:13:06Z

Вообще я не против, но мне кажется что Web Worker гуглится очень хорошо, в сравнении с Веб Воркер и тем более Веб работник. Что думаете? Я голосую за вариант Web Worker.

@HellSquirrel @TatianaFokina

HellSquirrel · 2024-03-27T21:31:49Z

Пусть будут воркеры :) Поехали 🚀

github-actions · 2024-03-27T21:37:36Z

Превью контента из f4e356a опубликовано.

Добавляет статью про Web Workers

14c538f

ByMarsel requested a review from HellSquirrel as a code owner March 5, 2024 19:14

github-actions bot added js Контент по JavaScript статья Расширенный материал labels Mar 5, 2024

Марсель Ахметшин added 2 commits March 6, 2024 00:28

Добавляет статью про Web Workers

debbd7e

Merge branch 'article/web-workers' of https://github.com/ByMarsel/dok…

fdcdf05

…a-guide into article/web-workers

TatianaFokina assigned ByMarsel Mar 6, 2024

Марсель Ахметшин added 2 commits March 14, 2024 20:25

fix titles and sections

e7e3b6e

Добавляет статью про Web Workers

3dd34f7

Марсель Ахметшин added 4 commits March 14, 2024 23:32

Добавляет статью про Web Workers

6f7a301

Добавляет статью про Web Workers

7fd0f65

Добавляет статью про Web Workers

fed12e6

Добавляет статью про Web Workers

7f17b47

HellSquirrel reviewed Mar 14, 2024

View reviewed changes

Добавляет статью про Web Workers

bacf5d2

ByMarsel requested a review from HellSquirrel March 21, 2024 08:48

Вносит первую пачку правок

734aa9b

github-actions bot added the дока Справочный материал label Mar 24, 2024

HellSquirrel and others added 6 commits March 27, 2024 00:17

Вносит дополнительные правки

395be0f

Правит форматирование

051d310

Правит форматирование

7e14f8e

Правит форматирование

bd41df6

Добавляет исправление ссылки на dev.to

d51323a

Немного редачит: часть 1

564ac20

Вносит еще немного редакторских исправлений

f2a0025

Добавляет статью про Web Workers

f4e356a

HellSquirrel approved these changes Mar 27, 2024

View reviewed changes

HellSquirrel merged commit 2c88408 into doka-guide:main Mar 27, 2024
6 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Добавляет статью про Web Workers #5190

Добавляет статью про Web Workers #5190

ByMarsel commented Mar 5, 2024 •

edited

ByMarsel commented Mar 5, 2024

HellSquirrel commented Mar 14, 2024

HellSquirrel left a comment

HellSquirrel Mar 14, 2024

HellSquirrel Mar 14, 2024

HellSquirrel Mar 14, 2024

HellSquirrel Mar 14, 2024

HellSquirrel Mar 14, 2024

HellSquirrel commented Mar 24, 2024

TatianaFokina commented Mar 27, 2024 •

edited

HellSquirrel commented Mar 27, 2024 •

edited

ByMarsel commented Mar 27, 2024

HellSquirrel commented Mar 27, 2024

github-actions bot commented Mar 27, 2024


		## Что такое Web Worker?

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


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

		По сути, это скрипт js, который запускается в отдельном потоке браузера и выполняет код параллельно основному потоку браузера. К тому же Web Workers имеют свой собственный контекст, отличный от window.


		По сути, это скрипт js, который запускается в отдельном потоке браузера и выполняет код параллельно основному потоку браузера. К тому же Web Workers имеют свой собственный контекст, отличный от window.

		Что скрывается под фразой “собственный контекст”? Если упростить, то внутри Web Workers недоступны `window`, `document` или `parent` объекты, то есть нам недоступно управление DOM. По крайней мере, напрямую, но ничто не мешает нам манипулировать DOM косвенно, например, через отправку команд в window-поток с помощью `postMessage`.

Добавляет статью про Web Workers #5190

Добавляет статью про Web Workers #5190

Conversation

ByMarsel commented Mar 5, 2024 • edited

Описание

Чек-лист

ByMarsel commented Mar 5, 2024

HellSquirrel commented Mar 14, 2024

HellSquirrel left a comment

Choose a reason for hiding this comment

HellSquirrel Mar 14, 2024

Choose a reason for hiding this comment

HellSquirrel Mar 14, 2024

Choose a reason for hiding this comment

HellSquirrel Mar 14, 2024

Choose a reason for hiding this comment

HellSquirrel Mar 14, 2024

Choose a reason for hiding this comment

HellSquirrel Mar 14, 2024

Choose a reason for hiding this comment

HellSquirrel commented Mar 24, 2024

TatianaFokina commented Mar 27, 2024 • edited

HellSquirrel commented Mar 27, 2024 • edited

ByMarsel commented Mar 27, 2024

HellSquirrel commented Mar 27, 2024

github-actions bot commented Mar 27, 2024

ByMarsel commented Mar 5, 2024 •

edited

TatianaFokina commented Mar 27, 2024 •

edited

HellSquirrel commented Mar 27, 2024 •

edited