JavaScript: события загрузки DOM, последовательность выполнения и $ (document) .ready () - PullRequest
59 голосов
/ 20 августа 2009

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

Предположим, у меня есть такая структура:

<head>

<script src="jquery.js" type="text/javascript"></script>
<script src="first.js" type="text/javascript"></script>
</head>
<body>
...
<script type="text/javascript" id="middle">
    // some more JS here...
</script>
...
<script src="last.js" type="text/javascript"></script>
</body>

Вот вопросы, которые у меня есть:

  1. В какой последовательности происходят события? Сначала выполняется DOM, затем JS, наоборот или одновременно (или как только файлы JS заканчивают загрузку, без какое-либо отношение к DOM)? Я знаю, что скрипты загружаются по порядку.

  2. Где вписывается $(document).ready()? На вкладке Net в Firebug я вижу событие DOMContentLoaded и событие load. $(document).ready() срабатывает при возникновении события DOMContentLoaded? Не удалось найти какой-либо конкретной информации по этому поводу (все просто упоминают «когда загружен DOM»).

  3. Что именно означает «когда загружен DOM»? Что весь HTML / JS был загружен и проанализирован браузером? Или просто HTML?

  4. Возможен ли следующий сценарий: существует $(document).ready(), который вызывает код в last.js, но запускается до загрузки last.js? Где это будет наиболее вероятно (в first.js или в блоке встроенного кода)? Как я могу предотвратить этот сценарий?

Я хочу понять общую картину того, что происходит, когда и что зависит от того, что (если вообще).

Ответы [ 3 ]

36 голосов
/ 20 августа 2009

Javascript выполняется так, как его видят. Обычно , браузер прекращает синтаксический анализ страницы, как только он видит тег <script>, загружает и запускает скрипт, а затем продолжает работу. Вот почему обычно рекомендуется размещать теги <script> внизу, чтобы у пользователя не было пустой страницы, пока браузер ожидает загрузки сценариев.

Однако, начиная с Firefox 3.5, скрипты загружаются в фоновом режиме, в то время как остальная часть страницы отображается. В необычном сейчас случае, когда сценарий использует document.write или аналогичный, Firefox будет выполнять резервное копирование и перерисовывать при необходимости. Я не думаю, что другие браузеры делают это в данный момент, но я не удивлюсь, если это произойдет, и IE по крайней мере поддерживает атрибут defer в теге <script>, который будет откладывать загрузку скрипта до окончания страница загружена.

DOMContentLoaded именно так: он срабатывает, как только DOM загружен. То есть, как только браузер проанализировал весь HTML и создал его внутреннее дерево. Он НЕ ожидает загрузки изображений, CSS и т. Д. DOM - это все, что вам обычно требуется для запуска любого Javascript, так что приятно не ждать других ресурсов. Однако я считаю, что только Firefox поддерживает DOMContentLoaded; в других браузерах ready() просто прикрепит событие к обычному старому onload.

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

7 голосов
/ 20 августа 2009
  1. Все сценарии включаются в том порядке, в котором они появляются в html, они загружаются при разборе html.
  2. Это означает, что ВСЕ объекты DOM были загружены, и все они включают в себя сценарии и CSS. (Изображения, возможно, еще нет).
  3. см. 2.
  4. $ (document) .ready () получает вызов только после загрузки всех скриптов и объектов dom, с вами все будет в порядке.
4 голосов
/ 20 августа 2009

http://javascript.about.com/od/hintsandtips/a/exeorder.htm должен помочь вам ответить на этот вопрос

в основном: сначала загружаются все данные (html), затем js код в голове / теле, который не находится в функции или не готов или что-то в этом роде, выполняется первым. оттуда это идет о сценариях последовательно

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

so @ 4: вам не нужно предотвращать этот сценарий, потому что first.js всегда читается / выполняется перед last.js

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...