web worker является JavaScript работает в фоновом режиме, не оказывая влияния на производительность страницы.
Что такое Web Worker ?
При выполнении скриптов в HTML-страницы, страница перестает отвечать на запросы, пока сценарий не будет завершен.
Веб-рабочий, как это определено в World Wide Web Consortium (W3C) и Web Hypertext Application Technology Рабочей группы (WHATWG), является сценарий JavaScript выполняется из HTML-страницы, которая работает в фоновом режиме, независимо от других сценариев пользовательского интерфейса, также может быть выполнена из того же HTML-страницы. Веб-работники часто способны более эффективно использовать многоядерные процессоры.
обзор
Как предусмотрено WHATWG, веб-рабочие относительно тяжелый вес. Ожидается, что они будут долговечны, имеют высокую начальную стоимость до производительность и высокую стоимость памяти на-экземпляра.
Веб-рабочие не предназначены или предполагаются использовать в больших количествах, так как они могут боры системных ресурсов.
Web Workers позволяет для одновременного выполнения нитей браузера и одного или несколько потоков JavaScript, работающих в фоновом режиме. Браузер, который следует один поток выполнения придется ждать программ JavaScript, чтобы закончить выполнение, прежде чем продолжить, и это может занять значительное время, которое программист может нравится, чтобы скрыть от пользователя.
Это позволяет браузеру продолжать нормальную работу во время выполнения скрипта в фоновом режиме. Спецификация веб-работник является отдельной спецификацией из спецификации HTML5 и может быть использована с HTML5.
Есть два типа веб-работников: выделенные и общие рабочие.
Когда веб-работники работают в фоновом режиме, они не имеют прямой доступ к DOM, но общаться с документом посредством передачи сообщений. Это позволяет многопоточного выполнения программ JavaScript.
Поддержка браузеров
Числа в таблице указать первую версию браузера , которая полностью поддерживает Web Workers .
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4,0 | 10,0 | 3,5 | 4,0 | 11,5 |
HTML Web Workers Пример
В приведенном ниже примере создается простой web worker - web worker , что сосчитать число в фоновом режиме:
Проверка Web Worker - Web Worker поддержки
Перед созданием web worker - web worker , проверьте , поддерживает ли ее браузер пользователя:
if(typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
} else {
// Sorry! No Web Worker support..
}
Создание Web Worker File
Теперь, давайте создадим наш web worker - web worker во внешнем JavaScript.
Здесь мы создаем скрипт, который считает. Сценарий хранится в "/html/demo_workers.js" файл:
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i) ;
setTimeout("timedCount() ",500);
}
timedCount() ;
Важная часть кода выше , является postMessage() метод - который используется для отправки сообщения обратно на страницу HTML.
Note: Обычно web workers - web workers не используются для таких простых сценариев, но для более ресурсоемких задач.
Создание Web Worker объекта
Теперь, когда у нас есть web worker - web worker , файл, нам нужно вызвать его из HTML - страницы.
Следующие строки проверяют , является ли web worker - web worker "/html/demo_workers.js" web worker уже существует, если нет - создает новый web worker - web worker , объект и запускает код в "/html/demo_workers.js" :
if(typeof(w) == "undefined") {
w = new Worker("/html/demo_workers.js");
}
Тогда мы можем посылать и получать сообщения от web worker - web worker .
Добавить "onmessage" слушателя событий для web worker - web worker .
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Когда web worker - web worker отправляет сообщение, код внутри обработчика событий выполняются. Данные с web worker - web worker хранится в event.data.
Прервать Web Worker - Web Worker
Когда web worker - (even after the external script is finished) web worker объект будет создан, он будет продолжать прослушивать сообщения (even after the external script is finished) , как (even after the external script is finished) до тех пор, пока не будет прекращено.
Для завершения web worker - terminate() web worker , а также бесплатный браузер / ресурсы компьютера, используйте terminate() метод:
w.terminate();
Повторное использование в Web Worker
Если установить web worker - web worker переменную неопределен, после того, как она была прервана, вы можете повторно использовать код:
w = undefined;
Полный Web Worker Пример кода
Мы уже видели Web Worker код в .js файле. Ниже приведен код страницы HTML:
пример
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("/html/demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html> Попробуй сам " Web Workers и DOM
Так как web workers - web workers находятся во внешних файлах, они не имеют доступа к следующим объектам JavaScript:
- Объект окна
- Объект документа
- Родительский объект