Асинхронная загрузка .js и .css файлов: оптимизация сайта

Быстрый ответ

Чтобы включить асинхронное подключение скриптов в HTML, добавьте атрибут async к тегу <script>:

<script async src="your-script.js"></script>

Это позволит вашим скриптам подключаться без прерывания рендеринга страницы. Если очерёдность выполнения скриптов важна, но необходимо избегать "блокировки", используйте данную JavaScript-функцию:

function loadScriptSequentially(src) {
  var script = document.createElement('script');
  script.src = src;
  script.async = false; // Загрузка осуществляется строго по порядку
  document.head.appendChild(script);
}

loadScriptSequentially('first.js');  // Загрузится в первую очередь
loadScriptSequentially('second.js'); // Затем будет загружен второй

Примечание: Асинхронные скрипты подключаются в случайном порядке. Применяйте указанную функцию в случаях, когда очерёдность выполнения скриптов имеет значение.

Внедрение Promise и современных возможностей

Подключение скриптов через Promise

Для управления асинхронным подключением скриптов вы можете использовать объект Promise, который предоставит более надежное управление процессом:

function loadScript(src) {
  return new Promise((resolve, reject) => { 
    let script = document.createElement('script');
    script.src = src;
    script.onload = () => resolve(script);
    script.onerror = () => reject(new Error(`Ошибочка при загрузке скрипта ${src}`));
    document.head.appendChild(script);
  });
}

loadScript("your-script.js")
  .then(() => console.log("Скрипт успешно загружен!"))
  .catch(err => console.error(err));

Лучшие практики при загрузке скриптов

Подробнее об этом расскажет наш спикер на видео

Правильное расположение скриптов

Располагайте теги <script> перед закрывающим тегом </body>. Это позволит парсеру HTML загружать страницу без прерываний.

Поддержка интерактивности

Ожидайте полной загрузки DOM с помощью события document.ready, чтобы привязать обработчики событий и избежать "race conditions" между загрузкой HTML и исполнением JavaScript.

Использование отложенной загрузки

Для некритичных скриптов используйте отложенную загрузку. Это поможет снизить время инициализации страницы и сэкономить потребляемый трафик. Для этого в современных браузерах используйте IntersectionObserver, а для старых — альтернативные методы.

Бережливость к критическим функциям

Инициализируйте критические функции после события onload, чтобы обеспечить их непрерывную работу.

Обработка проблем и подводных камней

Совместимость сетевых протоколов

Используйте протокольно-относительные URL для подключения скриптов, чтобы обеспечить их совместимость как с HTTP, так и с HTTPS.

Препятствование полной замене

Избегайте полной замены содержимого index.html на контент, загруженный через AJAX. Рассмотрите возможность частичного обновления для более плавного и пользовательского интерфейса.

Контролированное внедрение скриптов

Для точной вставки скриптов используйте методы типа parentNode.insertBefore. Порядок выполнения часто играет важную роль.

Подготовка к публичному развертыванию

Перед публичным развертыванием не забудьте убрать отладочные console.log, чтобы уменьшить общий размер скриптов и уберечься от потенциальных угроз безопасности.

Визуализация

Сравнение подключения скриптов:

Традиционное подключение:
Работа происходит последовательно, но медленно: один за одним.

С асинхронным подключением:
Загрузка начинается одновременно — это быстрее и эффективнее.

При асинхронном подключении:

<script async src='first-builder.js'></script>  <!-- Стартует немедленно -->
<script async src='second-builder.js'></script> <!-- Стартует немедленно -->
<script async src='third-builder.js'></script>  <!-- Стартует немедленно -->

Процесс подключения становится быстрым, продуктивным и гармоничным!

Полезные материалы

1. HTML Standard: Элемент 'script' — официальная спецификация элемента <script> в HTML.
2. MDN Web Docs: Атрибуты async и defer для тегов 'script' — подробное руководство по использованию атрибутов async и defer.
3. Google Developers: Подключение JavaScript с помощью async и defer — рекомендации по оптимизации загрузки страницы с помощью async и defer.
4. W3Schools: JavaScript Async и Defer — обучающие материалы и примеры использования async и defer.
5. Глубокое погружение в асинхронное подключение скриптов — аналитический обзор способов асинхронного подключения скриптов.
6. Скрипты: async, defer — обучающий материал о динамическом подключении скриптов на JavaScript.info.
7. Stack Overflow: Разница между атрибутами 'async' и 'defer' — обсуждение применения async и defer в сообществе разработчиков.