Нещодавно я читав маніфест Yahoo Best Practices для прискорення роботи вашого веб-сайту . Вони рекомендують розміщувати включення JavaScript у нижній частині HTML-коду, коли це можливо.
Але де саме і коли?
Чи слід ставити його до закриття </html>чи після? І перш за все, коли ми все-таки повинні помістити це в <head>розділ?
Відповіді:
Є дві можливості для справді ненав’язливих сценаріїв:
</body></html>)Другий може бути швидшим, оскільки оригінальне дослідження Yahoo показало, що деякі браузери намагаються завантажувати файли скриптів, коли вони натискають тег скрипта, і тому не завантажують решту сторінки, поки не закінчать. Однак, якщо у вашому скрипті є частина "готовий", яку потрібно виконати, як тільки DOM буде готовий, можливо, вам доведеться мати її в голові. Іншим питанням є макет - якщо ваш сценарій збирається змінити макет сторінки, який ви хочете завантажити якомога раніше, щоб ваша сторінка не витрачала багато часу на перемальовування перед вашими користувачами.
Якщо зовнішній сайт сценарію знаходиться в іншому домені (наприклад, зовнішні віджети), можливо, варто поставити його внизу, щоб уникнути затримки завантаження сторінки.
А щодо будь-яких проблем із продуктивністю виконуйте власні тести - те, що може бути правдою одночасно, коли проводиться дослідження, може змінитися залежно від ваших локальних налаштувань або змін у браузерах.
Це ніколи не буває настільки вирізаним і сухим - Yahoo рекомендує розміщувати сценарії безпосередньо перед закриваючим </body>тегом, що створить ілюзію швидшого завантаження сторінки на порожній кеш (оскільки сценарії не блокують завантаження решти документа). Однак якщо у вас є якийсь код, який ви хочете запустити під час завантаження сторінки, він почне виконуватися лише після завантаження всієї сторінки. Якщо ви помістите сценарії в<head> тег, вони почнуть виконуватися раніше - так що в грунтованому кеші сторінка фактично швидше завантажується.
Крім того, привілей розміщувати скрипти внизу сторінки не завжди доступний. Якщо вам потрібно включити в свої перегляди вбудовані сценарії, які залежать від бібліотеки або якогось іншого коду JavaScript, який завантажувався раніше, ви повинні завантажити ці залежності в<head> тег.
Загалом, рекомендації Yahoo цікаві, але не завжди застосовні, і їх слід розглядати в кожному конкретному випадку.
<script>теги не означають нав'язливого javascript.
<script>теги окремі від розмітки і можуть використовуватися з кодом, що покращує інтерфейс, але не є обов’язковим. Тож у вбудованих <script>тегах немає нічого настирливого .
<script>теги для кодування цих значень у змінні javascript, для використання, можливо, з вбудоване редагування або інша подібна поведінка.
Як вже говорили інші, розмістіть його перед закриваючими тегами html тіла .
Днями у нас були численні дзвінки від клієнтів, які скаржились на те, що їх сайти були надзвичайно повільними. Ми відвідали їх місцево і виявили, що їм потрібно 20-30 секунд, щоб завантажити одну сторінку. Думаючи, що це погано працюють сервери, ми увійшли в систему, але як веб-сервери, так і SQL-сервери мали ~ 0% активності.
Через кілька хвилин ми зрозуміли, що зовнішній сайт не працює, на який ми посилаємося для тегів відстеження Javascript. Це означало, що браузери вбивали тег скрипта в голову розділі сайту і чекали завантаження файлу сценарію.
Отже, принаймні для сторонніх / зовнішніх сценаріїв я б рекомендував розміщувати їх як останнє на сторінці. Тоді, якби вони були недоступні, браузер принаймні завантажував би сторінку до цього моменту - і користувач не пам’ятав би про це.
Підсумовуючи, виходячи з наведених вище пропозицій:
</body>тегом.</body>якщо у вас немає крайньої причини розміщувати сценарії в голові.Якщо ви хочете поговорити з позицією своїх сценаріїв, YSlow - це чудовий інструмент для надання вам смаку, якщо це покращить або погіршить продуктивність. Поміщення javascript у певні позиції документа може дійсно знищити час завантаження сторінки.
Ні, це не повинно бути після того, </html>як це було б недійсним. Найкраще місце для розміщення сценаріїв - безпосередньо перед</body>
Це пояснюється тим, що більшість браузерів припиняють рендерінг сторінки, поки вони обробляють сценарій, який ви надаєте. Тож нормально розміщувати неблокуючий код де завгодно на сторінці (я в основному думаю про речі, які приєднують функції до onLoadподії, оскільки прив’язка подій відбувається настільки швидко, що ефективно може бути безкоштовною). Великий вбивця - це на початку сторінки введення сценарію сервера оголошень, який може запобігти завантаженню будь-якої сторінки до повного завантаження оголошень, що збільшує час завантаження сторінки
Якщо покласти його внизу, він завантажується в останню чергу, отже, прискорюючи швидкість, яку користувач може побачити сторінку. Це має бути до фіналу, </html>хоча інакше він не буде частиною DOM.
Якщо код потрібен миттєво, тоді покладіть його в голову.
Найкраще розміщувати такі речі, як віджети блогу, внизу, щоб, якщо вони не завантажуються, це не впливало на зручність використання сторінки.