Блог веб разработки статьи | видеообзоры | исходный код

Блог веб разработки статьи | видеообзоры | исходный код

webfanat вконтакте webfanat youtube

Технология web workes в html5

Технология web workes в html5

Доброго времени суток и давайте посмотрим поддерживается ли данная технология в вашем браузере. Сделать это можно предварительно выполнив следующий код:

if(window.Worker){
    alert('Технология webWorker поддерживается вашим браузером');
}else{
    alert('Технология webWorker не поддерживается вашим браузером');
}

Если данная технология поддерживается вашим браузером, то поздравляю и мы идем дальше, если нет, то обновите браузер. В более современных браузерах эта технология поддерживается.

И так, что же она делает? По сути с помощью технологии web Worker мы можем создавать подобие мультипоточности работы со скриптами javaScript, то есть скрипты у нас выполняются в так называемом фоновом режиме.

Допустим у нас есть страница и в ней мы подключаем javaScript файл index.js:

<!DOCTYPE >
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Выполнение скриптов в фоновом режиме в HTML5.</title>
    </head>
    <body>
        <script type="text/javascript" src="index.js"></script>
    </body>
</html>

Помимо этого мы создаем два дополнительных js файла user.js и user2.js.

В самом javaScript файле index.js у нас следующий код:

if (window.Worker){
    var worker = new Worker('user.js'),
        worker2 = new Worker('user2.js');
    worker.postMessage('message');

    worker.onmessage = function (e){
        alert(e.data);
    };
    worker2.onmessage = function (e){
        alert(e.data);
    };
}

здесь в самом начале мы создали условие на проверку поддержки в браузере, затем в самом условии создали два объекта worker и worker2. При создании данных объектов мы в качестве аргумента указали путь к файлу, которому хотим отправить или получить данные. Затем с помощью метода postMessage() мы по сути обращаемся через объект worker к странице user.js и отправляем ей сообщение с текстом 'message'.

Смотрим что разворачивается на странице user.js которой мы отправили сообщение:

var message = "Файл user";
    onmessage = function(event)
    {
        if(event.data == "message") {
            postMessage(message);
        }
    };

здесь у нас содержится переменная с текстом 'Файл user', c помощью метода onmessage объекта window, сам объект можно не указывать(window.onmessage), мы принимаем сообщение. Само сообщение находится в свойстве data объекта события (event). Мы в условии проверяем является ли содержание сообщения 'message', если да, то мы отправляем обратное сообщение на страницу index.js. В качестве сообщения у нас выступает переменная message, то есть ее содержимое.

Теперь возвращаясь на страницу index.js смотрим дальше:

worker.onmessage = function (e){
    alert(e.data);
};

С помощью данного метода onmessage() как вы уже знаете мы принимаем сообщения, но уже не через объект window, а через worker. То есть мы с помощью объекта worker как бы указываем с какой страницы принимается сообщение. В нашем случае с user.js(var worker = new Worker('user.js')). И опять же через объект события e и его свойство data получаем сообщение и выводим в модальном окне.

Помимо объекта worker, мы создали объект worker2 который ссылается на страницу user2.js. По сути мы на страницу user2.js никаких сообщений не отправляем. Но с помощью метода onmessage() мы установили прослушку на прием сообщений с страницы user2.js:

worker2.onmessage = function (e){
    alert(e.data);
};

Файл user2.js:

var message = "файл user2";
postMessage(message);

здесь мы просто отправляем сообщение, которое при помощи объекта worker2 на странице index.js будет принято и обработано.

В результате всех определенных действий, при обращении к странице к которой мы подключили файл index.js у нас появятся, поочередно, два модальных окна со значениями переменных файлов user.js и user2.js.

Что вам здесь следует понимать. index.js по сути является связующей страницей между user.js и user2.js, так как в ней мы используем объект worker(new Worker()) и через него работаем с отправкой сообщений (worker.postMessage()) и приемом (worker2.onmessage) . Причем мы выбираем файлы которым будем отправлять и принимать с них сообщения.

Страницы user.js и user2.js можно так сказать являются дочерними, то есть мы также можем отправлять и принимать сообщения, но делаем это через объект window. Здесь отправка сообщений и их прием осуществляются на страницы где объект worker ссылается на данный файл который отправляет сообщение через объект window.

Всего нам нужно запомнить три основных метода:

postMessage(a) - с помощью данного метода осуществляется отправка сообщений, в качестве аргумента 'a' можем приниматься текст сообщения, переменная, функция, объект и т.п.

onmessage - данный метод или событие служит для приема сообщений

onerror() - с помощью этого метода или события мы можем отлавливать ошибки

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

Надеюсь данная статья была для вас полезна и вы узнали что то новое. Ну ,а я же с вами прощаюсь и желаю успехов.

Оцените статью:

Статьи

Разработки

Комментарии

В данном разделе пока нет комментариев!

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm