Войти
s-lub » Учебники » HTML 5 » Web worker

Web worker

Web worker

В старом HTML jаvascript скрипты имели возможность выполняться только поочерёдно, и иногда пользователям сайта приходилось ждать полного завершения выполнения скрипта, но благодаря новой технологии web worker скрипты стали загружаться в фоновом режиме и перестали влиять но скорость загрузки страницы сайта.

Поскольку web worker работает параллельно с основной страницей кода, то скрипт стало необходимо выносить в отдельный .js файл и подключать его следующим образом:

var worker = new Worker(ссылка_на_файл_скрипта);

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

worker.postMessage();

Взаимодействие web worker с основной веб-страницей происходит с помощью специальных событий и метода postMessage(). Например событие message срабатывает, когда worker получает какое-либо сообщение.

Пример:

<script>
//Создадим новый объект worker
var worker=new Worker("worker1.js");
//Отправим сообщение "Я изучаю HTML5 на" в наш worker
worker.postMessage("Я изучаю HTML5 на ");
//Выведем ответ полученный от worker на страницу
worker.addEventListener('message', function(event) {
document.getElementById('reply').innerHTML='Наш worker ответил: <b>' + event.data + "</b>";
});
</script>

Всегда имейте ввиду что web worker не имеют доступа к:
• DOM структуре основной страницы
• Объекту window
• Объекту document
• Объекту parent
Важно: помимо текстовых строк мы можем передавать в worker JSON объекты.

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

После того, как worker был создан он будет ожидать сообщения от основной страницы даже когда выполнение его кода завершится, поэтому Вы всегда должны явно завершать работу worker когда он больше не нужен.
Чтобы завершить работу worker и освободить ресурсы компьютера Вы должны использовать метод termitane():

worker.terminate();


Все статьи по теме HTML 5:

- HTML 5 Введение
- Устаревшие теги и атрибуты HTML 5
- Нововведения в структуру документа HTML 5
- Глобальные атрибуты в HTML 5
- Формы HTML 5
- Воспроизведение аудио файлов в HTML 5
- Воспроизведение видео файлов в HTML 5
- Web worker
- Геолокация в HTML 5
- Drag and Drop
- Кэширование страниц
- Макет шаблона HTML 5 с пояснениями
- Справочник тегов HTML 5

Canvas:

- Canvas вступление
- Применение стилей в canvas
- Оформление текста и изображений в canvas