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

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

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

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

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