Что такое веб-работники?

Эта статья посвящена использованию веб-работников и их важности в скриптовом движке HTML5.Java, созданном из одного потока, и за ними нет параллельного процесса (никакой другой процесс не выполняется до тех пор, пока не завершится первый процесс). Поскольку javascript работает на переднем плане и делает веб-страницу трудоемкой. Поэтому, чтобы избежать этой серьезной проблемы, HTML5 разработал новую технологию, которая называется «Веб-работники». Это небольшой фоновый скрипт, который выполняет вычисления в дорогостоящих задачах без вмешательства в пользовательский интерфейс или производительность веб-страницы. Этот изолированный поток относительно легкий и поддерживается во всех веб-браузерах. Это делает HTML для запуска дополнительных потоков.

Типы веб-работников в HTML5

Веб-работников также называют «преданными работниками». Они получили отдельную модель общей памяти. Другими словами, мы можем сказать, что вся область JavaScript была запущена в одном потоке. Во время работы в веб-браузере мы столкнулись с некоторым диалоговым сообщением взлетно-посадочной полосы из-за интенсивной обработки страницы. Чтобы обеспечить хорошее решение, веб-браузер HTML API разработал различные вычисления одновременно.

Ниже приведены три важных типа веб-работников:

1. Общий веб-работник

Этот тип использует API, и каждая единица работника имеет несколько соединений при отправке сообщения (несколько сценариев) при условии, что каждый контекст имеет одно и то же происхождение. Поддержка браузера для этого работника ограничена. Они вызываются с помощью конструктора shared worker ().

2. Выделенный веб-работник

Создать файл очень просто, просто вызвав конструктор с его исходным путем. Они используют обмен сообщениями, называемый методом post message () во время передачи сообщения. Даже обработчики событий используются, когда происходит прослушивание. Обработчик onmessage () используется для получения сообщения.

3. Сервисный работник

Этот работник не взаимодействует напрямую с веб-страницей и работает в фоновом режиме. Они могут восстанавливать всякий раз, когда это необходимо, и действуют как прокси, к ним могут обращаться несколько потоков.

Как создать файл Web Workers?

Они не поддерживают некоторые функции, такие как объект окна, DOM, родительский объект. Все функции выполняются путем передачи их копии.

Шаг 1: Создание конструктора импорта файлов Worker () Файл создается с использованием нового объекта, и скрипт выглядит так.

var worker = new Worker(sample.js);

Шаг 2: Создание почтового сообщения (). Созданные рабочие файлы автоматически вызывают метод post message (). Методы post message () направляют сообщение, передаваемое в основной поток. Аналогичным образом мы можем отправить сообщение из основного потока в рабочий поток. Здесь начинается рабочий.

worker. postMessage();

Шаг 3: Далее нужно сгенерировать обработчик событий, чтобы разрешить сообщение от веб-работника.

worker. onmessage = function(event)

Отныне мы видели, как отправлять и получать сообщения. Теперь посмотрим, как завершить работу в середине процесса.

Шаг 4: Чтобы остановить процесс.

worker.terminate()

Шаг 5: Для реализации сценария обработки ошибок рабочий использует.

Worker.onerror();

Лучшие 9 функций веб-работников HTML5

  1. Веб-работники, будучи асинхронным протоколом, лучше всего подходили для выполнения вычислительных задач и считались профессиональными функциями Javascript.
  2. Веб-работники платят платформу строгого исполнения за мобильные и настольные окна, позволяя запускать веб-страницу, не замораживая веб-страницу в браузерах.
  3. Основное преимущество заключается в том, что мы можем запускать дорогостоящие процессы в одном отдельном потоке, который не прерывает работающий основной поток.
  4. Веб-работники - это небольшие легковесные потоки, живые индивидуально, чередуя пользовательский интерфейс.
  5. Веб-работники, являющиеся ориентированными на ядро ​​потоками, помогают достичь высокой производительности страницы браузера.
  6. Веб-работники помогают в создании параллельного программирования и выполняют многопоточные действия.
  7. Веб-работники повышают скорость работы Java-приложения JScript.
  8. Веб-работник считается клиентским скриптом и используется в играх выше.
  9. Веб-рабочие потоки взаимодействуют друг с другом с помощью метода обратного вызова post ().

Примеры веб-работников HTML5

Веб-работники имеют доступ к навигатору, XMLHTTP-запросу, навигатору благодаря многопоточности. Приведенный ниже пример сфокусирован на демонстрации рабочих типов.

Пример № 1

Показывает пример рабочего файла, демонстрирующего работу браузера.

Код:



Web Worker Demo

Validating the browser compatibility of Web Browsers

Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)



Web Worker Demo

Validating the browser compatibility of Web Browsers

Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)



Web Worker Demo

Validating the browser compatibility of Web Browsers

Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)

Выход:

Пример № 2

В следующем примере показано, как рабочие задачи выполняются за задачей с помощью класса, а подсчет выполняется для рабочих задач. Рабочие задачи автоматически обновляют веб-страницу в каждом цикле, пока цикл не закончится. Чтобы прекратить выполнение работника, здесь используется terminate ().

Работа, выполненная в фоновом режиме веб-работником:

Код:

wrk.html




Web Workers Demo
body (padding-top:18px;)
.output-cont (margin-left:12%; margin-top:28px;)
.output-cont h2 (width:150px; height:95%;)
.output-cont button (padding:3px 7px; font-size:1.3rem; font-family:sans-serif; )

start worker terminate

start blocking thread

test responsiveness
var worker;
function testWork() (
if (typeof(Worker) !== "undefined") (
if (typeof(worker) == "undefined") (
worker = new Worker("demo.js");
)
worker.onmessage = function(event) (
document.getElementById("wOutput").innerHTML = event.data;
);
) else (
document.getElementById("wOutput").innerHTML = "Web Workers are unsupported";
)
)
function stopWorker() (
worker.terminate();
worker = undefined;
)
function test() (
for (var j = 0; j < 20000; j++) (
document.getElementById("mainThreadOutput").innerHTML = "Main Thread Counter: " + j;
)
)

Next creating an separate external javascript file demo.js and the code comes as shown.
demo.js
j = 0;
while (j < 200000)
( postMessage("Web Worker Counter: " + j);
j++;
)


Web Workers Demo
body (padding-top:18px;)
.output-cont (margin-left:12%; margin-top:28px;)
.output-cont h2 (width:150px; height:95%;)
.output-cont button (padding:3px 7px; font-size:1.3rem; font-family:sans-serif; )

start worker terminate

start blocking thread

test responsiveness
var worker;
function testWork() (
if (typeof(Worker) !== "undefined") (
if (typeof(worker) == "undefined") (
worker = new Worker("demo.js");
)
worker.onmessage = function(event) (
document.getElementById("wOutput").innerHTML = event.data;
);
) else (
document.getElementById("wOutput").innerHTML = "Web Workers are unsupported";
)
)
function stopWorker() (
worker.terminate();
worker = undefined;
)
function test() (
for (var j = 0; j < 20000; j++) (
document.getElementById("mainThreadOutput").innerHTML = "Main Thread Counter: " + j;
)
)

Next creating an separate external javascript file demo.js and the code comes as shown.
demo.js
j = 0;
while (j < 200000)
( postMessage("Web Worker Counter: " + j);
j++;
)


Web Workers Demo
body (padding-top:18px;)
.output-cont (margin-left:12%; margin-top:28px;)
.output-cont h2 (width:150px; height:95%;)
.output-cont button (padding:3px 7px; font-size:1.3rem; font-family:sans-serif; )

start worker terminate

start blocking thread

test responsiveness
var worker;
function testWork() (
if (typeof(Worker) !== "undefined") (
if (typeof(worker) == "undefined") (
worker = new Worker("demo.js");
)
worker.onmessage = function(event) (
document.getElementById("wOutput").innerHTML = event.data;
);
) else (
document.getElementById("wOutput").innerHTML = "Web Workers are unsupported";
)
)
function stopWorker() (
worker.terminate();
worker = undefined;
)
function test() (
for (var j = 0; j < 20000; j++) (
document.getElementById("mainThreadOutput").innerHTML = "Main Thread Counter: " + j;
)
)

Next creating an separate external javascript file demo.js and the code comes as shown.
demo.js
j = 0;
while (j < 200000)
( postMessage("Web Worker Counter: " + j);
j++;
)

Выход:

Вывод

В конце мы увидели, как веб-работники работают независимо от основного потока, который помогает веб-организациям создавать требовательные приложения. И настоятельно рекомендуется использовать веб-работников в javascript для тяжелых задач. Предполагается, что когда веб-браузер больше не используется, он должен быть закрыт для использования системных ресурсов.

Рекомендуемая статья

Это руководство для веб-работников HTML5. Здесь мы обсуждаем 9 основных функций веб-работников HTML5 и их примеры с реализацией кода. Вы также можете просмотреть наши предлагаемые статьи, чтобы узнать больше -

  1. HTML5 Новые элементы | Топ 10
  2. HTML-фреймы с синтаксисом
  3. Введение в преимущества HTML
  4. Топ 10 вопросов и ответов по интервью HTML5

Категория:

Инструменты веб-разработки