Атрибут Javascript src против document.write против insertBefore

Question

Каковы плюсы и минусы 3 популярных методов включения сторонних js? Почему уважаемые компании (jQuery, Google, Amazon) используют разные методы? В каких ситуациях имеет смысл использовать каждый из этих методов?

Вариант 1 (jQuery - атрибут src):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Вариант 2 (GA - insertBefore):

<script type="text/javascript">
    var _gaq = _gaq || []; 
    _gaq.push(['_setAccount', 'UA-WHATEVS']);
        (function() { 
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
        })();
</script>

Вариант 3 (Amazon - doc.write):

<script type="text/javascript">
    document.write(unescape('%3Cscript type="text/javascript" src="'+document.location.protocol+'//abc.cloudfront.net/pages/scripts/0000/xxx.js"%3E%3C%2Fscript%3E'))
</script>

Answer 1

Опция 1 - синхронное включение.Этот javascript будет прочитан, проанализирован и выполнен перед любым следующим javascript.

Опция 2 - это асинхронное включение.Он загружается асинхронно и не имеет гарантированного времени по сравнению с другими скриптами на странице.Это имеет преимущество в том, что остальная часть страницы не ожидает ее загрузки или выполнения, но недостатком является то, что любой, кто пытается использовать ее, должен знать, когда она была успешно загружена.Конкретный пример, который вы показываете для варианта 2, относится к Google Analytics, который является автономным и не зависит от чего-либо еще на странице, поэтому имеет смысл быть асинхронным и не заставлять что-либо еще на странице ждать его загрузки.

Опция 3 по-прежнему синхронна (как вариант 1), но немного запутывает включение скрипта, что вводит в заблуждение некоторые фильтры, которые могут пытаться отфильтровать конкретный скрипт.Это также позволяет вам использовать свой собственный javascript, чтобы решить, какие сценарии включать или откуда их включать, но включать их синхронно.Вы также можете использовать свой собственный javascript для манипулирования протоколом (http / https) или доменом, если есть какая-либо причина для этого на странице загрузки.