Чому б не вставити стилі / скрипти в HTML, а не посилатись?

Ми об'єднуємо файли CSS та JavaScript, щоб зменшити кількість запитів HTTP, що підвищує продуктивність. Результат такий: HTML:

<link rel="stylesheet" href="all-my-css-0fn392nf.min.css">
<!-- later... -->
<script src="all-my-js-0fn392nf.min.js"></script>

Якщо у нас є логіка на стороні сервера / побудови, щоб зробити це все для нас, то чому б не зробити це на крок далі і вставити ці об'єднані стилі та сценарії в HTML?

<style>.all{width:100%;}.my{display:none;}.css{color:white;}</style>
<!-- later... -->
<script>var all, my, js;</script>

Це на два менше запити HTTP, але я не бачив цієї методики на практиці. Чому ні?

Оскільки збереження HTTP-запитів малокорисне, коли ви досягаєте цього, порушуючи кешування. Якщо таблиці стилів та сценарії подаються окремо, їх можна кешувати дуже добре та амортизувати протягом багатьох, багатьох запитів на диво різні сторінки. Якщо вони розміщені на одній HTML-сторінці, їх потрібно повторно передавати з кожною. Неодружений Запит

Наприклад, HTML на цій сторінці, наприклад, зараз становить 13 Кб. 180 КБ CSS потрапило в кеш, і так само 360 КБ JS. Обидва звернення кеша зайняли мінусовий проміжок часу і майже не зайняли пропускну здатність. Підсуньте мережевий провідник вашого браузера та спробуйте його на деяких інших сайтах.

Просто тому, що веб-продуктивність дійсно має значення! У 99% разів це дасть вам швидший час відгуку кінцевого користувача.

Ось декілька екзаменів з програми Velocity Conf.

• Bing - Сторінка, що була на 2 секунди повільніше, призвела до зниження на 4,3% доходу / користувача.
• Google - Затримка на 400 мілісекунд спричинила зниження на 0,59% пошукових запитів / користувачів.
• Yahoo ! - Уповільнення на 400 мілісекунд призвело до падіння трафіку на повну сторінку на 5-9%.
• Shopzilla - Збільшення свого сайту на 5 секунд збільшило швидкість конверсії на 7-12%, подвоїло кількість сеансів від маркетингу в пошукових системах і скоротило кількість необхідних серверів вдвічі.
• Mozilla - Гоління за 2,2 секунди на своїх цільових сторінках збільшило конверсії завантажень на 15,4%, що, за їхніми оцінками, призведе до 60 мільйонів більше завантажень Firefox на рік.
• Netflix - Прийнявши єдину оптимізацію, стиснення gzip призвело до прискорення на 13-25% і скоротило їх вихідний мережевий трафік на 50%.

Від Стіва Суудерса, піонера з оптимізації веб-продуктивності,

80-90% часу відповіді кінцевого користувача витрачається на передній план - Почніть тут спочатку.

Використання зовнішніх файлів створює швидші сторінки, оскільки файли JavaScript та CSS кешуються браузером / мережами / проксі-серверами (як визначено в протоколі HTTP з заголовками кеша). JavaScript і CSS, які містяться в документах HTML, завантажуються щоразу, коли запит HTML-документа. Це зменшує кількість запитів HTTP, які потрібні, але збільшує розмір HTML-документа. Якщо ви використовуєте сценарії, подібні до Jquery, легко відновити 300 КБ скриптів і не вірите, що кожен має пропускну здатність 100 Мбіт / с з низькою затримкою, запустивши на своєму веб-сайті одну програму - браузер. У 99% разів це дасть вам швидший час відгуку кінцевого користувача.

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

Але вкладиш - іноді - кращий для додатків на одній сторінці або веб-сайтів з одним переглядом однієї сторінки за сеанс. Золоте правило не існує, і загалом це забудьте, оскільки це стосується головним чином дуже конкретних веб-сайтів, дійсно залучених до роботи кінцевих користувачів.

Ви можете прочитати тут, чому важлива продуктивність (Відмова: Я - автор)

Остання версія HTTP була створена ще в 1999 році. У 1999 році всі підключились до Інтернету за допомогою комутованого доступу. Інтернет був дуже повільним. Через 16 років справи значно змінилися, але протоколи, які ми використовуємо, не мають.

Відповіді, які ми не повинні наводити "тому, що це заважає кешуванню", є трохи оманливими, особливо в епоху надшвидкого Інтернету. Коли ви насправді робите розрахунки, часто є незначна різниця між часом завантаження з кешами-користувачами та користувачами, які холодно кешують, якщо ви вказали. Те, що є невелика різниця, притаманне не тому, що ви вказали, а через негнучку конструкцію HTTP / 1.1.

