beget banner 468x60beget banner 728x90beget banner 930x180jivo banner 468x60jivo banner 728x90jivo banner 930x180skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180

Руководство по веб-воркерам в HTML5

Если вы попытаетесь выполнить тяжелую, интенсивную задачу с помощью JavaScript, который занимает много времени и требует изрядных вычислений, браузер заморозит веб-страницу и не даст пользователю ничего сделать, пока работа не будет завершена. Это происходит потому, что код JavaScript всегда прерывает рендеринг документа.

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

Функция Web Worker HTML5 поддерживается во всех современных веб-браузерах, таких как Firefox, Chrome, Opera, Safari и Internet Explorer 10 и выше.

Создание Web Worker файла

Web worker используется для выполнения трудоемких задач. Здесь мы собираемся создать задачу JavaScript, которая будет насчитывать до 100 000 операций.

Давайте создадим внешний JavaScript-файл с именем worker.js и наберем следующий код.

var i = 0;
function countNumbers() {
    if(i < 100000) {
        i = i + 1;
        postMessage(i);
    }
 
    // Wait for sometime before running this script again
    setTimeout("countNumbers()", 500);
}
countNumbers();

Web worker не имеет доступа к DOM. Это означает, что вы не можете получить доступ к любым элементам DOM в коде JavaScript, который вы собираетесь запускать с помощью web worker.

Метод postMessage() рабочего объекта используется для отправки сообщения (например, чисел в приведенном выше примере) обратно на веб-страницу из файла web worker.

Работа с Web Worker в фоновом режиме

Теперь, когда мы создали наш web worker файл, нам нужно инициировать его из HTML-документа, который запустит код в файле с именем worker.js в фоновом режиме и будет постепенно отображать результат на веб-странице. Давайте посмотрим, как это работает:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using Web Worker</title>
<script>
    if(window.Worker) {
        // Create a new web worker
        var worker = new Worker("worker.js");
        
        // Fire onMessage event handler
        worker.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        alert("Sorry, your browser do not support web worker.");
    }
</script>
</head>
<body>
    <div id="result">
        <!--Received messages will be inserted here-->
    </div>
</body>
</html>

JavaScript-код в приведенном выше примере имеет следующие значения:

  • Оператор var worker = new Worker(«worker.js»); создает новый web worker объект, который используется для связи с ним.
  • Когда web worker отправляет сообщение, он запускает обработчик события onmessage (строка 14), который позволяет коду получать от web worker сообщения.
  • Элемент event.data содержит сообщение, отправленное веб-web worker.

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

Завершение работы Web Worker

Вы всегда можете завершить работающий web worker в середине выполнения скрипта.

В следующем примере показано, как запускать и останавливать работника с веб-страницы с помощью HTML-кнопок. Он использует тот же JavaScript-файл worker.js, который мы использовали в предыдущем примере для подсчета чисел от нуля до 100 000. Давайте посмотрим:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Start/Stop Web Worker</title>
<script>
    // Set up global variable
    var worker;
    
    function startWorker() {
        // Initialize web worker
        worker = new Worker("worker.js");
        
        // Run update function, when we get a message from worker
        worker.onmessage = update;
        
        // Tell worker to get started
        worker.postMessage("start");
    }
    
    function update(event) {
        // Update the page with current message from worker
        document.getElementById("result").innerHTML = event.data;
    }
    
    function stopWorker() {
        // Stop the worker
        worker.terminate();
    }
</script>
</head>
<body>
    <h1>Web Worker Demo</h1>
    <button onclick="startWorker();" type="button">Start web worker</button>
    <button type="button" onclick="stopWorker();">Stop web worker</button>
    <div id="result">
        <!--Received messages will be inserted here-->
    </div>
</body>
</html>

Используйте web worker для выполнения только тяжелых JavaScript-задач, которые не относятся к скриптам пользовательского интерфейса (то есть скрипты, которые реагируют на клики или другие взаимодействия с пользователем). Не рекомендуется использовать web worker для коротких задач.

skillbox banner 480x320skillbox banner 728x90skillbox banner 120x600smsc banner 480x320smsc banner 728x90smsc banner 120x600flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по тегам и элементам в HTML

HTML-элемент — это отдельный компонент документа HTML. Он представляет собой семантику или некоторое значение. Например, элемент <title> представляет заголовок документа. Большинство элементов HTML пишутся с начальным тегом (или открывающим) и конечным тегом (или закрывающим) с содержимым между ними. Элементы могут также содержать атрибуты, которые определяют его дополнительные свойства. Например, абзац, который представлен элементом <p>, будет…
Подробнее

Руководство по заголовкам в HTML

Заголовки помогают определить иерархию и структуру содержимого веб-страницы. В HTML есть шесть уровней заголовков, от <h1> до <h6>; чем выше уровень заголовка, тем больше его важность — поэтому тег <h1> определяет самый важный заголовок, а тег <h6> определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…
Подробнее

Руководство по мета-тегам в HTML

Теги <meta> обычно используются для предоставления структурированных метаданных, таких как ключевые слова (keywords), описание (description), имя автора (author name), кодировка символов (character encoding) и т.д. В теге <head> может быть размещено любое количество метатегов <meta>. Метаданные не будут отображаться на веб-странице, но будут обрабатываться поисковиками, браузерами и другими веб-сервисами. Теперь рассмотрим использование мета-тегов. Объявление кодировки…
Подробнее