Внешний интерфейс, чтобы узнать о webWorker

Что такое webWorker [Краткий обзор webWorker]

Мы все знаем, что JavaScript является однопоточным и может обрабатывать только одну задачу за раз.Мы будем имитировать «параллелизм» с помощью таких методов, как setTimeout(), setInterval(), ajax и обработчики событий. Но и это не настоящий параллелизм:

Веб-воркеры являются частью стандарта HTML5, который определяет набор API-интерфейсов, позволяющих программе JavaScript выполняться в потоке, отличном от основного потока.

При этом используется постоянно растущая вычислительная мощность сегодняшнего дня: возможность обрабатывать две задачи параллельно в одно и то же время.

Узнайте о плавании и фитнесе:блог,Документы внешнего накопления,Нет публики,GitHub

Сцены

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

Роль WebWorker: создавать рабочие потоки

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

Таким образом, JS становится многопоточной средой, мы можем распределять трудоемкие операции с высокой задержкой на рабочие потоки и, наконец, возвращать результаты в основной поток, потому что задачи, которые занимают много времени, обрабатываются веб-воркерами. Берите, основная нить будет очень ровной!

основной поток

Давайте сначала посмотрим на каштаны:

codepenЗдесь я написал класс с подробными комментариями, вы можете ссылаться на него.

Создайте рабочий объект:

вызов основного потокаnew Worker()Конструктор, создайте новый рабочий поток, параметром конструктора является URL-адрес, существует два способа создания этого URL-адреса:

файл сценария:
```
const worker = new Worker('https://~.js');
```
Из-за двух ограничений рабочих:
1. Файл сценария, назначенный рабочему потоку для запуска, должен иметь то же происхождение, что и файл сценария основного потока..
2. Рабочий не может читать локальные файлы(Не удается открыть локальную файловую системуfile://), загружаемый сценарий должен быть получен из сети.
Видно, что ограничений еще много.Если вы хотите использовать эту форму, рекомендуется помещать файлы в статическую папку в проекте, и копировать их непосредственно при упаковке, чтобы мы могли получить фиксированную ссылку.
Строковая форма:
```
const data = `
    //  worker线程 do something
    `;
// 转成二进制对象
const blob = new Blob([data]);
// 生成url
const url = window.URL.createObjectURL(blob);
// 加载url
const worker = new Worker(url);
```
каштанЭта форма используется в таком виде, который нам удобно продемонстрировать.

В проекте: Мы можем написать логику рабочего потока в файле js, затем преобразовать его в строку, а затем экспортировать, импортировать и взаимодействовать с веб-пакетом для модульного управления, чтобы его было легко использовать.

Другие API для основного потока:

1. Основной поток взаимодействует с рабочим потоком:

worker.postMessage({
  hello: ['hello', 'world']
});

OниСвязь между собой может передавать объекты и массивы, чтобы мы могли выполнять некоторые операции на основе информации, передаваемой друг другу, например, устанавливатьtypeсвойство, когда значениеhelloкакую функцию выполнять, когда значение равноworldкакую функцию выполнять, когда.

Стоит отметить, что связь между ними заключается в передаче данных в виде копии, а передаваемые объекты необходимо сериализовать, а затем десериализовать на другом конце. Это означает:

Мы не можем передавать данные, которые не могут быть сериализованы, такие как функции, вызовет ошибку.
Измените данные на одном конце, другой конец не пострадает, потому что нет ссылки на данные, они копируются.

2. Отслеживайте информацию, возвращаемую рабочим потоком.

worker.onmessage = function (e) {
    console.log('父进程接收的数据：', e.data);
    // doSomething();
}

3. Основной поток закрывает рабочий поток

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

Это также вычислительные ресурсы, которые Worker потребляет больше ресурсов компьютера (CPU), рабочий поток должен быть закрыт, как только он будет израсходован.

worker.terminate(); // 主线程关闭worker线程

4. Прислушивайтесь к ошибкам

// worker线程报错
worker.onerror = e => {
    // e.filename - 发生错误的脚本文件名；e.lineno - 出现错误的行号；以及 e.message - 可读性良好的错误消息
    console.log('onerror', e);
};

Также, как я далкаштанТаким же образом запишите два отчета об ошибках вместе, и если есть отчет об ошибке, просто передайте информацию.

Рабочий поток

self представляет собой рабочий процесс

Контекст выполнения рабочего потока — это контекст, называемыйWorkerGlobalScopeЭто не то же самое, что контекст основного потока (окно).

мы можем использоватьself/WorkerGlobalScopeдля доступа к глобальному объекту.

Прослушайте информацию, отправленную основным потоком:

self.onmessage = e => {
    console.log('主线程传来的信息：', e.data);
    // do something
};

отправить сообщение в основную ветку

self.postMessage({
    hello: [ '这条信息', '来自worker线程' ]
});

Рабочий поток закрывается

self.close()

Рабочий поток загружает скрипт:

Рабочие потоки могут обращаться к глобальной функции imprtScripts() для импорта скриптов, которая принимает ноль или более URI в качестве параметров.

importScripts('http~.js','http~2.js');

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

Ограничение рабочего потока

Поскольку worker создает другой поток, не в основном потоке, соответственно будут некоторые ограничения, мы не можем использовать следующие объекты:

оконный объект
объект документа
DOM-объект
родительский объект

Мы можем использовать следующие объекты/функции:

Браузер: объект навигатора
URL: объект местоположения, только для чтения
Отправить запрос: объект XMLHttpRequest
Таймеры: setTimeout/setInterval, опрос в рабочих потоках тоже отлично!
Кэш приложения: кэш приложения

Несколько рабочих потоков

В основном потоке может быть создано несколько рабочих потоков.

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

Если вы создаете новый рабочий поток в рабочем потоке, вы не можете его использоватьwindow.URL.createObjectURL(blob), вам нужно использовать файл сценария того же происхождения, чтобы создать новый рабочий поток, потому что у нас нет доступа кwindowобъект.

Это не удобно демонстрировать здесь.Это рутина для создания рабочего потока в основном потоке, но она изменена на файл сценария для создания рабочего потока.

Передача бинарных данных между потоками

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

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

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

Каштаны ниже взяты изГоворя о веб-воркере HTML5

// 创建二进制数据
var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
for (var i = 0; i < uInt8Array .length; ++i) {
    uInt8Array[i] = i;
}
console.log(uInt8Array.length); // 传递前长度:33554432
// 字符串形式创建worker线程
var myTask = `
    onmessage = function (e) {
        var data = e.data;
        console.log('worker:', data);
    };
`;

var blob = new Blob([myTask]);
var myWorker = new Worker(window.URL.createObjectURL(blob));

// 使用这个格式(a,[a]) 来转移二进制数据
myWorker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]); // 发送数据、转移数据

