Загрузка...

HTML Web Workers

Ранее Drag and Drop перемещал или помечал DOM-нагрузки событиями указателя. Этот урок уходит от жестов указателя и знакомит с Web Workers: JavaScript в фоновом потоке, чтобы длинный цикл не замораживал UI. Практика — создать, обменяться сообщениями, без DOM в worker — не флоты SharedWorker.

Зачем web workers в курсе HTML

Новички видят замороженную страницу при busy loop на главном потоке. Workers — первая обычная API для фоновых вычислений. После DnD разделение иное: скрипт страницы владеет DOM/UI; worker владеет тяжёлым расчётом и говорит только сообщениями.

Прямой ответ

1) new Worker("worker.js") или Blob. 2) postMessage со страницы. 3) В worker onmessage, считать, postMessage обратно. 4) Обновляйте DOM только на странице. 5) Нет прямого доступа к DOM. 6) Предпочитайте http(s) или Blob.

📊 main thread vs worker

Topic Main page script Dedicated worker
Typical role UI, DOM, create Worker Heavy compute off UI thread
Talks via postMessage / onmessage postMessage / onmessage
Can touch DOM? Yes No — return data instead
Beginner entry new Worker(url or Blob) onmessage + compute + postMessage
This course depth Required Required (simple round-trip)
Not this lesson Drag-and-drop gestures SharedWorker / Service Worker products

Крошечный round-trip Blob Worker

Один HTML строит worker из Blob без отдельного worker.js. Страница шлёт число; worker возвращает сумму цикла.

Blob Worker compute round-trip

html 
<button id="go" type="button">Run in worker</button>
<pre id="out"></pre>
<script>
const out = document.getElementById("out");
const src =
"onmessage=function(e){" +
"var n=e.data,s=0,i;" +
"for(i=1;i<=n;i++){s+=i;}" +
"postMessage(s);" +
"};";
const blob = new Blob([src], { type: "application/javascript" });
const w = new Worker(URL.createObjectURL(blob));
w.onmessage = function (e) {
out.textContent = "Sum 1..40 = " + e.data;
};
document.getElementById("go").onclick = function () {
out.textContent = "Working…";
w.postMessage(40);
};
</script>

Читаем вызовы round-trip

  • Blob + createObjectURL без второго файла
  • new Worker запускает фоновый скрипт
  • postMessage шлёт число
  • Worker считает и отвечает
  • Страница пишет в pre — DOM на главном потоке
  • В отличие от DnD: нет draggable
  • Держите демо маленьким

UI остаётся на главном потоке

Worker возвращает данные; скрипт страницы решает, что видит пользователь. Это демо просит строку; onmessage страницы обновляет абзац.

Worker replies; page updates DOM

html 
<button id="ask" type="button">Ask worker</button>
<p id="msg">Waiting…</p>
<script>
const msg = document.getElementById("msg");
const src =
"onmessage=function(e){" +
"postMessage('Worker got: ' + e.data);" +
"};";
const w = new Worker(
URL.createObjectURL(new Blob([src], { type: "application/javascript" }))
);
w.onmessage = function (e) {
msg.textContent = e.data;
};
document.getElementById("ask").onclick = function () {
w.postMessage("hello");
};
</script>

Читаем идею владения UI

  • Worker только эхо строки — без document
  • Страница задаёт textContent
  • Тот же мост сообщений
  • Не DnD
  • Не курс Service Worker
  • Используйте worker когда работа рискует заморозить UI
  • Дальше: SSE

Когда использовать worker

  • Длинный CPU-цикл: хороший intro
  • Крошечная правка строки: часто главный поток
  • Карточка в зону: был DnD
  • GPS: был Geolocation
  • Продукты SharedWorker/Service Worker: за пределами интро
  • Обновлять кнопки из worker: нельзя

Практика — создайте, пошлите сообщение, отрисуйте

  1. Проверьте демо суммы.
  2. Измените 40.
  3. Проверьте демо эха.
  4. Опционально: worker.js по http(s).
  5. Предложение: DnD указателем; workers off-thread сообщениями.
  6. Предпочитайте http(s)/Blob.
  7. Впереди: SSE.

Лёгкие ошибки

  • Ждать querySelector внутри worker
  • Worker для крошечных задач
  • Путать с DnD
  • Хрупкие пути file://
  • Забыть onmessage на странице
  • Считать Blob единственным prod-паттерном
  • Считать интро полным курсом SharedWorker

Итог

  • Workers выполняют JS вне UI-потока
  • postMessage/onmessage; DOM только на странице
  • Классические workers без document/window
  • Blob для демо; http(s) для worker.js
  • DnD был перенос/метка указателем; этот урок — фоновый расчёт + сообщения
  • Далее: SSE

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
5
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 66 из 68
Html Урок