jQuery: навіщо використовувати document.ready, якщо зовнішній JS знаходиться внизу сторінки?

Я включаю всі свої JS як зовнішні файли, які завантажуються в самому низу сторінки. У цих файлах у мене є декілька методів, визначених таким чином, які я викликаю з події ready:

var SomeNamepsace = {};

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

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

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

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

Чудове запитання.

Існує певна плутанина навколо цілої поради щодо "розміщення сценаріїв внизу сторінки" та того, яку проблему (проблеми) вона намагається вирішити. У цьому питанні я не буду говорити про те, впливає сценарій внизу сторінки на вплив на продуктивність / час завантаження чи ні. Я буду говорити лише про те, чи потрібно, $(document).ready якщо ви також розміщуєте сценарії внизу сторінки .

Я припускаю, що ви посилаєтесь на DOM у тих функціях, які ви негайно викликаєте у своїх скриптах (все так просто, як documentабо document.getElementById). Я також припускаю, що ви запитуєте лише про ці [посилання на DOM] файли. IOW, сценарії бібліотеки або сценарії, які вимагає ваш код посилання на 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 занадто рано.