Document.createElement('script') vs <script src="">

Почему именно сервисы, такие как Google и Facebook, используют document.createElement('script') вместо <script>?

Фрагмент Google Analytics:

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

может быть записано как просто:

<script src="//www.google-analytics.com/ga.js" type="text/javascript"></script>

и Facebook, как кнопка:

<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=xxx";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

можно упростить как просто:

<script src="//connect.facebook.net/en_GB/all.js#xfbml=1&appId=xxx"></script>

Я знаю, что в них играется безопасно, но кроме этого я не понимаю, почему мы не должны использовать HTML5?

Ответ 1

<script src=...> блокирует браузер, а document.createElement('script') загружает JavaScript асинхронно; это главная причина.

Тег <script src=...> блокирует браузер от отображения остальной части страницы до загрузки и выполнения script. Это гарантирует, что скрипты выполняются в правильном порядке, а любой document.write() в этом script работает как ожидалось. Однако это создает для пользователя время ожидания просмотра.

При загрузке script асинхронно браузер может загрузить script, не блокируя отображение страницы. Это значительно улучшает возможности просмотра.

Чтобы загрузить сценарии асинхронно, можно использовать разметку HTML:

<script src="..." async defer></script>

Атрибут async был введен в HTML5, а defer атрибут может быть добавлен в качестве резервной копии для более старых версий IE. В этом документе описывается работа атрибута async и defer.

В качестве альтернативы можно использовать JavaScript для создания тега script:

var s = document.createElement('script');
s.src = "...";
document.getElementsByTagName("head")[0].appendChild(s);

Созданные JavaScript теги script работают в большинстве браузеров, даже если они не понимают атрибут async или .async = true.

О безрезультатных URI (//example.com/script.js): безрисковые URI, похоже, работают почти везде (см. этот вопрос).

Пример Google Analytics: и старый, и новый код используют JavaScript для обнаружения протокола, затем загружают http://www. или https://ssl., что невозможно с помощью разметки HTML.

Ответ 2

В дополнение к Салману. Отличная точка относительно отложенной загрузки. Этот метод используется, когда статическое решение не будет работать.

Я видел, как он использовался, когда кеширование является проблемой (к URL-адресу добавлен уникальный хэш времени)
В случае ссылки google, показанной выше, SSL может быть динамически включен.
В коде facebook он проверяет, существует ли script (это может избежать ошибок, когда один и тот же script загружается дважды).

Могут быть и другие причины. Все они связаны с необходимостью динамического решения.

Ответ 3

да, который может быть записан в теге script, но приведенные вами примеры - это те, где веб-сайт предоставляет пользователю некоторый блок кода, который они должны скопировать в своих веб-сайтах

поэтому инъекция лучше, потому что таким образом сайт, как Google и Facebook,

1. Если вы видите в примере googles, который вы предоставили, он динамически обнаруживает http или https.

2. Таким образом, веб-сайты могут проверить, существует ли тот же script, а затем выберите, чтобы не загружать его снова, как это делается в примере с facebooks.

3. иметь больший контроль над тем, что вводится. поскольку script, который вводится, может быть изменен динамически, без необходимости в изменении URL-адреса script, и это необходимо, поскольку многие браузеры просто хранят скрипты в кеше

4. Таким образом, эти веб-сайты сохраняют свои коды и менее подвержены помехам пользователей.