Протокол SPDY реалізує щось, що називається натисканням сервера . Це по суті вимагає вбудованого тексту із самого HTML-документа та у протокол. Розумний сервер буде знати, які ресурси у клієнта вже є. Тупий сервер просто надсилатиме все незалежно - це все одно буде користю для продуктивності, але може коштувати з точки зору пропускної здатності. Якщо браузер містить вміст у своєму кеші, він може просто відкинути вхідні копії. Сервер чекає, поки HTML завантажується, перш ніж надсилати додаткові ресурси - теоретично браузер може надіслати сигнал для скасування натискання сервера.

HTTP / 2.0 заснований на SPDY і, швидше за все, реалізує натискання сервера, але теоретично ви можете почати використовувати SPDY вже сьогодні. Тож справжня причина, яку ми не вказуємо, є однією із застарілих - протоколи, які існують на даний момент, є старими і не є досить гнучкими, щоб досягти "складання рівня протоколу".

Окрім кешування та пошуку занепокоєнь, які викликають інші відповіді, я хотів би виділити ще одну, більш незрозумілу проблему: розбір .

JavaScript, що відображається в HTML, може зіткнутися з проблемами розбору, як у цьому прикладі:

<html>
<head>
<script>
function myfunc() {
    if ("</style> isn't a problem")
        return "but </script> is"
}
</script>
<style>
body::after {
  content: '</script> is okay, but not </style>'
}
</style>
</head>
<body>
<script>document.write(myfunc())</script>
</body>
</html>

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

Якщо ви розміщуєте свій вміст у форматі XML, ви маєте певний шлях до цього, використовуючи розділи CDATA. CDATA, однак, має подібний випуск:

<?xml version="1.0" encoding="utf-8"?>
<html>
<head>
<script>
// <![CDATA[
function myfunc() {
    if ("</script> is no longer a problem")
        return "but ]]> is"
}
// ]]>
</script>
<style>
<![CDATA[
body::after {
  content: 'same ]]> issue here'
}
]]>
</style>
</head>
<body>
<script>document.write(myfunc())</script>
</body>
</html>

Інлайнери остерігайтеся.

Відмежування вмісту від стилю його подання, як правило, є більшою перевагою, ніж менше http-запитів.

Виділення всіх стилів дозволяє та заохочує повторне використання та спільне використання файлів.

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

До вас, однак, конкретний питання ... Якщо сервер зроблений для самої мінімізації, це ускладнює активи у підтримці та налагодженні проблем. Однак зараз багато фреймворків роблять це на рівні файлів, наприклад, всі cs та всі js. Наприклад, рамка рубіну на рейки тепер мінімізує свої активи для виробництва. 5-10 додаткових запитів http зазвичай не є вузьким місцем, його більше, якщо є 100+ http запитів (які ви часто отримуєте із зображеннями).

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

1. Мінімізуйте дублювання коду. для економії часу (Ви можете використовувати стиль і функцію JS, кодовану для однієї сторінки).
2. Мінімізуйте зусилля щодо зміни. (Якщо ваш клієнт попросить змінити колір кнопки веб-сайту. Вам потрібно перейти по одній сторінці).
3. Скоротіть час завантаження (якщо ваш CSS та JS дублюються, це означає збільшення розміру окремих сторінок і забирає багато часу для завантаження. Але звичайний CSS JS не потрібно завантажувати знову і знову).
4. Віддалене використання. (ви можете розмістити загальний CSS js JS у віддаленому місці. Не той самий розміщений сервер)
5. Скоротіть час виправлення помилок. Якщо в одній функції є помилка, вам потрібно перейти сторінку за сторінкою, щоб виправити помилки у вбудованих JS та CSS.
6. Для збільшення SEO (просто розділіть вміст з метаданими)
7. Очищення та зрозуміліше коду (Якщо ви вставите все в один файл, налагодження та чіткість коду відійшли. І кожна сторінка буде дуже довгою сторінкою).
8. Додатково це допоможе вам зменшити розмір виробу.
9. Але все ж ви можете розглянути можливість вбудовування найбільш унікальної речі на одній сторінці.

Ми не повинні вбудовувати стилі / скрипти в HTML, оскільки

Вбудовані стилі / скрипти потрібно завантажувати з кожним запитом на сторінку:

Браузер не може кешувати ці стилі та використовувати їх знову для іншої сторінки. Через це рекомендується вбудовувати мінімально можливу кількість CSS / JS.

натомість ми використовуємо посилання coz, коли ми використовуємо посилання для прив’язки css / скриптів

Швидкість сайту збільшується для кількох запитів на сторінку:

Коли людина вперше відвідує ваш веб-сайт, його браузер завантажує HTML поточної сторінки, а також пов'язаний файл CSS та JS. Коли вони переходять на іншу сторінку, їх браузер повинен завантажувати лише HTML нової сторінки, файл CSS / JS кешується, тому його не потрібно завантажувати знову. Це може мати велике значення, особливо якщо у вас великий файл стилю та сценарію.