Интенсивное чтение «Разговоры о веб-воркерах»

внешний интерфейс JavaScript Webpack Safari

1. Введение

Статьи, которые я прочитал на этой неделе,speedy-introduction-to-web-workers, это статья для быстрого старта для Web Workers, воспользуйтесь возможностью внимательно прочитать эту статью, чтобы поговорить о понимании и применении Web Workers.

2 Обзор

Как и при разделении труда, вы отвечаете только за кодирование, а ваши друзья отвечают за дизайн, поэтому вы можете сосредоточиться на своих вещах и быстрее выполнять задачи.

В этой статье по аналогии описываются две основные характеристики веб-воркеров:

  1. Эффективный.
  2. параллельно.

Поскольку браузер является однопоточным, любая тяжелая и трудоемкая задача JS заморозит интерфейс и сделает браузер невосприимчивым к любым действиям, что очень плохо для пользователя. Web Workers могут разбирать трудоемкие задачи, снижать нагрузку на основной поток и предотвращать его зависание.

Однако ресурсы ЦП ограничены, и веб-воркеры не могут повысить общую эффективность работы, включая потерю связи, общая вычислительная эффективность в определенной степени снизится.

Создание веб-воркеров

const worker = new Worker("../src/worker.js");

В приведенном выше кодеworkerявляется экземпляром Web Workers, выполняемый код../src/worker.jsфайл в пути.

отправлять и получать сообщения

Веб-воркеры используются для выполнения асинхронных сценариев.Пока вы освоите способ взаимодействия с основным потоком, вы можете запустить асинхронный сценарий в указанное время и передать результат основному потоку, когда он завершит работу.

Основной поток получает и отправляет сообщения веб-воркеров.

const worker = new Worker("../src/worker.js");

worker.onmessage = e => {};

worker.postMessage("Marco!");

каждыйworkerэкземпляр переданonmessageполучать сообщения черезpostMessageотправлять сообщения.

Web Workers отправляют и получают сообщения основного потока

self.onmessage = e => {};

self.postMessage("Marco!");

Как и в коде основного потока, в коде Web Workers такжеonmessageПолучать сообщения от основного потока или других Workers. также черезpostMessageотправлять сообщения.

Уничтожить веб-воркеров

worker.terminate();

Содержание статьи так много, что это слишком просто написать! Автор добавляет некоторые знания, основанные на собственном опыте.

3 Интенсивное чтение

Переносимые объекты

Передача объектов — это бесплатная передача ссылок на объекты в контекст Web Workers без необходимости копирования структуры.

Что здесь следует объяснить, так это то,Связь между основным потоком и веб-воркерами — это не передача ссылок на объекты, а процесс сериализации/десериализации., когда объект очень большой, сериализация и десериализация потребляют много вычислительных ресурсов и снижают скорость работы.

Приведенный выше рисунок полностью доказывает, что перенос больших объектов и использование переноса объектов лучше, чем копирование структуры.

Передача объектов очень проста в использовании, даваяpostMessageДобавьте параметр и передайте ссылку на объект в прошлое:

var ab = new ArrayBuffer(1);
worker.postMessage(ab, [ab]);

Совместимость с браузерами также хорошая: в настоящее время Chrome 17+, Firefox, Opera, Safari, IE10+. Подробнее см.Transferable Objects: Lightning Fast!.

Следует отметить, что после передачи ссылки на объект исходный контекст не может получить доступ к объекту, и основной поток может получить доступ к переданному объекту в обычном режиме после того, как веб-воркеры снова восстановят объект в контексте основного потока.

Как создать Web Workers без файлов JS

Веб-воркеры имеют такие большие преимущества, но их неудобно использовать для создания JS-файла в одном домене, особенно в командах, которые полностью разделяют фронтенд и бэкенд, а фронтенд-команда может контролировать только один JS. файл. Тогда вот несколько способов создания веб-воркеров без файлов JS:

Плагин webpack - рабочий-загрузчик

