English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Основной курс HTML5

HTML5 API

HTML5 Медиа

HTML5 Графика

Web Workers в HTML5

Web worker - это JavaScript, выполняющийся в фоновом режиме, который не влияет на производительность страницы.

Что такое Web Worker?

Когда выполняется скрипт на HTML-странице, состояние страницы не отвечает, пока скрипт не завершится.

Web worker - это JavaScript, выполняющийся в фоновом режиме, независимо от других скриптов и не влияющий на производительность страницы. Вы можете продолжать делать все, что вам угодно: нажимать, выбирать содержимое и т.д., в то время как web worker работает в фоновом режиме.

Поддержка браузером

Internet Explorer 10, Firefox, Chrome, Safari и Opera поддерживают Web workers.

Пример HTML5 Web Workers

Ниже приведен пример создания простого web worker, который выполняет счет в фоновом режиме:

Онлайн пример

Счет:


Код файла demo-workers.js:

var i=0;
function timerCount()
{
i=i+1;
postMessage(i);
setTimeout("timerCount()",500);
}
timerCount();

Проверка поддержки браузером Web Worker

Перед созданием web worker проверьте, поддерживает ли браузер пользователя его:

if(typeof(Worker)!=="undefined")
{
　　　　// Да! Поддержка Web worker есть!
　　　　// Некоторые коды.....
}
else
{
　　　　//Извините! Поддержка Web Worker отсутствует
}

Создание файла web worker

Теперь давайте создадим наш web worker в внешнем JavaScript.

Здесь мы создаем счетный скрипт. Этот скрипт хранится в файле "demo-workers.js":

var i=0;
function timerCount()
{
　　　　i=i+1;
　　　　postMessage(i);
　　　　setTimeout("timerCount()",500);
}
timerCount();

Важной частью данного кода является метод postMessage() - он используется для передачи сообщения на HTML-страницу.

Внимание: Web worker обычно не используется для таких простых скриптов, а для более ресурсоемких задач, требующих использования CPU.

Создание объекта Web Worker

У нас уже есть файл web worker, теперь нам нужно вызвать его из HTML-страницы.

Ниже приведен код для проверки наличия worker. Если его нет, - он создаст новый объект web worker и выполнит код из файла "demo-workers.js":

if(typeof(w) == "undefined")
{
　　　　w = new Worker("demo-workers.js");
}

Затем мы можем отправлять и получать сообщения от web worker.

Добавить "onmessage" слушатель событий для web worker:

w.onmessage = function(event){
　　　　document.getElementById("result").innerHTML = event.data;
};

Когда web worker отправляет сообщение, выполняется код в слушателе событий. В event.data содержится данные из event.data.

Остановить Web Worker

После создания объекта web worker он продолжит监тировать сообщения (даже после завершения внешнего скрипта), до тех пор, пока его не остановят.

Чтобы завершить работу web worker и освободить ресурсы браузера/компьютера, используйте метод terminate().

w.terminate();

Полный пример кода Web Worker

Мы уже видели код Worker в файле .js. Вот код HTML-страницы:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Основной учебник сетей (oldtoolbag.com)</title>　
</head>
<body>
　
<p>Счетчик: <output id="result"></output></p>
<button onclick="startWorker()">Начать работу</button>　
<button onclick="stopWorker()">Остановить работу</button>
　
<p><strong>Внимание：</strong> браузеры Internet Explorer 9 и более ранние версии не поддерживают Web Workers.</p>
　
<script>
var w;　
function startWorker() {
　　　　if(typeof(Worker) !== "undefined") {
　　　　　　　　if(typeof(w) == "undefined") {
　　　　　　　　　　　　w = new Worker("demo-workers.js");
　　　　　　　　}
　　　　　　　　w.onmessage　=　функция(event)　{}}
　　　　　　　　　　　　document.getElementById("result").innerHTML　=　event.data;
　　　　　　　　};
　　　　}　else　{
　　　　　　　　document.getElementById("result").innerHTML　=　"Извините, ваш браузер не поддерживает Web Workers...";
　　　　}
}
　
функция stopWorker()　
{　
　　　　w.terminate();
　　　　w　=　undefined;
}
</script>
　
</body>
</html>
Тест, чтобы увидеть ‹/›

Web Workers и DOM

Поскольку web worker находится во внешнем файле, они не могут получить доступ к следующим объектам JavaScript:

  • Объект window

  • Объект document

  • Объект parent

События, отправляемые сервером, в HTML5Кэш приложений HTML5