Скрипты: async, defer
Эффективная загрузка страниц критически важна для производительности веб-приложений. Загрузку JavaScript необходимо тщательно контролировать, чтобы оптимизировать время загрузки и улучшить пользовательский опыт. В этой статье рассматриваются методы асинхронной загрузки скриптов, в частности атрибуты async и defer в тегах <script>. Их правильное применение позволяет управлять процессом загрузки файлов JavaScript, что значительно ускоряет работу вашего сайта.
Понимание атрибута async
Что такое атрибут async?
При добавлении атрибута async к тегу <script> браузер получает инструкцию загружать скрипт асинхронно вместе с остальной частью страницы. Это означает, что скрипт будет загружаться в фоновом режиме, не блокируя отрисовку страницы. Как только скрипт загружен, он выполняется немедленно, что может произойти до того, как весь HTML-документ будет полностью разобран.
Примечание: Атрибуты async и defer работают только с внешними скриптами, у которых указан атрибут src.
Пример кода: использование async
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Async Example</title>
</head>
<body>
<h1>Testing Async</h1>
<script async src="https://example.com/async-script.js"></script>
</body>
</html>Преимущества использования async
- Неблокирующий: Процесс разбора HTML продолжается во время загрузки скрипта.
- Скорость: Может сократить воспринимаемое время загрузки, так как скрипт обрабатывается в фоновом режиме.
Использование атрибута defer
Что такое атрибут defer?
Атрибут defer, используемый в теге <script>, также позволяет загружать скрипт асинхронно. Однако, в отличие от скриптов с атрибутом async, отложенные скрипты выполняются только после того, как HTML-документ будет полностью разобран. Они запускаются после завершения разбора, но до срабатывания события DOMContentLoaded. Это идеально подходит для скриптов, которым требуется доступ ко всему DOM и которые не влияют на структуру документа.
Пример кода: использование defer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Defer Example</title>
</head>
<body>
<h1>Testing Defer</h1>
<script defer src="https://example.com/defer-script.js"></script>
</body>
</html>Преимущества использования defer
- Готовность DOM: Гарантирует, что весь HTML-документ будет разобран перед выполнением.
- Сохранение порядка: Скрипты выполняются в том порядке, в котором они указаны в документе, что критически важно для скриптов, зависящих друг от друга.
Когда использовать async, а когда defer
Выбор между async и defer во многом зависит от ваших конкретных задач:
- Используйте
async, если скрипт не зависит от других скриптов или элементов DOM. - Используйте
deferдля скриптов, которым требуется весь DOM, или когда важен порядок выполнения скриптов.
Практический пример: решения по загрузке скриптов
Рассмотрим сценарий, когда необходимо загрузить библиотеку утилит (например, lodash) и основной файл JavaScript, который зависит от этой библиотеки. Вот как можно решить вопрос загрузки этих скриптов:
<script defer src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>
<script defer src="script.js"></script>В этой конфигурации оба скрипта загружаются асинхронно, но выполнятся только после полной разбора страницы, причем в том порядке, в котором они указаны.
Заключение
Эффективное использование атрибутов async и defer в тегах скриптов имеет решающее значение для современной веб-разработки. Понимание и правильное применение этих атрибутов позволяет разработчикам обеспечить более быструю загрузку страниц и улучшить пользовательский опыт. Асинхронная загрузка скриптов направлена на оптимизацию производительности и создание эффективных веб-приложений, ориентированных на пользователя.
Практика
Для чего используются атрибуты 'async' и 'defer' в JavaScript?