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

Ответы:

143

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

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

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

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

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

TJ Crowder
источник
17
+1. Еще один способ справиться с взаимодействием до загрузки js - заставить страницу работать без javascript для начала. Убедитесь, что все ссылки работают и т. Д., Хотя они, конечно, вызовут перезагрузку страницы. Затем перехватите ссылки и другие вещи с помощью js и добавьте свой ajax или другие навороты :)
Адриан Шмидт
1
Как бы вы справились с постановкой действия в очередь? Есть ли шаблон проектирования или какое-то «общее решение», которое я могу найти по этому поводу?
HC_ 08
@HC_: Что вы имеете в виду под «постановкой в ​​очередь»?
TJ Crowder
@TJCrowder Из последнего предложения вашего ответа: «или, лучше, поставьте в очередь то, что они хотели сделать, и сделайте это, когда ваш полный сценарий будет готов». Мне просто интересно, есть ли «оптимальные» способы сделать это, поскольку я уверен, что смогу придумать «какой-то» способ сделать это, но я уверен, что это было бы ... осуждено, если бы кто-нибудь еще посмотрел, какой код задействован.
HC_ 08
2
@HC_: Я никогда не чувствовал необходимости в этом и не знаю какого-либо конкретного стандарта для этого. И пять лет спустя мне кажется, что лучше было бы вместо этого просто использовать «Извините, загрузка, одна секунда ..». (Хотя, если что- то так медленно загружается, у вас более серьезная проблема.) Если я вижу что-то, что, по моему мнению, можно щелкнуть, и щелкаю по нему, но ничего не происходит, только богу известно, что я буду щелкать дальше. Если вы поставите их в очередь, а затем воспроизведете, когда будете готовы, это может быть ... не идеально.
TJ Crowder
3

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

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

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

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

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

Джейк Уилсон
источник