210

Скажімо, у мене досить здоровенний файл JavaScript, упакований приблизно до 100 кбіт або близько того. Під файлом я маю на увазі це зовнішній файл, який би був пов’язаний через via<script src="..."> , а не вставлений у сам HTML.

Де найкраще розмістити це в HTML?

<html>
<head>
    <!-- here? -->
    <link rel="stylesheet" href="stylez.css" type="text/css" />
    <!-- here? -->
</head>
<body>
    <!-- here? -->
    <p>All the page content ...</p>
    <!-- or here? -->
</body>
</html>

Чи буде якась функціональна різниця між кожним із варіантів?

javascript html optimization

— нікф
джерело

Можливий дублікат тему Де я повинен розмістити теги <script> у розмітці HTML?

— Івар

175

Yahoo! Команда з надзвичайної продуктивності рекомендує розміщувати сценарії внизу сторінки через те, як браузери завантажують компоненти.

Звичайно, коментар Леві "безпосередньо перед тим, як вам це потрібно, і не раніше" - це дійсно правильна відповідь, тобто "це залежить".

— Вальтер Рамсбі
джерело

4

Наприклад, якщо ви збираєтеся робити купу матеріалів jQuery, вам знадобиться завантажена бібліотека, перш ніж ви насправді спробуєте використати її.

— BryanH

58

Крім того, причина, чому Yahoo EPT рекомендує розміщувати JS внизу, полягає в тому, що браузер повинен перейти в однопотоковий режим, поки JS завантажується, а потім виконується. Якщо сценарій знаходиться в голові або посеред вмісту, браузер буде "призупинятися", поки він має справу з JS. Розмістивши JS внизу, вміст буде завантажений і загалом видимий, щоб користувач міг розпочати його читання, поки браузер все ще має справу з JS.

— BryanH

1

Привіт. Чи ставимо такий код $(function () {...})також у нижній частині сторінки, чи він повинен бути всередині <head>?

— Тханг Фам

7

Я сподіваюся, що посилання на "нижню частину сторінки" тут не виходить за межі </body>?

— Mr_Green

1

Сучасні браузери також можуть читати атрибут "відкладати". Ви можете встановити defer = "defer" на теги сценарію, які не знаходяться внизу <body>, і коли браузер побачить їх, він спочатку закінчить завантаження решти html, а потім повернеться назад та інтерпретує вміст тег сценарію. Це корисно, якщо ви використовуєте якусь структуру, де ви не маєте повного контролю над сторінкою. Dig в цій статті , і відзначають , що це живий документ , так що деякі з інформації застаріла: stackoverflow.com/questions/5250412 / ...

— LinuxDisciple

75

Найкраще місце для нього - саме перед тим, як вам це потрібно, і не раніше.

Крім того, залежно від фізичного розташування ваших користувачів, використання такої послуги, як служба Amazon S3, може допомогти користувачам завантажити її з сервера, фізично наближеного до них, ніж вашого сервера.

Чи є ваш js-скрипт часто використовуваною lib, як jQuery або прототип? Якщо так, то існує ряд компаній, таких як Google та Yahoo, які мають інструменти для надання цих файлів для вас у розподіленій мережі.

— Леві Росол
джерело

60

Як правило, найкраще місце для розміщення <script>тегів - це нижня частина сторінки, безпосередньо перед </body>тегом. Щось на зразок цього:

<html>
    <head>
        <title>My awesome page</title>

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">

    </head>
    <body>
        <!-- Content content content -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
    </body>
</html>

Чому?

Проблема, викликана сценаріями, полягає в тому, що вони блокують паралельні завантаження. Специфікація HTTP / 1.1 передбачає, що браузери завантажують не більше двох компонентів паралельно на ім’я хоста. Якщо ви подаєте свої зображення з кількох імен хостів, ви можете отримати більше двох завантажень паралельно. Поки сценарій завантажується, однак браузер не запускатиме жодних інших завантажень, навіть на різних іменах хостів. Більше ...

