В чем отличие этих способов загрузки javascript?

Question

[anatoly60]

Имеем файл script.js вот такого содержания:

document.getElementById("test").innerHTML = 'test'

и два способа подключения скрипта на странице:
1.
<script src="/script.js"></script>
и
2.

<script>
  var script = document.createElement("script");
  script.src = '/script.js';
  document.getElementsByTagName("head")[0].appendChild(script)
</script>

В чем отличие и для чего используются второй способ?

перед размещением скрипта на странице есть div:
<div id="test">

Будет ли корректно работать getElementById("test") в первом случае? Не возникнет ли такой ситуации что страница еще не загрузилась, а код javascript уже отработал?

Comments

[Евгений Петров]

В том, что... А, какая разница... Вы же всё равно не цените усилия отвечающих.

Answer 1

[Алексей Лебедев]

Скрипт сработает, когда до него дойдет очередь.

Т.е.

<div id="test"></div>
<script src="/script.js"></script>

<div id="test"></div>
<script>
  var script = document.createElement("script");
  script.src = '/script.js';
  document.getElementsByTagName("head")[0].appendChild(script)
</script>

Эквивалентны.
А если поменять div и script местами, то работать не будет.

2-й способ используется, если вам нужно подзагрузить скрипты, после генерации страницы.
Например у вас интернет магазин на ajax.
Пользователь зашел на главную. Вы загрузили, все что ему нужно для просмотра главной.
Пользователь зашел в корзину. Вы загрузили, что ему нужно.

В итоге главная грузится быстрее, поскольку не нужно грузить лишнее.