worker-loaderЭто плагин для веб-пакетов, который может извлекать все зависимости из общего JS-файла, упаковывать его, заменять сайт вызова и встраивать его в исходный код в виде BLOB-объекта.

import Worker from "worker-loader!./file.worker.js";

const worker = new Worker();

Магия приведенного выше кода заключается в том, что он преобразуется в следующий способ выполнения:

const blob = new Blob([codeFromFileWorker], { type: "application/javascript" });
const worker = new Worker(URL.createObjectURL(blob));

Blob URL

Второй способ естественным образом выводится из первого: если вы не хотите использовать плагин webpack, вы также можете создать его самостоятельно через Blob:

const code = `
  importScripts('https://xxx.com/xxx.js');
  self.onmessage = e => {};
`;

const blob = new Blob([code], { type: "application/javascript" });
const worker = new Worker(URL.createObjectURL(blob));

Вроде код полегче, но проблема в том, что при встрече сложных зависимостей, если зависимости нельзя конвертировать в скрипты черезimportScriptsметод, вы не можете получить доступ к пакету в среде основного потока. Если вы действительно столкнулись с этой проблемой, вы можете использовать для ее решения первый плагин webpack, который автоматически упакует все зависимости файла в исходный код.

Управление очередями postMessage

Почему postMessage формирует очередь и зачем ею управлять?

Прежде всего, проект архитектуры веб-воркеров должен быть превращен в очередь, потому что вызовpostMessageКогда соответствующие веб-воркеры не инициализированы, нижний уровень браузера должен управлять очередью.postMessageмогут быть получены Web Workers.

Во-вторых, причина, по которой эта очередь ведется вручную, может зависеть от следующих моментов:

  • деловые причины, фронтpostMessageНе отправляйте новые сообщения и не отбрасывайте новые сообщения, прежде чем вы сможете их использовать.В настоящее время вам необходимо получить квитанцию ​​о результате выполнения веб-воркеров через двустороннюю связь и вручную управлять очередью.
  • Из соображений производительности веб-воркеры обычно используются для выполнения трудоемких синхронных операций.Если время операции относительно велико, бессмысленно вставлять несколько очередей сообщений за короткий промежуток времени.

Как показано на рисунке выше, выполнение синтаксического анализа SQL для каждого пользовательского ввода занимает много времени, и своевременное размещение его в веб-воркерах также может привести к тому, что рабочие потоки перестанут отвечать на запросы.Это касается не только использования нескольких буферных пулов рабочих процессов. , но и ждать выполнения.Очередь фильтруется, потому что пользователя интересует только последний результат ввода парсера.

Поскольку работа веб-воркеров зависла, нет другого пути, кроме как уничтожить рабочего, а стоимость уничтожения рабочего процесса относительно высока, и невозможно уничтожить и создать новый веб-воркер для каждого пользовательского ввода, поэтому использование Буферный пул рабочих процессов, когда пул буферов заполнен, когда снова появляется новая очередь потребления, все буферные пулы рабочих процессов могут быть уничтожены, а новая партия пулов буферов может использоваться для повторного использования пользовательского ввода.

4 Резюме

Веб-работники являются хорошим помощником для демонтажа асинхронных вычислений. Веб-версия VSCode также завершает коду, подсказку и выделяя асинхронно через веб-работников. Автор сравнил их и обнаружил, что повышение производительности веб-работников очень очевидно.

Управляйте своей очередью сообщений Web Workers, остерегайтесь синхронных вычислений, чтобы Web Workers потеряли ответ! Создайте интеллектуальную очередь сообщений, разработайте лучшую модель использования очередей на основе потребностей бизнеса!

еще 5 обсуждений

Адрес обсуждения:Интенсивное чтение «Разговоры о веб-воркерах» · Выпуск №108 · dt-fe/weekly

Если вы хотите принять участие в обсуждении, пожалуйста,кликните сюда, с новыми темами каждую неделю, выходящими по выходным или понедельникам. Интерфейс интенсивного чтения — поможет вам отфильтровать надежный контент.

Категории