В чем разница между этими двумя фрагментами кода JavaScript?

Question

Я знаю, что они делают то же самое более или менее, это просто подход к тому, как это делается.

<script src="example.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
function OptanonWrapper() { }
</script>

---

<script type="text/javascript">

var x = x || [];
  (function(){
        setTimeout(function(){
      var d = document, f = d.getElementsByTagName('script')[0], s = d.createElement('script'); s.type = 'text/javascript';

      s.async = true; s.src = "example.js"; f.parentNode.insertBefore(s,f);

    }, 1);

  })();

</script>

-

Я неродной JS программист, поэтому ваша помощь будет принята с благодарностью.

Answer 1

В первом примере второй тег <script> будет выполняться только после завершения загрузки example.js.

Во втором примере тег <script>, загружающий example.js, создается динамически ивставляется в документ (без необходимости обходным путем, если я могу добавить свои два цента), и он начинает загружаться асинхронно, то есть не задерживает выполнение каких-либо тегов <script> после него.Тот же эффект может быть достигнут следующим образом:

<script src="example.js" async></script>
<script>
    function OptanonWrapper() { }
</script>

Подробнее об элементе <script> в MDN:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script