загрузка и выполнение порядка скриптов

Question

загрузка и выполнение порядка скриптов

существует так много различных способов включить JavaScript в html-страницу. Я знаю о следующих вариантах:

встроенный код или загружается из внешнего URI

включено в или tag [1,2]

не имея ни одного,defer или

247 2

javascript load-order

2 ответов:

Comments

Ничего не найдено.

jfriend00 · Accepted Answer · 2016-03-24 11:04:04

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

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

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

когда тег сценария вставляется динамически, как выполнение порядок поведения будет зависеть от браузера. Вы можете увидеть, как Firefox ведет себя в этой статье. В двух словах, более новые версии Firefox по умолчанию динамически добавляют тег сценария в async, если тег сценария не был установлен иначе.

тег script с async может быть запущен, как только он будет загружен. Фактически, браузер может приостановить парсер от того, что он еще делал, и запустить этот скрипт. Таким образом, он действительно может работать практически в любое время. Если скрипт был кэширован, он может работать почти сразу. Если скрипт занимает некоторое время для загрузки, он может выполняться после завершения работы парсера. Единственное, что нужно помнить с async Это то, что он может работать в любое время и что время не предсказуемо.

тег script с defer ждет, пока весь парсер не будет выполнен, а затем запускает все скрипты, помеченные defer в том порядке, в котором они были встречены. Это позволяет отметить несколько сценариев, которые зависят друг от друга как defer. Они будут отложено до тех пор, пока не будет выполнен парсер документов, но они будут выполняться в том порядке, в котором они были обнаружены, сохраняя свои зависимости. Я думаю о defer как сценарии отбрасываются в очередь, которая будет обработана после завершения синтаксического анализатора. Технически браузер может загружать скрипты в фоновом режиме в любое время, но они не будут выполнять или блокировать парсер до тех пор, пока парсер не выполнит разбор страницы и разбор и запуск любых встроенных скриптов, которые не помечены как отложенные или асинхронно.

вот цитата из этой статьи:

скрипт-вставленные скрипты выполняются асинхронно в IE и WebKit, но синхронно в Opera и pre-4.0 Firefox.

соответствующая часть спецификации HTML5 (для новых совместимых браузеров) является здесь. Там много написано об асинхронном поведении. Очевидно, что эта спецификация не применяется к более старым браузерам (или браузерам, подтверждающим mal), чье поведение вы, вероятно, нужно проверить, чтобы определить.

цитата из спецификации HTML5:

затем, первый из следующих вариантов, который описывает ситуацию необходимо следовать:

если элемент имеет атрибут src, и элемент задержки, атрибут, и элемент был помечен как "parser-inserted", и элемент не имеет асинхронного атрибута Элемент должен быть добавлен в конце списка скриптов, которые будут выполняться когда документ завершил синтаксический анализ, связанный с документом анализатора, который созданный элемент.

задача, которую источник сетевой задачи помещает в очередь задач один раз алгоритм выборки завершен должен установить элемент " готов к быть синтаксическим анализатором-выполняется " флаг. Парсер будет обрабатывать выполнение скрипта.

если элемент имеет атрибут src, и элемент был помечен как "парсер-вставлен", так и элемента нет есть асинхронный атрибут Элемент представляет собой ожидающий синтаксический анализ-блокирующий скрипт документа синтаксический анализатор, который создал элемент. (Может быть только один такой сценарий для каждого документа одновременно.)

задача, которую источник сетевой задачи помещает в очередь задач один раз алгоритм выборки завершен должен установить элемент " готов к быть синтаксическим анализатором-выполняется " флаг. Парсер будет обрабатывать выполнение скрипта.

если элемент не есть атрибут src, и элемент помечается как "parser-inserted", а документ парсера HTML или Синтаксический анализатор XML, который создал элемент script, имеет таблицу стилей, которая блокировка скриптов элемент-это ожидающий синтаксического анализа блокирующий скрипт документ синтаксического анализатора, который создал элемент. (Там может только будьте одним таким скриптом для каждого документа за раз.)

установите флаг элемента "ready to be parser-executed". Парсер будет ручка выполнении сценарий.

если элемент имеет атрибут src, не имеет атрибута async, и не имеет установленного флага "force-async" элемент должен быть добавлен до конца списка скриптов, которые будут выполняться по порядку в ближайшее время насколько это возможно связано с документом элемента скрипта на время запуска алгоритма подготовки сценария.

задача, которую источник сетевой задачи помещает в очередь задач один раз выборка алгоритм выполнил должен выполнить следующие действия:

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

выполнение: выполнить блок скрипта, соответствующий первому скрипту элемент в этом списке скриптов, которые будут выполняться по порядку, как только вероятный.

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

если это список скриптов, которые выполняются по порядку как можно скорее по-прежнему не пуст и первая запись уже отмечена как готово, затем вернитесь к шагу с надписью выполнение.

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

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

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

Niet the Dark Absol · Accepted Answer · 2012-01-25 03:42:27

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

чтобы проверить этот факт:
// file: test.php
sleep(10);
die("alert('Done!');");

// HTML file:
<script type="text/javascript" src="test.php"></script>
динамически добавляемые скрипты выполняются, как только они добавляются в документ.

чтобы проверить этот факт:
<!DOCTYPE HTML>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <script type="text/javascript">
        var s = document.createElement('script');
        s.type = "text/javascript";
        s.src = "link.js"; // file contains alert("hello!");
        document.body.appendChild(s);
        alert("appended");
    </script>
    <script type="text/javascript">
        alert("final");
    </script>
</body>
</html>
порядок предупреждений "прилагается" - > " привет!"- >"финал"

если в скрипте вы пытаетесь получить доступ к элемент, который еще не достигнут (например: <script>do something with #blah</script><div id="blah"></div>) затем вы получите сообщение об ошибке.

в целом, да, вы можете включить внешние скрипты, а затем получить доступ к их функциям и переменным, но только если вы выходите из текущего <script> - тег и начать новую.