На мой взгляд, есть большая разница.
Когда вы вставляете JS внизу тега <body>, вы заставляете страницу загружать эти <script> синхронно (должно произойти сейчас) и последовательно (подряд), поэтому вы замедляете немного вниз по странице, так как вы должны дождаться завершения этих HTTP-вызовов и механизма JS для интерпретации ваших сценариев. Если вы кладете много JS, собранных вместе в нижней части страницы, вы можете тратить время пользователя на сетевые очереди (в старых браузерах только 2 соединения на хост за раз), так как сценарии могут зависеть друг от друга поэтому они должны быть загружены по порядку.
Если вы хотите, чтобы ваша DOM была готова быстрее (обычно это то, что большинство ожидает от любой обработки событий и анимации), вы должны как можно меньше уменьшить размер необходимых сценариев и распараллелить их.
Например, YUI3 имеет небольшое разрешение зависимости и скрипт загрузки, который вы должны последовательно загружать на странице (см. Seed.js YUI3). После этого вы перебираете страницу, собираете зависимости и делаете 1 асинхронный и конвейерный вызов их CDN (или вашим собственным серверам), чтобы получить большой шар JS. После возвращения шара JS ваши сценарии выполняют предоставленные вами обратные вызовы. Вот общая схема:
<script src="seed.js"></script>
<script>
YUI().use('module', function(Y) {
// done when the ball returns and is interpretted
});
</script>
Я не особенно большой поклонник создания ваших сценариев в 1 большой шар (потому что если 1 зависимость меняется, вы должны загрузить и интерпретировать все заново!), Но я фанат конвейерной обработки (комбинирования сценарии) и модель, основанная на событиях.
Когда вы разрешаете асинхронную загрузку на основе событий, вы получаете лучшую производительность, но, возможно, не воспринимаемую производительность (хотя этому можно противодействовать).
Например, части страницы могут не загружаться в течение секунды или двух, и, следовательно, выглядят по-разному (если вы используете JS для воздействия на стиль страницы, что я не советую) или не быть готовым к взаимодействию с пользователем, пока вы (или те, кто размещают ваш сайт) не вернут свои сценарии.
Кроме того, вы должны проделать определенную работу, чтобы ваши <script> имели правильные зависимости для правильного выполнения. Например, если у вас нет jQuery или Prototype, вы не можете успешно вызвать:
<script>
$(function () {
/* do something */
});
</script>
или
<script>
document.observe('dom:loaded', function {
/* do something */
});
</script>
как интерпретатор скажет что-то вроде "Переменная $ undefined". Это может произойти, даже если вы одновременно добавили <script> с DOM , так как я бы поспорил, что jQuery или Prototype больше, чем JS вашего приложения (поэтому запрос на данные занимают больше времени). В любом случае, без каких-либо ограничений вы оставляете это на волю случая.
Итак, выбор действительно за вами. Если вы сможете правильно сегментировать свои зависимости - то есть поместить вещи, которые вам нужны, в начало и лениво загрузить другие вещи позже, это приведет к ускорению общего времени, пока вы не дойдете до готовности DOM.
Однако, если вы используете монолитную библиотеку, такую как jQuery, или пользователь ожидает увидеть что-то, включающее JS-анимацию или стиль сразу , встраивание может быть лучше для вас.