Відповіді:
Усі сценарії повинні бути завантажені останніми
Приблизно у кожному випадку найкраще розмістити всі посилання на сценарії в кінці сторінки, безпосередньо перед цим </body>.
Якщо ви не можете зробити це через проблеми із шаблонами та що-небудь ще, прикрасьте свої теги сценарію deferатрибутом, щоб браузер знав завантажувати ваші сценарії після завантаження HTML:
<script src="my.js" type="text/javascript" defer="defer"></script>Корпусні кромки
Є деякі крайні випадки, однак, де ви можете випробувати сторінку мерехтіння або інші артефакти під час завантаження сторінки , які , як правило , можуть бути вирішені шляхом простого розміщення ваших посилань скрипта JQuery в <head>тезі без в deferатрибуті. Ці випадки включають інтерфейс jQuery та інші доповнення, такі як jCarousel або Treeview, які змінюють DOM як частину своєї функціональності.
Подальші застереження
Є деякі бібліотеки, які потрібно завантажити перед DOM або CSS, наприклад поліфіли. Modernizr - це така бібліотека, яку потрібно помістити в тег заголовка .
<head>. Якщо ваша розмітка залежить від плагіна jQuery, який сортує вміст для вас, немає сенсу розміщувати посилання на плагін у нижній частині сторінки, оскільки ви збираєтеся отримувати прикольну розмітку на своїй веб-сторінці до завантаження плагінів. Правила мають бути дотримані до тих пір, поки вони більше не працюватимуть, і тоді слід порушувати правила.
Проблема, викликана сценаріями, полягає в тому, що вони блокують паралельні завантаження. Специфікація HTTP / 1.1 передбачає, що браузери завантажують не більше двох компонентів паралельно на ім’я хоста. Якщо ви подаєте свої зображення з кількох імен хостів, ви можете отримати більше двох завантажень паралельно. Поки сценарій завантажується, однак браузер не запускатиме жодних інших завантажень, навіть на різних іменах хостів. У деяких ситуаціях перемістити сценарії до низу непросто. Наприклад, якщо скрипт використовує document.write для вставки частини вмісту сторінки, її не можна перемістити нижче. Можуть також виникнути проблеми з визначенням масштабів. У багатьох випадках існують способи вирішити ці ситуації.
Альтернативна пропозиція, яка часто з'являється, - використовувати відкладені сценарії. Атрибут DEFER вказує, що скрипт не містить document.write, і є підказкою для браузерів про те, що вони можуть продовжувати візуалізацію. На жаль, Firefox не підтримує атрибут DEFER. В Internet Explorer сценарій може бути відкладений, але не настільки, наскільки бажано. Якщо сценарій можна відкласти, його також можна перемістити внизу сторінки. Це зробить швидше завантаження веб-сторінок.
EDIT: Firefox підтримує атрибут DEFER з версії 3.6.
Джерела:
Завантажуйте лише jQuery в голову, звичайно, через CDN.
Чому? У деяких сценаріях ви можете включити частковий шаблон (наприклад, фрагмент форми для входу в ajax) із вбудованим кодом jQuery; якщо jQuery завантажується внизу сторінки, ви отримуєте помилку "$ не визначено", добре.
Існують способи вирішити це, звичайно, (наприклад, не вставляти будь-який JS та додавати його до пакета js-внизу), але навіщо втрачати свободу ліниво завантажених js, щоб мати можливість розміщувати залежний від jQuery куди завгодно ? Двигун Javascript не хвилює, де код живе в DOM до тих пір, поки залежать залежності (наприклад, завантаження jQuery).
Для ваших загальних / спільних js-файлів, так, розмістіть їх раніше </body>, але для виключень, де справді просто має сенс технічне обслуговування додатків, щоб вставити залежний від jQuery фрагмент або посилання на файл саме в цей момент у html, зробіть це.
Немає результатів із завантаженням jquery в голову; який браузер на планеті ще не має файлу CDQ jQuery CDN в кеші?
Дуже багато чого ні про що, вставте jQuery в голову і нехай панує ваша js свобода.
2%, скажімо, половина піде до першого завантаження сторінки. Таким чином ви втрачаєте 1%відвідувачів, але потенційно заощаджуєте багато часу та проблем на розробці. Подивіться, чи це має сенс для вашої бізнес-моделі ...
Nimbuz дає дуже хороше пояснення проблеми, але я думаю, що остаточна відповідь залежить від вашої сторінки: що важливіше для користувача швидше - сценарії чи зображення?
Є деякі сторінки, які не мають сенсу без зображень, але мають лише незначні, неістотні сценарії. У цьому випадку є сенс розмістити сценарії внизу, щоб користувач швидше побачив зображення і почав мати сенс сторінки. Інші сторінки покладаються на написання сценаріїв для роботи. У такому випадку краще мати робочу сторінку без зображень, ніж непрацюючу сторінку із зображеннями, тому має сенс розміщувати сценарії вгорі.
Інша річ, яку слід врахувати, - це те, що сценарії зазвичай менше, ніж зображення. Звичайно, це узагальнення, і ви повинні побачити, чи стосується він вашої сторінки. Якщо це зробити, то, для мене, це аргумент для того, щоб ставити їх спочатку як правило (тобто, якщо немає поважних причин зробити інакше), оскільки вони не затримуватимуть зображення настільки, наскільки зображення затримують сценарії. Нарешті, просто набагато простіше мати сценарій вгорі, тому що вам не потрібно турбуватися про те, завантажені вони ще, коли вам потрібно їх використовувати.
Підсумовуючи це, я схильний ставити сценарії вгорі за замовчуванням і вважаю, чи варто переміщувати їх донизу після завершення сторінки. Це оптимізація - і я не хочу робити це передчасно.
Більшість кодів jquery виконується на готовому документі, який все одно не відбувається до кінця сторінки. Крім того, візуалізація сторінок може бути відкладена шляхом розбору / виконання javascript, тому найкраща практика розмістити весь JavaScript у нижній частині сторінки.
Стандартна практика полягає в тому, щоб розмістити всі ваші сценарії внизу сторінки, але я використовую ASP.NET MVC з низкою плагінів jQuery, і я вважаю, що все працює краще, якщо я поміщаю свої сценарії jQuery у <head> розділі головного сторінки.
У моєму випадку є артефакти, які виникають під час завантаження сторінки, якщо сценарії знаходяться внизу сторінки. Я використовую плагін jQuery TreeView, і якщо сценарії не завантажуються на початку, дерево буде виводитись без необхідних класів CSS, накладених на нього плагіном. Таким чином ви отримуєте цей смішний безлад, коли сторінка спочатку завантажується з подальшим правильним відображенням TreeView. Дуже погано виглядає. Якщо розмістити плагіни jQuery у <head>розділі головної сторінки, це усуне цю проблему.
@Html.Action, яка динамічно записує результат у вихідний результат, оскільки мій частковий дає $ is undefinedсенс, що я замість цього повинен використовувати .load ('@ Url.Action') для завантаження часткового. Але це дає фок через додатковий запит. Виходячи з ваших даних, я просто переміщу jquery над RenderBody () на своїй головній сторінці
Хоча майже всі веб-сайти все ще розміщують Jquery та інші javascript на заголовку: D, навіть перевірте stackoverflow.com.
Я також пропоную вам надіти до кінця тег корпусу. Ви можете перевірити час завантаження після розміщення в будь-якому місці. Тег сценарію призупинить вашу веб-сторінку для подальшого завантаження.
а після розміщення javascript у нижньому колонтитулі ви можете отримати незвичний вигляд веб-сторінки, поки вона не завантажить javascript, тому розмістіть css у розділі заголовка.
Безпосередньо перед тим </body>краще місце в відповідно до Yahoo Developer Network «s Best Practices для прискорення вашого веб - сайту посилання , це має сенс.
Найкраще зробити тест на собі.
Для мене jQuery трохи особливий. Можливо, виняток із норми. Існує так багато інших сценаріїв, які покладаються на нього, тому досить важливо, що він завантажується рано, щоб інші сценарії, які з’являються пізніше, працюватимуть за призначенням. Як зауважив хтось, навіть ця сторінка завантажує jQuery у розділ голови.