JavaScript на стороне браузера выполняется в однопоточном режиме, то есть JavaScript и рендеринг пользовательского интерфейса занимают один и тот же основной поток, а это означает, что если JavaScript выполняет обработку данных с высокой нагрузкой, рендеринг пользовательского интерфейса, скорее всего, будет заблокирован. зависнет, уменьшая пользовательский опыт.
С этой целью JavaScript предоставляет асинхронные операции, такие как события таймера (setTimeout, setInterval), запросы Ajax, обратные вызовы ввода-вывода и многое другое. Для высоконагруженных задач можно использовать асинхронную обработку, они будут ставиться в очередь событийных задач браузера (цикл событий), выполнять их по очереди.
Nodejs гордится асинхронной обработкой
Через аналогичный таймер функция обратного вызова достаточна в обычной операции, но если сделана комплексная операция, недостатки этого подхода постепенно отражены, такие как значение Settimeate неверно, или страница имеет сложные операции. Это Легко вызвать ложное состояние, а асинхронный код повлияет на выполнение кода основного потока, а асинхронный по-прежнему является единственным потоком, и оно не может быть принципиально решено.
Появилась многопоточность (Web Worker), она является частью стандарта HTML5, эта спецификация определяет набор API-интерфейсов, которые позволяют программе JavaScript работать в другом потоке, а не в основном потоке. Назначьте некоторые задачи последнему для запуска. Пока работает основной поток, рабочий (дочерний) поток работает в фоновом режиме, не мешая друг другу. Подождите, пока рабочий поток завершит задачу вычисления, а затем верните результат в основной поток. Преимущество этого в том, что некоторые ресурсоемкие задачи или задачи с высокой задержкой ложатся на рабочий поток, а основной поток (обычно отвечающий за взаимодействие с пользовательским интерфейсом) будет работать плавно и не будет блокироваться или замедляться.
1. Что такое веб-воркер
worker — это метод объекта окна, вы можете проверить, поддерживает ли ваш браузер worker следующими способами.
if (window.Worker) {…… your code ……}
Рабочий процесс — это объект, созданный с помощью конструктора ( Worker() ), который принимает файл JavaScript, содержащий код, который будет выполняться в рабочем потоке. Что-то вроде этого:
let myWorker = new Worker('worker.js');
Обработчики передают данные через метод postMessage() и событие onmessage. Основной поток и дочерние потоки являются двунаправленными, оба могут отправлять и прослушивать события. Для отправки сообщения рабочему требуется это (main.js):
myWorker.postMessage('hello, world'); // 发送
worker.onmessage = function (event) { // 接收
console.log('Received message ' + event.data);
doSomething();
}
Данные, передаваемые postMessage, копируются и передаются (кроме типа ArrayBuffer), а подпоток данных также передается аналогичным образом (worker.js).
addEventListener('message', function (e) {
postMessage('You said: ' + e.data);
}, false);
Когда дочерний поток завершит работу и будет использован, в целях экономии системных ресурсов вы можете вручную закрыть дочерний поток. Если рабочий процесс не прослушивает сообщения, он автоматически отключится после завершения выполнения всех задач (включая счетчик).
// 在主线程中关闭
worker.terminate();
// 在子线程里线程
close();
// 监听 error 事件
worker.addEventListener('error', function (e) {
console.log('ERROR', e);
});
Сам по себе веб-воркер прост, но чрезвычайно ограничен.
Во-вторых, использование проблемы
1. Гомологическая рестрикция
Файл сценария (worker.js), назначенный рабочему потоку для запуска, должен иметь то же происхождение, что и файл сценария (main.js) основного потока. Ограничения того же источника здесь включают протокол, доменное имя и порт, а локальные адреса (file://) не поддерживаются. Это вызовет проблему. Мы часто используем CDN для хранения файлов js. Доменное имя worker.js основного потока относится к домену, в котором находится файл html. URL, загружаемый через новый Worker (url), принадлежит домену CDN, что принесет Для междоменных проблем, в реальной разработке, мы не будем помещать весь код в файл для загрузки подпотоков, и мы обязательно выберем модульную разработку. Объедините код в файл с помощью инструмента или библиотеки, а затем создайте URL-адрес файла из кода дочернего потока.
Решение:
(1) Преобразуйте динамически сгенерированный скрипт в объект Blob.
(2) Затем создайте URL-адрес для объекта Blob.
(3) Наконец, передайте созданный URL-адрес в качестве адреса конструктору Worker.
let script = 'console.log("hello world!");'
let workerBlob = new Blob([script], { type: "text/javascript" });
let url = URL.createObjectURL(workerBlob);
let worker = new Worker(url);
2. Ограничения доступа
Глобальный объект, в котором находится рабочий поток, не находится в том же контексте, что и основной поток, поэтому он не может читать объект DOM веб-страницы, на которой находится основной поток, и не может использовать такие объекты, как документ, окно и Направление глобального объекта изменилось, и окно должно быть переписано как self, не может выполнять такие методы, как alert() и confirm(), и может только читать некоторые данные в объекте навигатора. Кроме того, можно использовать chrome console.log(), а также поддерживает точки останова отладчика, что повышает удобство отладки.
3. Используйте асинхронность
В рабочем потоке вы можете использовать объект XMLHttpRequest для отправки запросов AJAX, вы можете использовать метод setTimeout() setInterval() или использовать веб-сокет для непрерывного соединения. Также можно загружать дополнительные файлы скриптов через importScripts(url), но все же не междоменные.
3. Сценарии применения
1. Используйте выделенные потоки для математических операций
Первоначальная цель дизайна Web Worke состоит в том, чтобы выполнять вычислительные задачи, требующие больших затрат времени, и обработку больших данных, и эти вычисления не прерывают работу пользователя переднего плана при размещении в рабочем потоке и позволяют избежать ненужного взаимодействия с пользователем, вызванного застреванием кода. Например, обработка больших пакетов данных, возвращаемых ajax, чтение загруженных пользователем файлов, вычисление MD5, изменение фильтрации растровых изображений холста, анализ видео- и аудиофайлов и т. д. В дополнение к отсутствию возможностей работы с DOM и BOM, рабочие все еще имеют очень мощные возможности обработки логических операций js, которые эквивалентны уровню операционной среды nodejs.
2. Высокочастотное взаимодействие с пользователем
Высокочастотное взаимодействие с пользователем подходит для помощи пользователям в выполнении функций исправления ошибок ввода и исправления, основанных на привычках ввода пользователя, истории, кеше и др. Обработка ответов на частый ввод пользователя также может учитываться в веб-воркерах. Например, мы можем сделать приложение наподобие Word: когда пользователь печатает, фон ищет в словаре, помогая пользователю автоматически исправлять ошибки и так далее.
3. Предварительная выборка данных
Для некоторых интерфейсных и внутренних интерактивных продуктов с большим объемом данных можно открыть новый поток для предварительной выборки и буферизации данных, а запись и изменение строки локальной веб-базы данных будет выполняться в течение длительного времени и не будет выполняться. быть выполненным основным потоком.Также полезно отвечать на сообщение основного потока в любое время. Он также может взаимодействовать с XMLHttpRequest и веб-сокетом для бесперебойной связи для реализации процесса защиты.
4. Совместимость
В целом совместимость хорошая, мобильный терминал можно использовать с уверенностью, а настольный терминал также можно использовать, если требования не высоки.
V. Резюме
Что касается новой технологии веб-воркеров, то передняя группа Tencent News широко использовала ее как в ПК, так и в мобильной сети.Внедрение веб-воркеров привносит возможности внутренних вычислений в клиентские программы, которые могут реализовать основной поток пользовательского интерфейса и сложные вычислительные операции. Разделение потоков значительно уменьшает карту рендеринга интерфейса и пропуск кадров, вызванный блокировкой пользовательского интерфейса из-за большого объема вычислений, и позволяет более эффективно использовать производительность терминального оборудования. superWorker может решить проблему привязки событий и политики одного и того же источника. Его самая большая проблема в настоящее время заключается в том, что он не совместим с IE9. В местах, где требования совместимости не такие строгие, используйте его как можно больше!
Технологический еженедельник IVWEBШок в сети, обратите внимание на публичный номер: сообщество IVWEB, регулярно каждую неделю публикуйте качественные статьи.