$ (Документ).ready(функция() {}); vs script внизу страницы

какова разница/преимущество/недостаток написания script в нижней части страницы и запись script в

$(document).ready(function(){});

Ответ 1

Очень мало само по себе, в любом случае DOM будет готов для вас работать (я нервничал по этому поводу, пока не прочитал это из Google). Если вы используете трюк конца страницы, ваш код может называться малейшим, малейшим чуть раньше, но ничего не имеет значения. Но что более важно, этот выбор относится к тому, где вы привязываете свой JavaScript к странице.

Если вы включаете тэг script в head и полагаетесь на ready, браузер встречает тэг script, прежде чем он отобразит что-либо пользователю. В обычном ходе событий браузер доходит до паузы и идет и загружает ваш script, запускает интерпретатор JavaScript и передает ему script, а затем ждет, пока интерпретатор обрабатывает script (и то jQuery смотрит по-разному, чтобы DOM был готов). (Я говорю "в обычном ходу вещей", потому что некоторые браузеры поддерживают атрибуты async или defer в тегах script).

Если вы включаете тэг script в конце элемента body, браузер не выполняет все это, пока ваша страница в основном не будет отображаться для пользователя. Это улучшает воспринимаемое время загрузки для вашей страницы.

Чтобы получить наилучшее воспринимаемое время загрузки, поместите ваш script в нижней части страницы. (Это также руководство от людей Yahoo.) И если вы собираетесь это сделать, тогда нет необходимости использовать ready, хотя, конечно, вы могли бы, если хотите.

Там есть цена за это: вы должны быть уверены, что вещи, которые пользователь видит, готовы к взаимодействию. Перемещая время загрузки до того, как страница будет отображаться в основном, вы увеличите вероятность того, что пользователь начнет взаимодействовать со страницей перед загрузкой script. Это один из контр-аргументов для размещения тега script в конце. Часто это не проблема, но вы должны посмотреть на свою страницу, чтобы узнать, есть ли это, и если да, как вы хотите с ней справиться. (Вы можете поместить небольшой элемент inline script в head, который настраивает обработчик событий в документе, чтобы справиться с этим. Таким образом, вы получаете улучшенное время загрузки, но , если они пытаются чтобы сделать что-то слишком рано, вы можете либо сказать им, что, или, лучше, поставить очередь на то, что они хотели сделать, и сделать это, когда ваш полный script готов.)

Ответ 2

Ваша страница будет загружаться медленнее, разбрасывая скрипты $(document).ready() во всей DOM (вместо всех в конце), потому что для этого требуется, чтобы сначала загружался jQuery синхронно.

$ = jQuery. Таким образом, вы не можете использовать $ в своих сценариях без первой загрузки jQuery. Этот подход заставляет вас загружать jQuery рядом с началом страницы, который остановит загрузку страницы, пока jQuery не будет полностью загружен.

Вы не можете async загружать jQuery либо потому, что во многих случаях ваш $(document).ready() script попытается выполнить до того, как jQuery будет полностью загружен асинхронно и вызовет ошибку, потому что снова $ не еще не определен.

Как говорится, есть способ обмануть систему. По существу, установка $ равна функции, которая подталкивает функции $(document).ready() в очередь/массив. Затем в нижней части страницы загрузите jQuery, затем перейдите в очередь и выполните каждый $(document).ready() по одному за раз. Это позволяет отложить jQuery в нижней части страницы, но по-прежнему использовать $ над ним в DOM. Я лично не тестировал, как хорошо это работает, но теория звучит. Идея была вокруг на некоторое время, но я очень, очень редко видел, что она реализована. Но это кажется отличной идеей:

http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax