Улучшенная загрузка JavaScript сценариев c помощью атрибутов defer и async. Часть 1
При добавлении скриптов на HTML-страницу необходимо проявить бдительность, чтобы не сделать загрузку страницы чрезмерно долгой. И в зависимости от того, где и как вы добавляете скрипты на HTML-странице, меняется общее время загрузки этой самой страницы.
JavaScript сценарий обычно включается в страницу таким образом:
<script src="script.js"></script>
и всякий раз, когда парсер HTML находит эту строку, он будет делать запрос на извлечение этого сценария, затем он выполнит этот скрипт.
Как только этот процесс будет завершен, синтаксический анализ возобновиться, для того, чтобы остальная часть HTML кода могла бы быть проанализирована.
Уже можно предположить, что эта операция может оказать огромное влияние на время загрузки страницы, особенно если необходимо загрузить несколько сценариев.
Если загрузка или выполнение сценария занимает немного больше времени, чем ожидалось, например, если сеть медленная или, если посетитель сайта пользуется мобильным устройством, чья пропускная способность ограничена, он, скорее всего, увидит пустую страницу, пока скрипт не будет загружен и выполнен.
Расположение сценария на странице имеет значение
При первоначальном знакомстве с HTML, вас учат, что теги script находятся в теге head:
<html>
<head>
<title>Title</title>
<script src="script.js"></script>
</head>
<body>
...
</body>
</html>
Как я уже сказал ранее, когда парсер браузера увидит строку с тегом script , он отправит запрос на извлечение данного сценария, который затем выполнит. После выполнения этой задачи, парсер продолжит анализировать оставшееся тело документа.
В таком положении вещей нет ничего хорошего, так как на скорость загрузки и отображения страницы значительное влияние оказывают задержки в обработке сценариев. Популярное решение этой проблемы - поместить тег script в нижнюю часть страницы непосредственно перед закрывающим тегом body.
Таким образом, сценарий загружается и выполняется после того, как все элементы страницы уже загружены и разобраны, что существенно влияет на скорость обработки всей страницы.
Помещение тега script в конец тела документа является наиболее оптимальным решением, в частности, в том случае, если вам нужно поддерживать старые браузеры, которые не поддерживают относительно новые атрибуты HTML: async и defer.
На этом пока все, а в следующей статье я продолжу рассказывать про async и defer в JavaScript.
-
Создано 02.08.2018 11:27:06
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.