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

Question

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

var SomeNamepsace = {};

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

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

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

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

Answer 1

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

Существует некоторая путаница в отношении всего совета "поместите сценарии внизу вашей страницы" и какие проблемы он пытается решить. На этот вопрос я не буду говорить о том, влияет ли размещение сценариев внизу страницы на производительность / время загрузки или нет. Я только собираюсь поговорить о том, нужно ли вам $(document).ready , если вы также поместите сценарии внизу страницы .

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

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

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

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

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

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

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