Если вы попытаетесь выполнить тяжелую, интенсивную задачу с помощью 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 для коротких задач.

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

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

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

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

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

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

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

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

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

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

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