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