Документ представляет обзор web workers, их функционала и применения, таких как параллельное выполнение кода и обработка сообщений. Рассматриваются ограничения web workers, включая отсутствие доступа к DOM и LocalStorage, а также проблемы с сериализацией и дублированием кода. Также упоминаются практические примеры использования web workers для шифрования и конвертации файлов.

1. Практическое применение
Web Workers
Алексей Фомкин
Data Monsters

3. Обзор Web Workers
● Позволяют выполнять код параллельно с
основным потоком выполнения
● Не разделяют память
● Не разделяют код
● Обмениваются сообщениями
● Доступны для 92% пользователей*
* http://caniuse.com/#search=webworkers на ноябрь 2016

4. Обзор Web Workers
● Нельзя манипулировать DOM
● Не доступен localStorage
● Не доступен window.location
Полный список того, что доступно, можно прочитать здесь
https://goo.gl/ogcuiX

5. Обзор Web Workers
● Сообщения сериализуются
● Можно передать владение ArrayBuffer и
ImageBitmap

6. Асинхронность
function foo(label) {
setTimeout(function() {
computeAndPrint(label, 1);
computeAndPrint(label, 2);
computeAndPrint(label, 3);
}, 0);
}

7. Асинхронность
foo('a');
foo('b');
Вывод
a 1
a 2
a 3
b 1
b 2
b 3

8. Параллелизм
function foo(label) {
computeAndPrint(label, 1);
computeAndPrint(label, 2);
computeAndPrint(label, 3);
}

9. Параллелизм
// Worker 1 code
foo('a');
// Worker 2 code
foo('b');
Вывод
a 1
b 1
a 2
b 2
b 3
a 3

10. Асинхронность и параллелизм
● Сообщения отправляются асинхронно
● Код выполняется параллельно

11. Асинхронность и параллелизм
onmessage = function(e) {
var messageId = e.data[0];
var messageBody = e.data[1];
var result = doSomething(messageBody);
postMessage([messageId, result]);
}

12. Асинхронность и параллелизм
function doInWorker(data) {
return new Promise(function(resolve, reject) {
var messageId = ++lastMessageId;
var onMessage = function(e) {
if (e.data[0] === messageId) {
resolve(e.data[1]);
worker.removeEventListener('message', onMessage);
}
};
worker.addEventListener('message', onMessage);
worker.postMessage([messageId, data]);
})
}

13. Применение: шифрование
● Храним приватные данные в localStorage
● Шифрование ресурсоемко
● Использовали
https://github.com/vibornoff/asmcrypto.js/

14. Применение: конвертация файлов
● Мобильное приложение (PhoneGap)
● Храним большие документы
● Работаем в оффлайне
● Конвертация занимает много времени
● Спасение в живительных воркерах

15. Применение: переносим в воркер вообще все
● Вся логика выполняется в воркере
● В основном потоке остается работа с DOM и
localStorage
● Страница никогда не подвисает

16. Применение: переносим в воркер вообще все
WebWorker
Transition
Render
State
Commands
DOM thread
Apply changes to
DOM
Listen events on
document.body
EventsServer push

17. Применение: переносим в воркер вообще все
Мои наработки по теме (Scala.js)
● https://github.com/tenderowls/moorka
● https://github.com/fomkin/korolev
● https://medium.com/@yelbota/-18195d44f574

18. Проблема: дублирование кода
● Своя “система модулей” importScript
● Ничего не знают про код, загруженный
через <script>
● Боль и страдание

19. Проблема: воркеры не бесплатны
● Воркер ― отдельный инстанс
виртуальной машины (в первом
приближении)
● Затраты на переключение контекста
● Затраты на запуск
Не создавайте тысячи воркеров.
Это вам не эрланг.

20. Проблема: сериализация
● Передавая сообщение, мы сначала
пишем его JSON, потом читаем (в
первом приближении)
● ArrayBuffer копируется, если мы не
указали, что он transferable.
Убедитесь, что вычисление
действительно тяжелое

21. Проблема: transferable взрывает мозг
var data = new ArrayBuffer(1024);
console.log(data);
// ArrayBuffer {byteLength: 1024}
postMessage(data, [data]);
console.log(data);
// null

23. Проблема: отсутствие тормозов
● Пользователь привык, что все
тормозит
● Программист привык, что страница
блокируется

25. Проблема: отсутствие тормозов
● Пользователь привык, что все
тормозит
● Программист привык, что страница
блокируется
Уведомите пользователя, что работа идет!

26. Вопросы?
Алексей Фомкин
Data Monsters
Телефон: +7 999 981 60 51
Почта: aleksey.fomkin@gmail.com
Twitter: @yelbota
GitHub: @fomkin
Telegram: @fomkin