console.log(uInt8Array.length); // 传递后长度:0，原先线程内没有这个数据了

К двоичным данным относятся: File, Blob, ArrayBuffer и т. д. Их также разрешено отправлять между рабочими потоками.Это очень удобно для обработки изображений, обработки звука, 3D-операций и т. д. без какой-либо нагрузки на производительность.

Сценарии применения:

вычисление
Обработка изображений, видео и других файлов
Массовое извлечение данных

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

совместимый:

Я не нашел конкретной даты. Один блог был написан в июле 2010 года, а это означает, что веб-воркеры существуют не менее восьми лет. Следующие выдержки взяты изMDN:

Chrome: 4, Firefox: 3,5, IE: 10,0, Opera: 10,6, Safari: 4

Теперь совместимся или сделать лучше, если вы действительно не доверяете этому:

if (window.Worker) {
    ...
}else{
    ...
}

Заключение:

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

Его не сложно использовать.Если в будущем возникнут сложные проблемы, не забудьте перевести их на задний план (веб-воркер) нашего браузера, чтобы справиться с ними.

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

PS: порекомендуйте то, что я написал в прошлом месяцеНаучить вас, как использовать WebSocket, можете посмотреть, если интересно.

Я надеюсь, что друзья, которые прочитали это, могут нажать «Нравится» / «Подписаться», ваша поддержка — самая большая поддержка для меня.

блог,Документы внешнего накопления,Нет публики,GitHub

Выше 2018.11.25

Использованная литература:

MDN

Учебник по веб-воркеру

Говоря о веб-воркере HTML5