Галерея диаграмм связей Веб-работник
Понимание и использование веб-воркеров. Веб-воркеры — это набор API, предоставляемых и стандартизированных HTML5. Он создает многопоточную среду выполнения для JavaScript.
Отредактировано в 2024-03-08 16:53:42Веб-работник
Рождение веб-работника
Как мы все знаем, js изначально был разработан для работы в браузере.
Чтобы предотвратить одновременную работу нескольких потоков с DOM и возникновение конфликтов рендеринга, исполнитель js спроектирован как однопоточный.
С развитием интерфейсных технологий при возникновении сценариев, требующих большого количества вычислений, потоки js часто блокируются на длительное время и даже вызывают зависания страниц, что влияет на удобство работы пользователя.
Узнайте о веб-работниках
Что такое веб-работник?
Веб-воркеры являются частью стандарта HTML5.
Определяет набор API, которые позволяют нам открыть новый рабочий поток вне основного потока js и запустить в нем js-скрипт.
Дает разработчикам возможность использовать JS для работы в многопоточном режиме.
Пользовательский интерфейс веб-приложения остается отзывчивым, даже если сценарий выполняется в течение длительного времени.
Преимущества веб-воркеров
Улучшите производительность страницы: выполняйте некоторые трудоемкие или трудоемкие операции в фоновом потоке, такие как обработка данных, обработка изображений и т. д., не занимая основной поток, тем самым избегая задержек или зависаний страницы и улучшая производительность и скорость отклика страницы. .
Обработка крупномасштабных данных. Крупномасштабные данные можно обрабатывать, поскольку они выполняются в отдельных потоках и не влияют на работу основного потока. Крупномасштабные данные можно обрабатывать более эффективно, повышая эффективность и масштабируемость кода.
Сделайте код более модульным: код можно разделить на несколько модулей и запускать в разных потоках, тем самым делая код более модульным, удобным в обслуживании и читабельным.
Поддержка многопоточности: поддержка многопоточности позволяет использовать преимущества многоядерных процессоров для повышения эффективности работы вашего кода.
Сценарии использования веб-воркера
Обработка изображений: например, поворот, обрезка, масштабирование, фильтры и т. д. Это повышает производительность обработки изображений и скорость реагирования.
Обработка данных: например, фильтрация, сортировка, суммирование и преобразование наборов данных и т. д. Это повышает эффективность и точность обработки данных.
Задачи с интенсивными вычислениями: такие как моделирование, оптимизация, прогнозирование, статистика и т. д. Это повышает скорость и точность выполнения вычислительных задач.
Общение в реальном времени: например, чаты, игры, видеоконференции и т. д. Это повышает стабильность и производительность связи в реальном времени.
Автономное кэширование: часто используемые ресурсы можно предварительно загрузить в локальный кэш клиента, а ресурсы в кэше можно использовать, когда доступ к Интернету недоступен. Это может улучшить удобство использования и скорость реагирования вашего приложения, особенно на мобильных устройствах.
Многопоточная обработка: например, параллельные вычисления, распределение задач, балансировка нагрузки и т. д. Это улучшает параллелизм и масштабируемость системы.
Использование веб-воркера
Создайте Worker: Просто вызовите конструктор Worker() через new, который получает два параметра: const worker = new Worker(path, options);
Передача данных основного потока и рабочего потока js: основной поток и рабочий поток отправляют сообщения через метод postMessage и прослушивают событие сообщения для получения сообщений.
Передача данных между основным потоком и рабочим потоком осуществляется по значению, а не по адресу. Следовательно, даже если объект передается и передается обратно напрямую, полученное значение не является исходным значением.
Прослушивание сообщений об ошибках: веб-работник предоставляет два события для прослушивания ошибок.
ошибка: срабатывает, когда возникает ошибка внутри работника
messageerror: срабатывает, когда событие сообщения получает параметры, которые не могут быть десериализованы.
Закройте рабочий поток. Остановка рабочего потока может осуществляться как в основном потоке, так и в рабочем потоке, но влияние на рабочий поток немного различается.
Сходство: независимо от того, завершается ли рабочий процесс в основном потоке или рабочий процесс завершается внутри рабочего потока, задачи в текущем цикле событий рабочего потока будут продолжать выполняться.
Разница: когда рабочий поток закрывается вручную в основном потоке, соединение между основным потоком и рабочим потоком будет немедленно остановлено. Даже если в текущем цикле событий рабочего потока еще есть задачи, postMessage. () будет продолжать вызываться, но основной поток больше не будет получать сообщение. Закрытие работника внутри рабочего потока не приведет к его непосредственному отключению от основного потока. Вместо этого он будет ждать, пока все задачи текущего цикла событий рабочего потока не будут завершены, прежде чем закрыть его. Другими словами, если вы продолжите вызывать метод postMessage() в текущем цикле событий, основной поток все равно сможет получать сообщения, прослушивая событие сообщения.
Рабочий поток ссылается на другие файлы js
Веб-воркер предоставляет метод importScripts() в рабочем потоке для загрузки нужных нам js-файлов. Более того, на js-файлы, загруженные с помощью этого метода, не распространяется та же политика происхождения.
Режим ESModule: когда файл js находится в режиме ESModule, importScripts() не сможет импортировать файл. В этом случае вам нужно использовать const worker = new Worker('/worker.js', {type: 'module'}. ), чтобы указать тип файла, а затем вы можете Введено с помощью метода импорта
Какие типы данных могут передаваться между основным потоком и рабочими потоками
Объекты ошибок и функций, а также узлы Dom не могут быть переданы.
Общий рабочий
Это особый тип Worker, к которому могут получить доступ несколько контекстов просмотра, например несколько окон, iframe и Worker, но эти контексты просмотра должны иметь одно и то же происхождение.
Реализован в интерфейсе, отличном от обычных рабочих процессов, с другой глобальной областью действия: SharedWorkerGlobalScope, но унаследован от WorkerGlobalScope.
Разница с рабочими процессами: основной поток и поток SharedWorker устанавливают связь через MessagePort, и все методы передачи данных монтируются в SharedWorker.port. Если addEventListener используется для получения событий сообщений, то после того, как основной поток инициализирует SharedWorker(), он используется. необходимо вызвать метод SharedWorker.port.start(), чтобы вручную открыть порт, но если используется метод onmessage, порт открывается по умолчанию, и нет необходимости вручную вызывать метод SharedWorker.port.start().
Примечание. Использование консоли для печати информации в потокеsharedWorker не будет отображаться в консоли основного потока.
Для отладки SharedWorker вам необходимо ввести chrome://inspect/ в браузере Chrome. Здесь вы можете увидеть все запущенные файлы ShareWorker, а затем открыть независимую панель инструментов разработчика.
совместимость
Веб-воркеры уже поддерживаются большинством браузеров, и при их использовании практически нет необходимости учитывать проблемы совместимости.
Совместимость SharedWorker в Safari и мобильных терминалах не очень хорошая, поэтому при его использовании нужно быть внимательным.