параллелизм:
Одиночный объект выполнение нескольких задач (пример: жонглер)
Мы уже говорили об этой системе в предыдущей главе: очередь задач и очередь микротаксики, которые выполняются одним потоком (взаимозаменяемым), основным потоком.
Как асинхронный, так и код синхронизации в JS выполняется одним потоком, который жонглирует им обоим на основе состояния цикла событий.
Пример параллелизма
// doing multiple tasks in a period of time
task a task b task c
concurrency:
task a
task c
task a
task b
task a
task c - complete
task b
task a
task b
task a - complete
task b - complete
final result
Одна нить жонглирует несколькими задачами, давая иллюзию, что они происходят одновременно.
параллелизм
несколько объектов, работающих одновременно, на одном или нескольких задачах
task a task b task c task a task b task c task a task b complete task a complete complete task a complete complete complete complete complete final result
Множественные независимые объекты, работающие независимо друг от друга (не чередовано), это обычно достигается с помощью нескольких потоков и ядер, такие языки, как Java, встроены в эту функцию.
Параллелизм в браузерах
Браузеры принципиально однообожны, имея только основную потоку, обрабатывающую как выполнение кода JavaScript, так и рендеринг окна браузера, асинхровое программирование облегчает основной поток, приостановив выполнение конкретного кода, но в конце концов, даже этот код будет выполняться в основном Поток, само собой разумеется, основной поток работает довольно усердно, что на самом деле является источником сообщения «Сценарий замедляет ваш браузер», когда скрипт требует долго, чтобы завершить задачу и блокирует основной поток, а асинхронность – это Решение, еще лучшим решением является создание новой ветки, и именно здесь появляются веб -работники.
веб -работники
Веб-работник создает/порождает второй поток JS, отдельный от браузера переднего конца, поток не имеет доступа к DOM, окну и чем угодно в браузере переднего интерфейса, данного основным потоком, все IS, JS, JS, JS, JS, JS, Это истинная параллелизм: идея двух отдельных потоков не неспособности получить доступ к DOM, эти потоки работают одновременно, не блокируя друг друга.
Они общаются через систему сообщений, они могут отправлять сообщения каждому, что могут быть строками, объектами или простыми значениями.
Таким образом, мы можем перенести тяжелые вычисления из основного потока до 2 -го и позволить основному выполнять свою основную обязанность обрабатывать вход и беспрепятственно реагировать.
Это настоящий изменит игру, вы можете буквально выполнять тяжелые задачи в работнике, без того, чтобы браузер не пропустил кадр, это окончательная оптимизация.
Начало работы с работниками
Поскольку работники работают в браузере, нам нужен HTML -файл для этой части,
Создайте три файла:
index.html main.js worker.js
Я буду использовать плагин Vscode Live Server для обслуживания index.html, вы можете использовать все, что вам нравится, или даже такую посылку, которая поддерживает импорт и перезагрузку в прямом эфире.
Цель: Создайте вторую ветку, запускающую бесконечную петлю, в то время как главная тема браузера играет анимацию со скоростью 60 кадров в секунду.
Document
в main.js:
// main thread
/**
* @type {HTMLLabelElement}
*/
const label = document.getElementById("label")
const skills = ["react", "vue", "angular", "ionic", "nativescript", "html", "css", "sass"]
// simple DOM update
setInterval(() => {
// choosing a random skill every 16ms and updating the label element to show that skill
let rand = Math.floor(Math.random() * skills.length - 1);
label.innerText = skills[rand]
}, 16);
Я знаю, что это не так много, учитывая, что установленный интервал – это микрозамария, но если мы добавим бесконечный цикл в основной файл, одна из двух вещей произойдет, ваш браузер разорвет или не обновляет пользовательский интерфейс, так как основной поток Застрял в этом бесконечном цикле из-за правила заполнения до завершения, вы можете проверить его, добавив бесконечный цикл в main.js
while(true){
}
Это прекрасно подходит для того, чтобы доказать, что работник порождает новый поток, отдельный от окна браузера и документа, если мы сможем запустить бесконечный цикл, регистрируя что -то в потоке работника, при этом успешно обновляя браузер каждые 16 мс. В
Снимите бесконечный петлю в основном и добавьте следующее сверху
// creates a worker thread(spawning a new thread)
// Worker() takes name of an existing js file, which the worker will load in it's own environment
// separate from the the main js and it's thread
// every code in worker.js will run in the second thread
const worker = new Worker("worker.js")
// we use the worker object to communicate and receive communcication from the second thread
// sending a msg to the second thread
// the msg can be an object, stringified JSON object, buffer arrays etc
// but you cannot send DOM elements, classes etc
worker.postMessage("hello there")
Open Worker.js
//worker.js thread
//catching/receiving messages
// self = refers to the worker,
// listening to messages
self.onmessage = e => {
// logging the recieved message
console.log(e.data)
// sending back a message to the main thread after 10 seconds
setTimeout(()=> {
// sending a message to main thread
postMessage("after 10 000 milliseconds")
}, 10000)
}
В main.js мы также можем прослушать сообщения из потока второго/рабочего, используя рабочую объект
worker.onmessage = e => {
console.log(e.data, "from second thread")
}
Если вы перезагружаете, в консоли вы увидите журнал Worker.js «Привет», а через 10000 мс основной поток получит сообщение от работника и регистрирует его
Эксперимент по бесконечному петлю
в работнике
self.onmessage = e => {
...
}
let index = 0;
// infinite loop
while(true){
// logging at an interval, logging at every iteration will crash the browser
if(index % 10000000000){
console.log("while loop")
}
index += 0.00000000000000000000000000000001;
}
Магия, браузер не пропускает немного, в то время как бесконечный цикл работает, если вы некоторое время использовали JS, вы поймете, насколько это значит, просто иметь какое -то время (правдивое) заявление в JavaScript очень впечатляет.
Браузер может потерпеть крах из -за частых журналов консоли, убедитесь, что вы очистите консоль во время работы.
Используя эту простую архитектуру, есть много возможностей: работа на больших файлах, большие объемы данных и алгоритмы, только отправляя результат вычислений в основной поток.
С точки зрения доступа к DOM, существуют библиотеки, для одного работника, который позволяет манипулировать DOM в работнике, Workerdom также хорошо работает с основными фронтовыми фреймворками.
С этим мы достигли истинного параллелизма в JavaScript.
Это отрыв из электронной книги JavaScript для продвинутых начинающих Доступно на Gumroad в качестве предварительного заказа, и должен скоро запустить,
Основная цель электронных книг состоит в том, чтобы обеспечить мягкий, но необходимый толчок к продвинутому JS, диапазон темам охватывается из объектно -ориентированного JS, композиции объекта для генераторов, обещаний, вычислительных сред и метапрограммирования
Оригинал: “https://dev.to/sfundomhlungu/parallelism-in-javascript-build-super-programs-5a9k”