Лучший способ загрузить внешний JavaScript

Последнее обновление Сен 22, 2021

Содержание

Не так давно я наткнулся на данный пост о загрузке JavaScript без блокировки путем создания динамического <script>тега. Когда <script>теги находятся в потоке HTML-документа, браузер должен прекратить рендеринг и дождаться загрузки и выполнения файла сценария, прежде чем продолжить ( пример ). Создание нового <script>тега с помощью JavaScript позволяет избежать этой проблемы, поскольку он выходит за рамки документа, поэтому файл сценария загружается и выполняется без ожидания. Результат: динамическая загрузка файлов JavaScript позволяет вашей странице отображаться быстрее и, следовательно, повышает воспринимаемую производительность.

Лучшая техника

Подумав об этом и поэкспериментировав, я пришел к выводу, что есть только один лучший способ загрузки JavaScript без блокировки:

Создайте два файла JavaScript. Первый содержит только код, необходимый для динамической загрузки JavaScript, второй содержит все остальное, что необходимо для начального уровня интерактивности на странице.
Включите первый файл JavaScript с <script>тегом внизу страницы, прямо внутри </body>.
Создайте второй <script>тег, который вызывает функцию для загрузки второго файла JavaScript и содержит любой дополнительный код инициализации.

Это оно! Там действительно нет необходимости делать что-либо еще. Главное, чтобы у вас было только два JavaScript и сделайте первый как можно меньше. Например, первый файл .js может просто содержать эту функцию:


function loadScript(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

Это небольшой объем кода для загрузки, так что он будет загружаться невероятно быстро (особенно при сжатии).

Фактический код на вашей странице в конечном итоге выглядит так:

Ключом ко всей этой технике является наличие всего двух файлов JavaScript, поэтому второй содержит все, что необходимо для инициализации страницы. Что если вашей странице требуется более двух файлов? Затем вы должны объединить свои файлы во время сборки (используя что-то вроде Sprockets ) или во время выполнения (используя что-то вроде mod_concat или комбинированный обработчик).). Теперь загрузка страницы должна произойти очень быстро, за счет правильной инициализации. У каждого дополнительного HTTP-запроса есть издержки, и вам нужно будет заботиться о последовательности загрузок, чтобы код выполнялся в правильном порядке. Имея всего два файла, вы устраняете большую проблему, касающуюся того, какой файл загружается и выполняется первым, а также исключаете ненужные HTTP-запросы.

Размещение скрипта

Вы заметите, что я упомянул лучшую практику размещения этого кода в конце страницы, прямо внутри закрывающего </body>тега. Это совет, который существует уже некоторое время, и я все еще рекомендую его, даже при использовании этой техники. Причина в том, что вам гарантировано, что все элементы DOM, которые вам могут понадобиться, уже присутствуют на странице. Загрузка ваших сценариев ранее может привести к проблемам с синхронизацией, когда вам нужно будет беспокоиться об использовании window.onloadили о каком-либо другом методе, чтобы определить, когда DOM готов к использованию. Включив этот код внизу страницы, вы можете быть уверены, что DOM готов к работе, и вам больше не придется откладывать инициализацию.

Подставка первого скрипта

Несколько комментаторов правильно указали, что эту технику можно дополнительно оптимизировать, переместив исходную функцию в строку вместо сохранения ее во внешнем файле. Как правило, мне нравится хранить JavaScript вне кода страницы для удобства сопровождения. Я также ожидал, что исходный код JavaScript на странице будет больше, чем просто эта функция по той или иной причине. Если у вас может быть какая-то автоматизация для внедрения этого на вашу страницу в виде встроенного сценария, я полностью за это! Ключевой момент – убедидесь, что первый встроенный скрипт достаточно мал, чтобы производительность во время выполнения не влияла на загрузку страниц.

Пример на YUI 3

YUI 3 разработан вокруг этой самой предпосылки. Вы можете начать с загрузки файла yui.js, а затем использовать встроенный компонент Loader для динамической загрузки остальной части библиотеки YUI. Например:



<script src="http://yui.yahooapis.com/3.0.0b1/build/yui/yui-min.js"

    type="text/javascript"></script>

<script type="text/javascript">

YUI().use("node", function(Y){

    //initialization code

});

</script>

Этот код сначала загружается в исходный файл YUI, затем создает новый экземпляр YUIобъекта и указывает, что компонент «узел» необходим. За кулисами YUI создает URL со всеми зависимостями для «узла», динамически загружает его, а затем вызывает функцию обратного вызова после завершения. Крутая вещь в подходе YUI 3 заключается в том, что вам не нужно беспокоиться о статическом включении URL для JavaScript, просто укажите, какие компоненты вам нужны, и библиотека определит правильный URL для загрузки ( подробности ).

Вывод

Хотя было много исследований о способах загрузки JavaScript без блокировки, на самом деле есть только один способ, который я бы рекомендовал в качестве лучшей практики. На самом деле не нужно загружать ничего, кроме двух сценариев, чтобы ваш сайт был инициализирован и интерактивен. Сделайте исходный файл JavaScript настолько маленьким, насколько это возможно, а затем динамически загрузите более крупный файл, чтобы избежать блокировки рендеринга страницы. Это самый простой и легкий способ вывести весь JavaScript-код на страницу, не влияя на пользовательский интерфейс.

Источник записи: https://humanwhocodes.com