CSS

Трохи поза темою, але ... Поставте таблиці стилів вгорі.

Під час дослідження продуктивності в Yahoo !, ми виявили, що переміщення таблиць стилів до документа HEAD змушує сторінки завантажуватися швидше. Це відбувається тому, що розміщення таблиць стилів у HEAD дозволяє відображати сторінку поступово. Більше ...

Подальше читання

Yahoo випустив дійсно класний посібник, в якому перераховані кращі практики для прискорення веб-сайту. Однозначно варто прочитати: https://developer.yahoo.com/performance/rules.html

— мартини
джерело

1

"Проблема, викликана сценаріями, полягає в тому, що вони блокують паралельні завантаження." - Це більше не відповідає дійсності: w3.org/TR/html5/scripting-1.html#attr-script-async

— Квентін,

4

Маючи 100k Javascript, ви ніколи не повинні ставити його всередині файлу. Використовуйте зовнішній файл JavaScript сценарію. У пеклі немає жодного шансу, що ви коли-небудь використовуватимете цю кількість коду лише на одній HTML-сторінці. Ймовірно, ви запитуєте, де вам слід завантажити файл Javascript, на це ви вже отримали задовільні відповіді.

Але я хотів би зазначити, що зазвичай сучасні браузери приймають файли JavaScript gzip ped! Просто gzip x.jsфайл x.js.gzі вкажіть на це вsrc атрибуті. Він не працює в локальній файловій системі, для його роботи потрібен веб-сервер. Але економія в передаваних байтах може бути величезною.

Я успішно протестував його в Firefox 3, MSIE 7, Opera 9 та Google Chrome. Мабуть, це не працює в Safari 3.

Для отримання додаткової інформації дивіться цю публікацію в блозі та ще одну дуже давню сторінку, яка все-таки є корисною, оскільки вона вказує, що веб-сервер може визначити, чи може браузер приймати gzipped Javascript, чи ні. Якщо ваша сторона сервера може динамічно вирішити надіслати gzipped або звичайний текст, ви можете зробити сторінку доступною у всіх веб-браузерах.

— барт
джерело

8

Ви неправильно зрозуміли питання ОП. Він запитував, куди в HTML розмістити тег скрипту. Він уже використовував зовнішній файл, не вкладаючи сценарій. Справді, це було менш зрозуміло до його редагування питання у квітні '09. Можливо, видалити цю відповідь?

— Марк Амері

@Leandro Я думаю, що це тому, що люди не завжди пам’ятають про актуальне питання, але все ще вважають відповіді на зразок цього корисним. Тим не менш, ця відповідь є корисною, але не обов'язково актуальною. Це може бути краще, якщо підказка для голосування містить більш чіткі формулювання, наприклад, "Ця відповідь є корисною та актуальною".

— WynandB

1

На gzipped Javascript: Ви можете просто налаштувати свій веб-сервер для його стиснення ... (Або використовувати щось на зразок gzip_static модуля / опції nginx) (а також gunzip для інших клієнтів), який повинен принаймні надсилати правильний заголовок типу вмісту, з кодуванням, позначеним як gzip, що може призвести до ще кращої підтримки браузера

— Герт ван ден Берг,

4

Розміщення javascript у верхній частині здасться акуратнішою, але функціонально краще йти за HTML. Таким чином, ваш JavaScript не працюватиме і намагатиметься посилатись на елементи HTML перед завантаженням. Така проблема часто стає очевидною лише коли ви завантажуєте сторінку через фактичне підключення до Інтернету, особливо повільне.

Ви також можете спробувати динамічно завантажувати javascript, додаючи елемент заголовка з іншого коду javascript, хоча це має сенс лише, якщо ви весь час не використовуєте весь код.

— Маттіас Вандель
джерело

3

Використовуючи cuzillion, ви можете перевірити вплив на завантаження сторінки різного розміщення тегів скриптів, використовуючи різні методи: вбудований, зовнішній, "HTML теги", "document.write", "JS DOM елемент", "iframe" та "XHR eval" . Пояснення до відмінностей див. У довідці . Він також може перевірити таблиці стилів, зображення та рамки кадрів.

