Техники асинхронной загрузки скриптов

Многие веб-приложения полагаются на загрузку нескольких скриптов и файлов CSS для обеспечения расширенной функциональности. Однако синхронная загрузка может существенно замедлить рендеринг страницы. Чтобы решить эту проблему, существует несколько методов асинхронной загрузки этих ресурсов.

Загрузка скриптов с асинхронным атрибутом

Один из подходов — использовать атрибут async в теге скрипта:

Этот атрибут сигнализирует браузеру, что скрипт может быть выполнен без блокировки загрузки других ресурсов. Однако важно отметить, что сценарии с зависимостями могут по-прежнему вызывать проблемы при асинхронной загрузке.

Использование пользовательских функций

В приведенном примере пользовательская функция importScripts() используется для загрузки нескольких сценарии и таблицы стилей асинхронно. Однако в коде отсутствует механизм обратного вызова, который бы гарантировал, что все ресурсы будут загружены до того, как страница станет интерактивной.

Использование метода $.getScript JQuery

Метод $.getScript() JQuery обеспечивает краткое описание способ загрузки скриптов асинхронно:

$.getScript('js/jquery-ui-1.8.16.custom.min.js', successCallback);

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

Загрузка на основе обещаний

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

function loadScript(src) {
    return new Promise(function (resolve, reject) {
        var s;
        s = document.createElement('script');
        s.src = src;
        s.onload = resolve;
        s.onerror = reject;
        document.head.appendChild(s);
    });
}

Эта функция позволяет обрабатывать сценарии успешной и неудачной загрузки.

Соображения

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