Выполнение кода непосредственно перед </body> вместо ожидания события DOM ready / DOMcontentloaded - PullRequest
1 голос
/ 22 декабря 2011

Есть ли какой-либо недостаток для помещения кода (который будет взаимодействовать с DOM, добавления прослушивателей событий и т. Д.) Непосредственно перед закрывающим тегом </body>?

<!-- all the HTML comes before this -->
(function() {
  do_stuff_with_the_DOM();
})();
</body>

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

Мой проект не использует jQuery или какой-либо другой инструментарий, и я знаю об альтернативах, которые имитируют функциональность $(document).ready() jQuery. Мне действительно нужно использовать один из них? (Само собой разумеется, но я хочу запустить код до window.load.)

Обратите внимание, что код, который я хочу запустить (do_stuff_with_the_DOM() в приведенном выше примере), будет определен во внешнем файле сценария, если это имеет значение.

Ответы [ 2 ]

0 голосов
/ 22 декабря 2011

Вы должны поместить свой код JavaScript в то место, которое наиболее разумно для того, что ему нужно делать.В большинстве случаев вам нужно, чтобы ваши js прикрепляли события к объектам DOM, что трудно представить, если эти объекты DOM не существуют во время работы js.Поэтому поместить его в конец HTML - разумный, простой и общий подход.Это лучшее? Это спорно.

1004 * Другой подход, чтобы прикрепить JavaScript для различных событий, различные браузеры огонь, когда DOM полностью загружен.В этом нет ничего плохого, хотя недоброжелателям не нравится, что это часто делается так, что требуется дополнительный блокирующий HTTP-запрос в элементе head.

Событие Делегирование предлагаетТретий подход, который позволяет вам прикреплять события к родительским элементам (таким как body) очень рано, и при наличии соответствующих дочерних событий события будут запускаться, как если бы они были присоединены к этим элементам все время.Это очень крутой подход с теоретически наилучшей производительностью при ранней загрузке из всех вышеперечисленных, но имеет недостатки, заключающиеся в том, что не все события всплывают до самого верха, как вы могли ожидать, и что этособлазняет вас разделить ваш JavaScript на несколько частей, что может нарушить разделение контента и поведения.

0 голосов
/ 22 декабря 2011

В общем

Поставка кода перед </body> всегда должна быть целью.

Настоятельно рекомендуется, так как загрузка сценариев (при запросе внешних файлов JavaScript) блокирует параллельную загрузку (т. Е. Во время загрузки сценария ничего другого - будь то другой сценарий или изображение, например) - можно загрузить по адресув то же время).

Единственный раз, когда у вас возникнет проблема с этим, это что-то вроде плохой системы CMS, где вам нужно иметь jQuery на месте в <head>, чтобы некоторые из еескрипты для работы.

Использование встроенного JavaScript

  1. Добавление встроенного JavaScript (или встроенного кода CSS) на страницу обычно считается плохой практикой как,во-первых, это объединение проблем (т. е. у вас больше нет истинного разделения между HTML / CSS / JS).

  2. Я не могу думать о негативной проблеме производительности, если у вас есть все вашивстроенный код - действительно, Google использует это в качестве практики (они загружают весь свой JavaScript в небольшом комментарии (чтобы он не анализировался), а затем eval() элементы этого двоичного объекта текста«как и когда им нужно.

  3. Я хотел бы отметить, однако, что в настоящее время маловероятно, что у вас будет много страниц, которые в какой-то момент не имеют требования по крайней мере для однойвнешний файл JavaScript (будь то JQuery, Mootools, Underscore of Backbone).В этом случае, поскольку у вас всегда будет хотя бы один внешний файл (если вы не собираетесь на маршрут Google), вы можете также поместить внешние ссылки и встроенный код вместе ... внизу.Создание согласованности.

Ссылки

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