Какая разница в использовании нескольких блоков скриптов на веб-странице?

Question

Редактировать: Как Эндрю Мур указал, что этот вопрос является дубликатом Два отдельных тега скрипта для Google Analytics? Так что этот вопрос следует удалить, чтобы избежать беспорядочного переполнения стека, еслистоит сохранить этот, поскольку он, вероятно, будет отображаться в несколько разных поисках.

Какая разница, если использовать более одного блока сценариев на веб-странице?Я вставил в стандартный код для включения 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 type="text/javascript">
    try{
        var pageTracker = _gat._getTracker("UA-xxxxxx-x");
        pageTracker._trackPageview();
    } catch(err) {}
</script>

Answer 1

Теги

<script> выполняются последовательно. Блок <script> не может быть выполнен, если предыдущий не завершен.

Первый тег <script> отвечает за создание тега Google <script>, который будет загружать внешние js. После завершения первого <script> DOM выглядит следующим образом:

<script></script> <!-- First Script Tag -->
<script></script> <!-- Google Injected Script -->
<script></script> <!-- Second Script Tag -->

Это гарантирует, что второй тег <script> не будет выполняться, пока не будет завершена загрузка .js. Если бы первое и второе <script> были бы объединены, это привело бы к тому, что переменная _gat не была определена (поскольку внедренный Google скрипт не начнет загружаться, пока не выполнится первый скрипт).

Answer 2

Второй <script> содержит код, который зависит от google-analytics.com/ga.js загрузки.

Неотложенные сценарии выполняются в том порядке, в котором они существуют в DOM.

Первый <script> внедряет новый <script> после себя (с src, указывающим на ga.js в google), который немедленно загружается и выполняется - только после этого запускается второй <script>.

Answer 3

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

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

Answer 4

Если код в первых блоках заканчивается исключением, вторая часть также будет работать.