JavaScript: СОБЫТИЯ загрузки DOM, последовательность выполнения и $(документ).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>

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

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

  2. Где $(document).ready() fit in? вписывается в? В сети вкладке Firebug я вижу DOMContentLoaded event and the событие и load event. Is событие. $(document).ready() triggered when the срабатывает при возгорании DOMContentLoaded event fires? Couldn't find any concrete info on this (everyone merely mentions "when the DOM is loaded").? Не удалось найти какой-либо конкретной информации по этому вопросу (каждый просто упоминает ", когда DOM загружается").

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

  4. Возможен ли следующий сценарий: есть $(document).ready() which calls code in , который вызывает код в last.js, but runs before last.js has loaded? Where would it most likely be (in , но работает до last.js загрузился? Где он, скорее всего, будет (в блоке first.js or the inline code block)? или в блоке кода в линии)? Как я могу предотвратить этот сценарий?

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

Ответ на: "JavaScript: СОБЫТИЯ загрузки DOM, последовательность выполнения и $(документ).ready ()"

Количество ответов:3
  1. Все сценарии включает в себя произойдет для того, чтобы они появляются в HTML, они загружаются в качестве HTML разбирается.
  2. Это означает, что все объекты дом были загружены, и все включают скрипты и CSS. (Изображения, может быть, еще нет).
  3. см. 2.
  4. $(документ).Ready () только получает вызов, как только все скрипты и дом объектов загружаются, вы должны быть в порядке.
код в голове / теле, который не находится в функции или готов или что-то подобное выполняется в первую очередь. оттуда он идет о сценариях последовательно

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

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

сначала загружаются все данные (HTML), затем js

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

в основном:

Javascript выполняется, как видно. Обычно , браузер останавливается разбор страницы, как только он видит <script> tag, downloads and runs the script, and then keeps going. This is why it's commonly advised to put тег, загрузок и запускает сценарий, а затем продолжает идти. Вот почему обычно рекомендуется поставить <script> tags at the bottom: so the user doesn't have a blank page while the browser waits for the scripts to download. теги в нижней части: так что пользователь не имеет пустой страницы в то время как браузер ждет скрипты для загрузки.

Однако, начиная с Firefox 3.5, скрипты загружаются в фоновом режиме, в то время как остальная часть страницы отображается. В настоящее время необычное событие, что сценарий использует document.write or similar, Firefox will back up and redraw as necessary. I don't think other browsers do this at the moment, but I wouldn't be surprised if it were forthcoming, and IE at least supports a или аналогичный, Firefox будет резервное время и перерисовать по мере необходимости. Я не думаю, что другие браузеры делают это на данный момент, но я не удивлюсь, если он был предстоящим, и IE по крайней мере поддерживает defer attribute in the атрибут в <script> tag that will defer loading the script until after the page is loaded. тег, который будет откладывать загрузку скрипта до тех пор, пока страница загружается.

DOMContentLoaded is exactly that: it fires as soon as the DOM is loaded. That is, as soon as the browser has parsed all of the HTML and created a tree of it internally. It does NOT wait for images, CSS, etc. to load. The DOM is all you usually need to run whatever Javascript you want, so it's nice to not have to wait for other resources. However, I believe only Firefox supports именно это: он стреляет, как только ДОМ загружается. То есть, как только браузер разобрал все HTML и создал дерево его внутренне. Он не ждет изображения, CSS и т.д. для загрузки. DOM это все, что вам обычно нужно для запуска любого Javascript вы хотите, так что приятно не придется ждать других ресурсов. Тем не менее, я считаю, только Firefox поддерживает DOMContentLoaded; in other browsers, ; в других браузерах, ready() will just attach an event to regular old будет просто прикрепить событие к регулярным старые onload. .

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