Когда дело доходит до HTML5, люди всегда говорят об этом. Существует так много новых функций и интересных API. Однако многие детские туфли все еще остаются на семантической стадии и игнорируют возможности HTML5.
В этом разделе мы обсудим многопоточный Web-Worker.
1. Дайте понять, что JavaScript является однопоточным.Основная особенность языка JavaScript заключается в том, что он является однопоточным, а это означает, что он может выполнять только одно действие одновременно.
Звучит странно, почему бы не спроектировать многопоточность для повышения эффективности? Мы можем предположить сценарий:
Предположим, что у JavaScript одновременно есть два потока. Один поток добавляет контент в определенный узел DOM , а другой поток удаляет этот узел. В этом случае какой поток должен использовать браузер?
Основная цель JavaScript как языка сценариев браузера — взаимодействие с пользователями и манипулирование DOM .
Это определяет, что он может быть только однопоточным, иначе это вызовет очень сложные проблемы с синхронизацией. Чтобы избежать сложности, JavaScript с момента своего рождения был однопоточным. Это стало основной особенностью языка, и ожидается, что ее будет трудно изменить в краткосрочной перспективе.
Однопоточность всегда была болевой точкой. Чтобы воспользоваться преимуществами вычислительной мощности многоядерных CPU , HTML5 предлагает стандарт Web Worker , который позволяет сценариям JavaScript создавать несколько потоков. Однако дочерний поток полностью контролируется основным потоком и не должен управлять DOM .
Таким образом, этот новый стандарт не меняет однопоточную природу JavaScript .
Web Workers — это многопоточное решение JavaScript предоставляемое современными браузерами. Мы можем найти множество сценариев использования:
1. Мы можем использовать Web Worker для выполнения некоторых ресурсоемких операций;
2. Можно реализовать опрос и изменить определенные состояния;
3. Обновление статуса сообщения заголовка, например уведомление о количестве сообщений в заголовке страницы;
4. Высокочастотное взаимодействие с пользователем, например проверка орфографии: помощь пользователям в выполнении функций исправления ошибок ввода и исправления на основе привычек ввода данных пользователя, исторических записей, кеша и другой информации.
5. Шифрование. Шифрование иногда может занимать очень много времени, особенно если вам необходимо часто шифровать большой объем данных (например, шифровать данные перед их отправкой на сервер).
6. Предварительная выборка данных. Чтобы оптимизировать свой веб-сайт или веб-приложение и сократить время загрузки данных, вы можете использовать Workers
заранее загрузить некоторые данные на случай, если они вам понадобятся.
Шифрование — отличный сценарий для использования Web Worker , поскольку оно не требует доступа к DOM или другой магии, оно просто использует алгоритмы для выполнения вычислений. Поскольку общественность уделяет все больше внимания конфиденциальным личным данным, информационная безопасность и шифрование стали главными приоритетами. Об этом может свидетельствовать недавний инцидент с утечкой пользовательских данных 12306.
После того как расчет выполняется в Worker, он прозрачен для пользователя и не влияет на работу пользователя.
3. Совместимость 4. Основные понятия1. Сначала не забудьте оценить, поддерживается ли он
если (window.Worker) { ...} 2. Создать нового worker легко.
const myWorker = новый Worker('worker.js');Метод postMessage() и обработчик событий onmessage — это черная магия Workers.
3. postMessage используется для отправки сообщений, а onmessage — для прослушивания сообщений.
const worker = new Worker('src/worker.js');worker.onmessage = e => { console.log(e.data);};worker.postMessage('Как дела!'); При использовании в основном потоке onmessage и postMessage() должны быть навешены на worker объект, но при использовании в worker это не требуется. Причина в том, что внутри worker worker фактически является глобальной областью видимости.
4. Обработка исключений:
worker.onerror = функция (ошибка) { console.log(error.message error;}; 5. Устранить worker
рабочий.прекратить();
worker поток немедленно уничтожается, без какой-либо возможности завершить свои операции или очиститься.
6. В worker потоке workers также могут вызвать собственный метод close для закрытия:
закрывать();5. Быстрый старт
Чтобы быстро разобраться, давайте приведем небольшой пример: структура проекта следующая.
├── index.html└── src ├── main.js └── worker.js
HTML
<html><head> <title>Демоверсия веб-работы</title> <meta charset=UTF-8 /></head><body> <div id=app> Привет, Яртто </div> <script src=src! /main.js></script></body></html>
main.js
const worker = new Worker('src/worker.js');worker.onmessage = e => { const message = e.data; console.log(`[From Worker]: ${message}`); ('app').innerHTML = message;};worker.postMessage('Хорошо написано!');Work.js
onmessage = e => { const message = e.data; console.log(`[From Main]: ${message}`); if(message.indexOf('Good') > -1) { postMessage('Спасибо за вашу поддержку ');Код очень простой. Основной поток отправляет: «Это так хорошо написано!»
Веб-работник получил сообщение и обнаружил, что в его содержании содержится слово «хорошо», и отправил его обратно в основную ветку: «Спасибо за вашу поддержку».
6. Ограничения 1. Внутри worker вы не можете напрямую управлять узлами DOM , а также не можете использовать методы и свойства по умолчанию объекта window . Однако мы можем использовать большое количество вещей в объекте window , включая механизмы хранения данных, такие как WebSockets , IndexedDB и Data Store API для конкретной FireFox OS .
Вот пример, мы модифицируем main.js :
const worker = new Worker('src/worker.js');worker.onmessage = e => { const message = e.data; console.log(`[From Worker]: ${message}`); ('app').innerHTML = сообщение;};+ worker.onerror = function(error) {+ console.log(error);+ worker.terminate();+ };worker.postMessage('Хорошо написано!'); Давайте снова изменим work.js
+ alert('jartto');onmessage = e => { const message = e.data; console.log(`[From Main]: ${message}`); if(message.indexOf('good') > - 1) { postMessage('Спасибо за поддержку' }});В это время при запуске будет сообщено:
Это происходит потому, что: контекст, в котором выполняется worker.js , отличается от контекста, в котором выполняется HTML главной страницы. Объектом верхнего уровня является не Window , глобальный контекст для выполнения woker.js , а WorkerGlobalScope . Объясним подробно.
2. Передача данных между workers и основным потоком осуществляется через такой механизм сообщений: обе стороны используют метод postMessage() для отправки собственных сообщений, а для ответа на сообщение используют обработчик события onmessage (сообщение включается в атрибут data события Message ).
В этом процессе данные не передаются, а копируются.
3. То же ограничение происхождения
Файл сценария, назначенный Worker потоку, должен иметь то же происхождение, что и файл сценария основного потока.
4. Ограничения файлов
Worker поток не может читать локальные файлы, то есть он не может открывать локальную файловую систему （file://） . Загружаемый им сценарий должен исходить от сервера.
5. Локальные файлы не разрешены.
Uncaught SecurityError: Не удалось создать работника:
скрипт в '(путь)/worker.js'
не может быть доступен из источника «null».
Chrome не позволяет загружать веб-работников при запуске сценариев из локального файла.
Так как же это решить? Мы можем запустить локальный сервер. Рекомендуется использовать http-server , который прост и удобен в использовании.
6. Политика безопасности контента
worker имеет собственный контекст выполнения, отличный от объекта document , который его создал. Вообще говоря, worker не ограничен политикой безопасности контента document (или родительского worker ), который его создал.
Давайте рассмотрим пример, предположив, что document имеет следующее объявление заголовка:
Content-Security-Policy: script-src 'self'
Частично цель этого объявления — запретить содержащемуся в нем коду сценария использовать метод eval() . Однако если код сценария создает worker , код, выполняющийся в контексте worker может использовать eval() .
Чтобы указать CSP для работника, к запросу на отправку кода работника должен быть добавлен CSP.
Единственным исключением является то, что если источником worker сценария является глобальный уникальный идентификатор (например, его URL указывает схему данных или blob ), worker унаследует document или worker CSP , который его создал.
О, мы можем найти документацию по MDN :
1. self :
Мы можем использовать свойство self объекта WorkerGlobalScope , чтобы получить ссылку на сам объект.
2. location :
Атрибут location возвращает объект WorkerLocation связанный с потоком при его создании. Он представляет собой абсолютный URL ресурса сценария, использованного для инициализации рабочего потока. Местоположение этого URL адреса не изменится, даже если страница будет перенаправлена несколько раз.
3. close :
Закройте текущий поток, аналогично terminate .
4. caches :
Текущий контекст имеет CacheStorage для обеспечения автономной доступности, а ответ на запрос можно настроить.
5. console :
Поддержка синтаксиса console .
6. importScripts
Мы можем загружать библиотечные функции в worker через url с помощью метода importScripts() .
7. XMLHttpRequest
С его помощью можно выполнять запросы Ajax .
8. Вы можете использовать:
Существует множество API , которые можно использовать, поэтому я не буду приводить здесь примеры один за другим.
Когда worker сталкивается с текущей ошибкой, вызывается его обработчик события onerror . Он получит событие с именем error , которое расширяет интерфейс ErrorEvent . Событие не всплывает и может быть отменено.
Чтобы предотвратить запуск действия по умолчанию, работник может вызвать метод PreventDefault() события ошибки.
Обычно мы используем следующие три ключевые части информации для событий ошибок:
worker.onerror = function(error) { console.log(error.message error;};Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.