в чому різниця / перевага / недолік написання сценарію внизу сторінки та написання сценарію на
$(document).ready(function(){});Відповіді:
Дуже мало саме по собі, так чи інакше, DOM буде готовий до того, щоб ви могли оперувати (я нервував з цього приводу, поки не прочитав це від Google ). Якщо ви використовуєте фокус на кінець сторінки, ваш код може бути викликаний щонайменше, щонайменше швидше, але це не матиме значення. Але що ще важливіше, цей вибір стосується того, де ви посилаєте свій JavaScript на сторінку.
Якщо ви включите свій scriptтег до headі покладаєтесь на нього ready, браузер зустріне ваш scriptтег, перш ніж він щось відобразить користувачеві. За звичайного перебігу подій браузер зупиняється, і завантажує ваш сценарій, запускає інтерпретатор JavaScript і передає йому сценарій, потім чекає, поки інтерпретатор обробляє сценарій (а потім jQuery спостерігає різними способами щоб DOM був готовий). (Я кажу "звичайним шляхом", оскільки деякі браузери підтримують атрибути asyncабоdefer в scriptтегах.)
Якщо ви scriptдодаєте свій тег в кінець bodyелемента, браузер не робить цього всього, поки ваша сторінка в основному вже не відображається користувачеві. Це покращує сприйнятий час завантаження вашої сторінки.
Отже, щоб отримати найкращий сприйманий час завантаження, розмістіть свій сценарій внизу сторінки. (Це також керівництво від людей Yahoo .) І якщо ви збираєтеся це робити, тоді немає необхідності використовувати ready, хоча, звичайно, ви могли б, якщо вам сподобалося.
Однак за це є ціна: Ви повинні бути впевнені, що речі, які користувач може бачити, готові до взаємодії. Переміщуючи час завантаження після того, як сторінка в основному відображається, ви збільшуєте можливість того, що користувач почне взаємодіяти зі сторінкою до того, як ваш скрипт буде завантажений. Це один із контраргументів для розміщення scriptтегу в кінці. Часто це не проблема, але вам потрібно заглянути на свою сторінку, щоб перевірити, чи є вона, і якщо так, то як ви хочете з цим боротися. (Ви можете ввести невеликий вбудований script елемент, headякий встановлює обробник подій у цілому документі, щоб впоратися з цим. Таким чином, ви отримуєте покращений час завантаження, але якщо вони намагаються зробити щось занадто рано, ви можете або сказати їм це, або, краще, поставити в чергу те, що вони хотіли зробити, і зробити це, коли ваш повний сценарій буде готовий.)
Ваша сторінка буде завантажуватися повільніше, розсіюючи $(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