<MyRusakov.ru />

Создание игр на Unreal Engine 4

Создание игр на Unreal Engine 4

Данный курс научит Вас созданию игр на Unreal Engine 4. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

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

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства» и «Создание прототипа RPG с открытым миром».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Атрибуты async, defer в JS

Атрибуты async, defer в JS

Загрузка страницы в браузер

Когда HTML страница попадает в браузер, то сразу запускается процесс распознавания: сканируется код страницы сверху вниз, формируется DOM-дерево, загружаются CSS стили, шрифты. Тег за тегом на странице строится верстка. Когда в конце страницы браузер видит тег скрипта, то загружает код скрипта и начинает взаимодействовать с ним.


Ошибка новичков

В чем состоит типичная ошибка новичков? Они тег script помещают не в конец страницы, а между тегами head. Чего категорически нельзя делать. Что будет если DOM-дерево еще не успело построиться, а скрипт уже начал взаимодействовать с элементами, которых еще нет на странице? Это неизбежно приведет к ошибке и скрипт может заблокировать страницу из-за порочной цепочки: Скрипт ждет загрузки нужных ему элементов, а загрузка элементов встала на паузу из-за зависания скрипта. В итоге сайт зависает и становится не работоспособным.

<script src="script.js"></script>

Загрузка скрипта на страницу

Но не все так просто, даже при правильном размещении тега script, все равно может возникнуть проблема. Причина - объемная HTML структура на больших проектах. Пока загрузятся все теги и дойдет очередь до скрипта, пройдёт сколько-то времени. Тогда у пользователей с медленным интернетом, задержки будут значительными. Поэтому были придуманы два атрибута defer и async, которые помогут решить эту проблему.


Атрибут defer

Атрибут defer сообщает браузеру, что он должен продолжать обрабатывать страницу и запускать скрипт, только после готовности DOM-дерева. Скрипты с атрибутом defer никогда не заблокирует страницу. Пример ниже демонстрирует, что допустимо ставить тег скрипт выше элементов страницы, если указан атрибут defer.

<body>
    <head>
        <script defer src="script.js"></script>
    </head>
    <h3>Атрибут defer</h3>
    <p>загружает по порядку расположения.</p>
</body>

Отложенные скрипты с помощью атрибута defer, сохраняют порядок относительно друг друга, как и скрипты без данного атрибута. В теории все ссылки на скрипты с тегом defer можно поместить в тег head, но в реальной жизни так все равно не нужно делать. Например сервис Google PageSpeed на такое будет ругаться и занижать оценку по скорости загрузки сайта.


Атрибут async

Асинхронные скрипты с атрибутом async, не ждут загрузки элементов страницы и не ждут загрузки друг друга. Они абсолютно независимые. Мы не знаем какой из двух скриптов загрузится первым и начнет работать. Чем полезно такое на первый взгляд непредсказуемое поведение скрипта? Дело в том, что иногда мы будем подключать различные сторонние скрипты, которые не особо привязаны к DOM-структуре. Например сторонним скриптам, таким как метрикам и счетчикам главное отловить, что пользователь зашел на сайт.

<body>
    <head>
        <script async src="script.js"></script>
        <script async src="common.js"></script>
    </head>
    <h3>Атрибут async</h3>
    <p>не зависит от DOM-структуры.</p>
</body>

Когда мы используем скрипты с атрибутом async, то мы должны быть абсолютно точно уверены, что этот скрипт не зависит от DOM-структуры. Для него совершенно не важно успела она сформироваться или нет. Кроме того он должен не зависеть от каких-то других скриптов и библиотек.


Итоги

Атрибуты defer и async добавляют гибкости при подключении внешних скриптов к HTML документу. Если мы применяем атрибут async к тегу script, то это означает следующее: Когда браузер дойдет до скрипта, то он не будет ждать пока скрипт загрузится целиком, а продолжит его загрузку в фоновом режиме и продолжит считывание файла дальше. Это может быть актуально например, если тег script подключен между тегами head. Обычно таким образом подключают к сайту счетчики и веб-аналитику.

<!-- Пример подключения Google Analytics -->
<script async src="https://google-analytics.com/analytics.js"></script>

Атрибут defer делает тоже самое, но с одним небольшим исключением. Если на странице есть еще один тег script с атрибутом defer, то браузер обещает нам, что даже несмотря на асинхронную загрузку данного скрипта в фоновом режиме, порядок загрузки скриптов и их выполнение сохранится. Первым загрузится скрипт, который выше расположен на странице, независимо от размера этого скрипта.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.