Що таке веб-працівники?
Ця стаття стосується використання веб-службовців та їх важливості в HTML5.Java скриптовому механізмі, створеному з одного потоку, і за ними не відбувається одночасний процес (жоден інший процес не виконується до завершення першого процесу). Оскільки JavaScript працює на передньому плані і робить веб-сторінку трудомісткою. Тому, щоб уникнути цієї поважної проблеми, HTML5 придумав нову технологію під назвою Веб-працівники. Це невеликий фоновий сценарій, який робить обчислення на дорогих завданнях, не втручаючись у користувальницький інтерфейс чи продуктивність веб-сторінки. Цей ізольований потік має невелику вагу і підтримується у всіх веб-браузерах. Це робить HTML для запуску додаткових потоків.
Типи веб-працівників у HTML5
Веб-працівників також називають "відданими працівниками". Вони отримали окрему модель спільної пам'яті. Іншими словами, ми можемо сказати, що цілий діапазон JavaScript був запущений на одному потоці. Працюючи у веб-браузері, ми стикалися з деяким діалоговим повідомленням злітно-посадкової смуги через важку обробку сторінки. Для забезпечення хорошого рішення веб-браузер HTML API придумав одночасно правильні різні обчислення.
Нижче наведено три важливі типи веб-працівників:
1. Спільний веб-працівник
Цей тип використовує API, і кожна одиниця працівника має декілька з'єднань під час надсилання повідомлення (декілька скриптів) за умови, що кожен контекст має однакове походження. Підтримка браузера для цього працівника обмежена. Їх викликають за допомогою конструктора спільного робочого ().
2. Виділений веб-працівник
Створити файл дуже просто, лише зателефонувавши Конструктору з його вихідним шляхом. Вони використовують метод передачі повідомлень під назвою метод повідомлення після повідомлення (). Навіть обробники подій використовуються, коли якийсь слухач проходить. Для отримання повідомлення використовується обробник onmessage ().
3. Службовець
Цей працівник не взаємодіє безпосередньо з веб-сторінкою та працює у фоновому режимі. Вони можуть відновлюватися, коли потрібно, і виконують функції проксі-сервера, до них можна отримати доступ через декілька потоків.
Як створити файл веб-робітників?
Вони не підтримують деякі функції, такі як об’єкт вікна, DOM, батьківський об'єкт. Усі функції виконуються шляхом передачі репліки з них.
Крок 1: Створення імпорту файлу конструктора Worker () Файл створюється за допомогою нового об’єкта, і сценарій виглядає так.
var worker = new Worker(sample.js);
Крок 2: Створення повідомлення (). Створені робочі файли автоматично викликають метод повідомлення повідомлення (). Методи публікації повідомлення () спрямовують передачу повідомлення до основної нитки. І так само ми можемо надіслати повідомлення від головної нитки до робочої нитки. Тут починається робітник.
worker. postMessage();
Крок 3: Далі киньте обробник події, щоб дозволити повідомлення від веб-працівника.
worker. onmessage = function(event)
Відтепер ми бачили, як надсилати та отримувати повідомлення. Тепер давайте подивимось, як звільнити працівника в середині процесу.
Крок 4: Щоб зупинити процес.
worker.terminate()
Крок 5: Для реалізації сценарію обробки помилок використовуються працівники.
Worker.onerror();
Топ 9 особливостей веб-працівників HTML5
- Веб-працівники, будучи асинхронним протоколом, вони найкраще підходили для виконання обчислювальних завдань і вважалися професійними особливостями Javascript.
- Веб-працівники платять за строгу платформу виконання для мобільних і настільних вікон, дозволяючи запускати веб-сторінку, не зависаючи веб-сторінку в браузерах.
- Основна перевага полягає в тому, що ми можемо запускати дорогі процеси в межах одного окремого потоку, який не перериває працюючий основний потік.
- Веб-працівники - це невеликі легкі ваги, що живуть індивідуально, переплітаючи користувальницький інтерфейс.
- Веб-працівники, орієнтовані на ядра, допомагають досягти високої продуктивності сторінки браузерів.
- Веб-працівники допомагають у створенні паралельного програмування та виконує багатопотокові дії.
- Веб-працівники підвищують швидкість для Java-програми JScript.
- Веб-працівник вважається сценарієм на стороні клієнта і використовується вище в додатках для ігор.
- Нитки веб-працівників спілкуються між собою за допомогою методу зворотного виклику повідомлення Post ().
Приклади веб-працівників HTML5
Працівники Інтернету мають доступ до навігатора, запиту XMLHTTP, навігатора завдяки їхній багатопроцесорній діяльності. Наведений нижче приклад фокусується на виділених типах робітників для демонстрації.
Приклад №1
Показує зразок файлу Worker, що демонструє роботу браузера.
Код:
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";)
)
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
Наступний приклад показує, як завдання робочого бігають за завданням за допомогою класу, і підрахунок проводиться для завдань робітника. Завдання працівника автоматично оновлює веб-сторінку в кожному циклі, поки цикл не закінчиться. Для припинення виконання робітника тут використовується термін ().
Робота, виконана за допомогою веб-працівника:
Код:
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 та його приклади з реалізацією коду. Ви також можете ознайомитись із запропонованими нами статтями, щоб дізнатися більше -
- Html5 Нові елементи | Топ-10
- HTML-кадри з синтаксисом
- Вступ до переваг HTML
- Топ 10 питань та відповідей на інтерв'ю HTML5