Какой вариант загрузки javascript будет иметь самое незначительное влияние на время загрузки страницы?

Question

Допустим, я размещаю на своем сервере файл javascript на www.website.com/javascripts/application.js, который я хочу загрузить сторонними сайтами.

На сторонних сайтах вы можете просто добавить:

<script src="www.website.com/javascripts/application.js" type="text/javascript"></script>

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

Вместо этого, если на стороннем сайте было что-то вроде

<script type="text/javascript>
  var script = document.createElement('script');
  script.setAttribute('type', 'text/javascript');
  script.setAttribute('src', 'www.website.com/javascripts/application.js');
  document.getElementsByTagName('head').appendChild(script);
</script>

это как-то повлияет на время загрузки страницы? Будет ли он загружать файл javascript асинхронно?

А что, если на сайте был

<script src="www.website.com/javascripts/dynamic_loader.js" type="text/javascript"></script>

, который ссылается на скрипт, который динамически создает тег скрипта, ссылающийся на файл application.js, как в приведенном выше примере?

Какой вариант будет лучшим и почему? Есть ли лучший способ загрузить сторонний javascript, о котором я не знаю?

Answer 1

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

Итак, это действительно зависит от того, чтоскрипт делает.Прекрасным примером чего-то, что может быть успешно загружено асинхронно, является Google Analytics, потому что он на 100% автономен.Ничто другое на странице не зависит от этого.Когда именно он загружается, не имеет никакого значения для отображения страницы.

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

Динамическая загрузка (ваш последний вариант) наиболее полезна, когда вы хотитезагружать модули по требованию (не обязательно, когда страница вообще загружается), когда они действительно необходимы (если вообще когда-либо).