JQuery: зачем использовать document.ready, если внешний JS внизу страницы?

Я включаю все мои JS в качестве внешних файлов, которые загружаются в самом низу страницы. Внутри этих файлов у меня есть несколько методов, определенных так, которые я вызываю из готового события:

var SomeNamepsace = {};

SomeNamepsace.firstMethod = function () {
    // do something
};

SomeNamepsace.secondMethod = function () {
    // do something else
};

$(document).ready(function () {
    SomeNamepsace.firstMethod();
    SomeNamepsace.secondMethod();
});

Однако, когда я удаляю готовую функцию и вызываю методы прямо, все работает одинаково, но выполняется значительно быстрее - почти целая секунда быстрее в довольно базовом файле! Поскольку документ должен быть загружен в этот момент (поскольку вся разметка предшествует тегам script), есть ли веские основания по-прежнему использовать готовое событие?

Ответы

Ответ 1

Отличный вопрос.

Существует некоторая путаница вокруг всего совета "put scripts the bottom of your page" и какие проблемы он пытается решить. По этому вопросу я не буду говорить о том, влияет ли установка сценариев в нижней части страницы на производительность/загрузку или нет. Я только расскажу о том, нужно ли вам $(document).ready, если вы также разместите скрипты в нижней части страницы.

Я предполагаю, что вы ссылаетесь на DOM в тех функциях, которые вы сразу вызываете в своих скриптах (что-то простое, как document или document.getElementById). Я также предполагаю, что вы спрашиваете только об этих файлах [DOM-referencing]. IOW, скрипты библиотек или сценарии, которые требуется вашему коду ссылок DOM (например, jQuery), нужно разместить ранее на странице.

Чтобы ответить на ваш вопрос: если вы включаете свои сценарии для DOM-ссылок в нижней части страницы, нет, вам не нужно $(document).ready.

Объяснение: без помощи "onload" -средственных реализаций, таких как $(document).ready, правило: любой код, который взаимодействует с элементами DOM внутри страницы, должен быть помещен/включен ниже страницы, чем элементы, которые она ссылается. Самое простое - разместить этот код до закрытия </body>. См. здесь и здесь. Он также работает вокруг IE, страшного "Ошибка операции" .

Сказав это, это никоим образом не отменяет использование $(document).ready. Ссылка на объект перед его загрузкой - [одна из] наиболее распространенных ошибок, возникающих при запуске в DOM JavaScript (засвидетельствовано слишком много раз для подсчета). Это решение jQuery для проблемы, и это не требует, чтобы вы подумали о том, где этот script будет включен относительно элементов DOM, которые он ссылается. Это огромная победа для разработчиков. Это всего лишь одна вещь, о которой им приходится думать.

Кроме того, часто трудно или непрактично перемещать все сценарии, связанные с DOM, в нижней части страницы (например, любой script, вызывающий вызовы document.write, должен оставаться включенным). В других случаях вы используете фреймворк, который отображает некоторый шаблон или создает куски динамического javascript, внутри которого функции ссылок должны быть включены до js.

Наконец, было "лучше всего" замять весь DOM-ссылочный код на window.onload, однако он был затмлен реализацией $(document).ready для причины документа.

Все это добавляет до $(document).ready как далеко превосходящее, практическое и общее решение проблемы ссылки на элементы DOM слишком рано.