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

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

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

<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>

Вот мои вопросы:

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

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

  • Что именно означает "когда загружается DOM"? Что все HTML/JS было загружено и проанализировано браузером? Или просто HTML?

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

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

Ответы

Ответ 1

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

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

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

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

Ответ 2

  • Все script включают в себя, чтобы они отображались в html, они загружаются, когда HTML обрабатывается.
  • Это означает, что все объекты dom были загружены, и все они включают скрипты и css. (Возможно, изображения еще не созданы).
  • см. 2.
  • $(document).ready() получает вызов только после загрузки всех скриптов и dom-объектов, все должно быть хорошо.

Ответ 3

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

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

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

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