Download to read offline
![Асинхронность и параллелизм
onmessage = function(e) {
var messageId = e.data[0];
var messageBody = e.data[1];
var result = doSomething(messageBody);
postMessage([messageId, result]);
}](https://image.slidesharecdn.com/webworkers3-161109140041/85/Web-Workers-11-320.jpg)
![Асинхронность и параллелизм
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]);
})
}](https://image.slidesharecdn.com/webworkers3-161109140041/85/Web-Workers-12-320.jpg)
![Проблема: transferable взрывает мозг
var data = new ArrayBuffer(1024);
console.log(data);
// ArrayBuffer {byteLength: 1024}
postMessage(data, [data]);
console.log(data);
// null](https://image.slidesharecdn.com/webworkers3-161109140041/85/Web-Workers-21-320.jpg)
Алексей Фомкин, Практическое применение 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 a3 b 1 b 2 b 3
- 8. Параллелизм function foo(label) { computeAndPrint(label,1); computeAndPrint(label, 2); computeAndPrint(label, 3); }
- 9. Параллелизм // Worker 1code 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. Асинхронность и параллелизм functiondoInWorker(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