Перед HTML5 JavaScript работает в браузерах, работавших однопользованным способом. Несмотря на то, что было много способов реализации многопоточных симуляций (например, метод SetInterval, метод SetTimeout и т. Д. В JavaScript), по сути, программа по-прежнему выполняется двигателем JavaScript в однопользой манере. Рабочие потоки, представленные в HTML5, позволяют одновременно выполнять код JavaScript на стороне браузера, обеспечивая хорошую поддержку многопоточного программирования на стороне браузера.
Многопользовательский Веб -работники в HTML5 можно разделить на два разных типа потоков, один из которых является выделенным работником потока, а другой - общий общий работник. Два типа потоков имеют разные применения. Специальный веб -работникПреданный работник подключен к сценарию, который его создал. Он может общаться с другими работниками или компонентами браузера, но не может общаться с DOM. Значение посвящена, что этот поток обрабатывает только одно требование за раз. Выделенные потоки реализованы в различных основных браузерах, за исключением IE и могут использоваться с уверенностью.
Создать потокуСоздание работника просто, просто передайте имя файла файла JavaScript, который необходимо выполнить в потоке в конструктор.
Передача связиСвязь между основным потоком и дочерним потоком использует методы Postmessage и OnMessage объекта потока. Независимо от того, кто отправляет данные, кому отправка и отправка использует метод Postmessage, а приемник использует метод Onmessage для получения данных. Postmessage имеет только один параметр, то есть переданные данные, а OnMessage имеет только один параметр. Предположим, что это событие, полученные данные получают через event.data.
Отправить данные JSONJSON - это то, что поддержан JS. Это не нужно использовать ни за что. Просто используйте сложные данные в JSON. Например:
postmessage ({'cmd': 'init', 'timeStamp': date.now ()});
Обработка ошибокКогда в потоке возникает ошибка, будет вызван обратный вызов событий Onerror. Следовательно, способ справиться с ошибками очень прост, который заключается в том, чтобы установить событие Onerror экземпляра потока. Эта функция обратного вызова имеет ошибку параметра, которая имеет 3 поля: сообщение - сообщение об ошибке; Имя файла - файл скрипта, где произошла ошибка; Lineno - линия, где произошла ошибка.
Уничтожить нитиВнутри потока используйте близкий метод, чтобы уничтожить себя. В основном потоке вне потока метод завершения экземпляра потока используется для уничтожения потока.
Ниже приведен пример для просмотра основной работы потоков:
HTML -код:
<! Doctype html>
<html>
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Title> Web Worker Fibonacci </title>
<script type = "text/javascript">
OnLoad = function () {
var Worker = new Worker ('fibonacci.js');
Worker.onmessage = function (event) {
console.log ("result:" + event.data);
};
Worker.onerror = function (ошибка) {
console.log ("error:" + error.message);
};
Worker.postmessage (40);
}
</script>
</head>
<тело>
</body>
</html>
Файл сценария fibonacci.js код:
//fibonacci.js
var fibonacci = function (n) {
Вернуть n <2? N: Arguments.callee (n - 1) + Arguments.callee (n - 2);
};
onmessage = function (event) {
var n = parseint (event.data, 10);
Postmessage (fibonacci (n));
};
Поместите их в тот же каталог, запустите файл страницы и просмотрите консоль, чтобы увидеть результаты запуска.
Здесь есть еще один момент. В главной теме событие OnMessage может быть подключено по -другому:
Worker.addeventListener ('Message', function (event) {
console.log ("result:" + event.data);
}, ЛОЖЬ);
Я лично думаю, что это очень хлопотно, так почему бы не использовать Onmessage напрямую.
Используйте другие файлы сценариевРаботники могут использовать глобальные импортировки метода для загрузки и использования других встроенных файлов сценариев или библиотек классов. Например, следующие являются юридические способы использования:
ImportScripts ();/ * Импорт ничего */
ImportScripts ('foo.js'); / * Импорт просто "foo.js" */
ImportScripts ('foo.js', 'bar.js');/ * Импорт два сценария */
После импорта вы можете напрямую использовать методы в этих файлах. Смотрите небольшой пример онлайн:
/**
* Используйте метод ImportScripts для введения сценариев внешних ресурсов, здесь мы используем библиотеку инструментов для расчета математической формулы Math_utilities.js
* Когда двигатель JavaScript загружает этот файл ресурса, продолжайте выполнять следующий код. В то же время можно получить доступ к следующему коду и вызвано
* Переменные и методы, определенные в файле ресурса.
**/
ImportScripts ('math_utilities.js');
onMessage = function (событие)
{
var First = event.data.first;
var second = event.data.second;
рассчитать (первое, второе);
};
Функция рассчитана (первое, второе) {
// Сделайте работу по расчетам
var common_divisor = divisor (первое, второе);
var common_multiple = несколько (первая, вторая);
Postmessage ("работа сделана!" +
«Наименьшее распространенное множественное - + common_divisor +
«И наибольшим общим делителем является»+common_multiple);
}
Некоторые пользователи сети в Интернете также рассказали об использовании метода ImportScripts здесь для решения проблемы предварительной загрузки ресурсов (браузер предварительно загружает ресурсы без анализа и выполнения ресурсов), и причина также очень проста.
Гнездование нитьВ потоке работника вы также можете создавать детские потоки, а различные операции одинаковы.
Проблемы синхронизацииРаботник не имеет механизма блокировки, а проблемы с многопоточной синхронизацией могут быть решены только с помощью кода (например, определение переменных сигнала).
Sharedwebworker Общие веб -работники в основном подходят для задач многократного параллелизма соединения. Поскольку ему необходимо иметь дело с несколькими соединениями, его API немного отличается от преданных работников. В дополнение к этому, общие веб -работники, такие как преданные работники, не могут получить доступ к DOM, и доступ к свойствам формы также ограничен. Общие веб -работники тоже не могут пересекать связь.Сценарии страниц могут общаться с общими веб -работниками, однако, немного отличающиеся от выделенных веб -работников (с использованием неявного общения порта), что общение явно выполняется с помощью объекта порта и прикрепления обработчика событий сообщения.
Получив первое сообщение из сценария веб -работника, общий веб -работник придает обработчику событий к активированному порту. Как правило, обработчик запускает свой собственный метод postmessage () для возврата сообщения в вызову, а затем метод port start () генерирует действительный процесс сообщения.
Посмотрите на единственный пример, который вы можете найти в Интернете: создайте общий поток для получения инструкций, отправленных из разных соединений, а затем реализовать свою собственную логику обработки инструкций. После завершения обработки инструкций результат будет возвращен каждому подключенному пользователю.
HTML -код:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<title> Пример общего работника: как использовать общего работника в HTML5 </title>
<Скрипт>
var Worker = new Sharedworker ('sharedworker.js');
var log = document.getElementbyId ('response_from_worker');
Worker.port.addeventListener ('message', function (e) {
// войдите данные ответа на веб -странице
log.textContent = e.data;
}, ЛОЖЬ);
Worker.port.start ();
Worker.port.postmessage ('ping от пользовательской веб -страницы ..');
// Следующий метод отправит пользовательский ввод SharedWorker
Функция Postmessagetosharedworker (вход)
{
// Определите объект JSON для построения запроса
var инструкции = {инструкция: input.value};
Worker.port.postmessage (инструкции);
}
</script>
</head>
<body onload = ''>
<output id = 'response_from_worker'>
Пример общего работника: как использовать общего работника в HTML5
</output>
Отправить инструкции общему работнику:
<input type = "text" AutoFocus onInput = "postmessageTosharedworker (это); вернуть false;">
</input>
</body>
</html>
Код файла скрипта:
// Создание общего потока для получения инструкций, отправленных из разных соединений. После завершения обработки инструкций результат будет возвращен каждому подключенному пользователю.
var connect_number = 0;
OnConnect = function (e) {
connect_number = connect_number+ 1;
// Получите первый порт здесь
var port = e.ports [0];
port.postmessage ('новое соединение! Текущий номер подключения:
+ connect_number);
port.onmessage = function (e) {
// Получить инструкции от запрашивания
var инструкция = e.data.instruction;
var results = execute_instruction (инструкция);
port.postmessage ('запрос:'+инструкция+'response'+
+'от общего работника ...');
};
};
/*
* Эта функция будет использоваться для выполнения инструкций, отправленных от запроса
* @param инструкция
* @возвращаться
*/
Функция execute_instruction (инструкция)
{
var result_value;
// Реализуйте здесь свою логику
// выполнить инструкцию ...
вернуть result_value;
}
В примере приведенного выше общего потока объект общего потока построен на главной странице, то есть на каждой странице подключения пользователя, и метод определяется для отправки инструкций входящего пользователя в общий поток. В то же время, Connect_Number определяется в фрагменте кода реализации общего потока, чтобы записать общее количество подключенного к общему потоку. После этого используйте процессор событий OnConnect, чтобы принять подключения от разных пользователей и проанализировать инструкции, которые они проходят. Наконец, метод execute_instruction определяется для выполнения инструкций пользователя. После завершения выполнения инструкции результат будет возвращен каждому пользователю.
Здесь мы не использовали обработчик событий OnMessage рабочих потока, как предыдущий пример, но использовали другой метод для AddEventListener. Фактически, как упоминалось ранее, принципы реализации этих двух в основном одинаковы, но здесь есть некоторые небольшие различия. Если вы используете AddEventListener для принятия сообщений из общих потоков, вы должны сначала использовать метод Worker.port.Start () для запуска этого порта. После этого вы можете получать и отправлять сообщения, как обычно, так же, как используется рабочий поток.
Окончательное заявление Вещи, которые вы можете сделать в ветке :1. Можно использовать setTimeout (), cleartimeOut (), setInterval (), clearInterval () и другие функции.
2. может использовать объекты Navigator.
3. может использовать Xmlhttprequest для отправки запросов.
4. Вы можете использовать веб -хранилище в потоке.
5. Вы можете использовать себя, чтобы получить объем этого потока в потоке.
Вещи, которые не могут быть сделаны в потоках :1. Объекты DOM/BOM, отличные от Navigator, не могут использоваться в потоках, таких как окно и документ (если вы хотите работать, вы можете отправлять сообщения только для создателя работника и работать с помощью функций обратного вызова).
2. Переменные и функции в основном потоке не могут быть использованы в потоке.
3. Команды операции с эффектами приостановки не могут использоваться в потоках, таких как оповещение и т. Д.
4. JS не может быть загружен через домены в потоках.
Поток также требует потребления ресурсов, и использование потоков также принесет некоторую сложность, поэтому, если нет достаточных причин для использования дополнительных потоков, то не используйте их.
Практическая ссылкаОфициальный документ: http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html
Классификация веб -работников Описание: http://www.w3schools.com/html5/html5_webworkers.asp
Шаблон забот: http://www.cuoxin.com/w3school/html5/
Обзор веб -работников: https://developer.mozilla.org/en/using_web_workers