— Сем Хаслер
джерело

1

Відповідь залежить від того, як ви використовуєте об’єкти javascript. Як уже вказувалося, завантаження файлів javascript у нижньому колонтитулі, а не заголовку, безумовно, покращує продуктивність, але слід подбати про те, щоб використовувані об'єкти ініціалізувалися пізніше, ніж вони завантажуються у нижній колонтитул. Ще одним способом є завантаження файлів 'js', розміщених у папці, які будуть доступні для всіх файлів.

— GustyWind
джерело

0

Як говорили інші, він, швидше за все, повинен містити зовнішній файл. Я вважаю за краще включати такі файли в кінці <head />. Цей метод є більш людським, ніж машинним, але я завжди знаю, де знаходиться СП. Просто не так легко читати файли скриптів у будь-якому іншому місці (imho).

Мені вам справді потрібно видавити кожен останній мс, тоді ви, мабуть, повинні робити те, що каже Yahoo.

— Берсерк
джерело

0

Сценарії повинні бути включені в кінці тегу body, оскільки таким чином HTML буде проаналізований браузером і відображатиметься перед завантаженням скриптів.

— Хосе Сальгадо
джерело

0

Відповідь на питання залежить. У цій ситуації є 2 сценарії, і вам потрібно буде зробити вибір, виходячи з вашого відповідного сценарію.

Сценарій 1 - Критичний сценарій / Обов’язково необхідний сценарій

Якщо сценарій, який ви використовуєте, важливий для завантаження веб-сайту, рекомендується розміщувати вгорі HTML-документа, тобто, <head> . Деякі приклади включають - код програми, завантажувальний файл, шрифти тощо.

Сценарій 2 - Менш важливі / аналітичні сценарії

Також використовуються сценарії, які не впливають на перегляд веб-сайту. Такі сценарії рекомендується завантажувати після завантаження всіх важливих сегментів. І відповідь на це буде внизу документа, тобто внизу вашого <body>перед тегом закриття. Деякі приклади включають: Google analytics, hotjar тощо.

Бонус - асинхронізація / відстрочка

Ви також можете сказати веб-переглядачам, що завантаження сценарію може здійснюватися одночасно з іншими і може бути завантажено на основі вибору браузера, використовуючи аргумент відкладати / асинхронувати в коді сценарію.

напр. <script async src="script.js"></script>

— Praveen Thirumurugan
джерело

-1

Ваші посилання на JavaScript можуть потрапляти або в голову, або в кінець тегу body, правда, продуктивність покращується, помістивши посилання в кінці тегу body, але якщо продуктивність не є проблемою, розміщення їх у голові приємніше щоб люди могли читати, і ви знаєте, де розташовані посилання, і можете простіше посилатися на них.

— Тімоті Трусдейл
джерело

-1

Я б сказав, що фактично залежить, чого ви плануєте досягти за допомогою коду Javascript:

якщо ви планували вставити зовнішні сценарії (файли) JS, то найкраще місце знаходиться в голові сторінки
якщо ви планували використовувати сторінки на смартфонах, то внизу сторінки, безпосередньо перед тегом.
але, якщо ви планували комбінувати HTML та JS (наприклад, динамічно створена та заповнена таблиця HTML), ви повинні помістити її там, де вам це потрібно.

— Людус Н
джерело

Що я сказав заслужити мінус !? Гез.

— Ludus H

Яке зовнішнє відношення має до введення сценарію в голову? Чому внизу сторінки гарне місце для розміщення скриптів спеціально для смартфонів? Твоє твердження про динамічне генерування HTML з JS вірно лише в тому випадку, якщо ти використовуєш document.write, чого, мабуть, не повинно бути.

— Квентін

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

— Ludus H

Де розмістити JavaScript у файлі HTML?

Чому?

CSS

Подальше читання