Document.write vs appendChild - программирование

Есть ли разница в времени загрузки\времени между двумя следующими способами добавления script на страницу?

<script>
document.write('<script src=someScript.js></script>');
</script>

vs this:

<script>
var s=document.createElement('script');
s.src='someScript.js';
document.body.appendChild(s);
</script>

предполагая, что оба они добавлены в том же месте на странице (до закрытия тега body).

Любая информация оценена!

Изменить: Спасибо всем за комментарии и ответы. Я действительно ищу конкретную информацию о различиях во времени загрузки и\или исполнении (если они есть?). Кроме того, я могу разместить оба, пока DOM все еще разбирается. Еще раз спасибо за любые указатели на это!

Ответ 1

Я столкнулся с этим, исследуя то же самое. После некоторого тестирования я пришел к выводу, что да, существует разница major между этими двумя методами. В современных браузерах это не столько время загрузки, сколько последовательность, в которой оцениваются сценарии. Например, если у вас есть следующее:

someScript.js

console.log('2');

index1.htm

<script>
console.log('1');
 var script = document.createElement('script');
 script.src = 'someScript.js';
 document.write(script.outerHTML);
</script>
<script>
console.log('3');
</script>

index2.htm

<script>
console.log('1');
 var script = document.createElement('script');
 script.src = 'someScript.js';
 document.body.appendChild(script);
</script>
<script>
console.log('3');
</script>

Запуск index1.htm на консоли даст вам последовательность "1, 2, 3". Запуск index2.html даст вам последовательность "1, 3, 2". Если запрашиваются внешние скрипты, они будут загружаться впереди динамически запрошенных someScript для обоих методов.

Важно отметить порядок выполнения. Как отметил Джек в комментарии, использование document.write неодобрительно. Это верно, если ваши сценарии не расположены в конце документа html, так как это блокирует рендеринг вашей веб-страницы. Я не уверен, если это все еще так, если ваши сценарии находятся внизу.

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

Ответ 1

Ответ 2