Зовнішній CSS проти різниці в продуктивності вбудованого стилю?

88

Мій друг сказав, що використання <div style=""></div>замість стисненого css-файлу, розміщеного як link hrefу головному розділі, підвищує продуктивність. Це правда?

css  performance  inline-styles 
— Джордж
джерело
1
Наскільки я знаю, вони (приблизно) однакові, але я не можу це перевірити.
— Nightfirecat
3
Це може пролити світло: mathiasbynens.be/notes/inline-vs-separate-file
— Судхір Бастакоті,
1
Це повинно було б суттєво підвищити продуктивність, щоб мати справу з кошмарами по технічному обслуговуванню, які є вбудованими стилями. Поки що я не бачив цього.
— steveax
1
Для старих версій IE підвищення продуктивності ДУЖЕ значне. Я бачив, як таблиці HTML поводяться як клей із стилем CSS.
— Джонатан,

Відповіді:

90

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

Використовуючи атрибут style, браузер лише малює правило для цього конкретного елемента, який у цьому випадку є <div>елементом. Це зменшує кількість часу пошуку механізму CSS, щоб знайти, які елементи відповідають селектору CSS (наприклад, a.hoverабо #someContainer li).

Однак розміщення стилів на рівні елементів означало б, що ви не можете кешувати правила стилів CSS окремо. Зазвичай розміщення стилів у файлах CSS дозволяє кешувати, тим самим зменшуючи обсяг навантаження з сервера кожного разу, коли ви завантажуєте сторінку.

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

Тому, якщо ви подивитеся на порівняння, то побачите, що використання файлу CSS має набагато більше переваг, ніж стилістика на рівні елементів.

Не забувайте, коли у вас є зовнішній файл таблиці стилів CSS, ваш браузер може кешувати файл, що підвищує ефективність вашої програми!

— mauris
джерело
4
Чи можете ви надати будь-яку статистику за допомогою хромованого профілю? Процесор та графічний процесор є дорогими для мобільних пристроїв та планшетів, де споживання батареї є величезною вартістю. Я думаю, є компроміс. І в чому перевага кеш-пам’яті? Браузеру доведеться обчислювати стиль для поточного елемента, і вирішення стилів буде дорожчим, якщо існує багато правил.
— Akash Kava
28
Зауважте, що всі недоліки, пов’язані з технічним обслуговуванням, зникають, коли існує двигун, який вбудовує стилі перед відправкою клієнтам
— Моше Шахам
6
Недоліки, пов'язані з технічним обслуговуванням, також зникають при використанні React + Radium.
— AjaxLeung
1
@AjaxLeung, без сумніву, те, що ви та Шахам сказали, є правдою. Ця відповідь була написана в 2011 році, коли більшість сучасних інструментів ще не були доступними.
— mauris
2
Так. Я просто додавав коментар для тих, хто бачить цю відповідь сьогодні і далі.
— AjaxLeung
6

Сторінка завантажується швидше, якщо ви використовуєте вбудовані стилі проти таблиць стилів. У деяких випадках повинен швидше.

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

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

Єдина причина, через яку ми використовуємо таблиці стилів, - це організованість. Бувають випадки, коли вони не потрібні, тому достатньо вбудованих стилів або таблиць стилів у документі.

— sebjwallace
джерело
9
Ця відповідь повністю ігнорує кешування браузера. Таблиці стилів дозволяють лише один раз запитувати стилі та кешувати їх, зменшуючи кількість вмісту, надісланого по дроту.
— GeekOnCoffee
2
Ця відповідь також ігнорує той факт, що вбудовані стилі роблять файл HTML більшим. Потенційно, особливо при повторному вбудованому стилі, у кілька разів більший, ніж CSS-файл. До речі, браузери можуть завантажувати кілька файлів паралельно (і кешувати їх, як зазначено вище).
— Ян Ван дер Хаген,
5

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

— с.єрмакович
джерело
5
Практично впевнений, що це тестування швидкості, з якою змінюється клас або атрибут стилю вузла, а не швидкість, з якою застосовується стиль, що саме і задає питання
— Сем
@Sam Що ви маєте на увазі під "швидкістю застосування стилю"? Чи можете ви надати тест, який вимірює цю швидкість? Якщо ви подивитесь на тестовий код, то побачите, що переформатування сторінки відбувається на кожній ітерації, а це означає, що тест охоплює не тільки модифікацію класу / атрибута, але й фактичний вплив на сторінку.
— с.ермакович
Можливо, це включає час на додавання стилю, але також додає і час. Що робити, якщо документ вже мав тест класу або вбудований стиль без JS, щоб додати його. Я набираю швидкості для вирішення CSS в будь-якому випадку і (можливо, я помиляюся), але я не думаю, що цей тест просто робить це, я думаю, це робить додаткову роботу.
— Сем
@Sam Цей тест ігнорує можливий слід завантаження CSS браузером та його обробки. У своїй відповіді я згадав, що це поодинокий випадок. Він просто вимірює ефективність застосування стилів різними способами (вбудований чи зовнішній). Це те, що роблять сьогодні типові веб-програми - змінюють документ HTML з JavaScript без перезавантаження сторінки.
— с.ермакович
О гаразд, я мав на увазі нединамічно додані стилі
— Сем
3

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

— eciusr
джерело
3
Це суть механізму кешування. Для цього не потрібні докази.
— стронцій
5
Його можна "перевести в готівку", не означає "обналити"; а "есенції" не є фактами.
— Іван Кастелланос
6
Хлопці, це вже не ера герцога Нукема, ми не готівку людей. Кеш, з іншого боку ...
— Себас
3
Аргумент кешування не застосовується для односторінкових додатків, які зазвичай завантажують все за один раз і генерують сторінки на льоту.
— MindJuice
1

ІСТИНА - ТАК

Існує величезна різниця. Особливо, коли ви автоматизуєте користувальницький інтерфейс. Спробуйте наступний код. Я використовую IE10 та блокнот для розробки. Я вчуся, ходячи і роблячи тести, це скорочена версія тесту. (можливі помилки, оскільки я зменшив код, щоб показати вашу відповідь)

Клацніть на зображення, на яке ви посилаєтесь, і прочитайте попереджувальні повідомлення. ПІДКАЗКА: Збережіть цей файл ще раз як редагування перед редагуванням (тестуванням).

З найкращими побажаннями, Дон

<!DOCTYPE html>
  <head>
    <style>
      div.grid
        {
        width:180px;
        height:42px;
        border:none;
        }
      img
        {
        width:50px;
        height:50px;
        margin:2px;
        float:left;
        border: 1px solid red;
        }
    </style>
    <script>
      function handleSelect(xId)
        {
        //
        // TESTPOINT
        alert("TESTPOINT\r>Grid: " + xId);
        //
        // GET BORDER COLOR
        // NOTE: An empty or blank value when you can see a border means the tag itself does not
        //            have 'border properties' (style="border: 2px{width} solid{style} green{color}").
        //            although there can be a border detailed via css local or external or via code (script).
        //            If the 'border properties' are returned then they were setup at the tag as
        //            above or the 'border properties' were updated by script code not css code.
        //            If the 'border properties' are NOT returned then they were setup via css.
        //            Thus, since everything seems to be heading toward edit on the fly (live) then css is NOT the way to go (learning).
        // HINT: Margin property is also not readable if set via css. Most likely all the properties values are the same way.
        //           Thus, setting the property values of a tag should be set at the tag control.
        // (works) cBorder=document.getElementById(xId).style.borderWidth;
        // (works) cBorder=document.getElementById(xId).style.borderStyle;
        // (works) cBorder=document.getElementById(xId).style.borderColor;
        // (works) cBorder=document.getElementById(xId).style.border;
        //cBorder=document.getElementById(xId).style.border;
        cBorder=document.getElementById(xId).style.margin;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder);
        //
        // SELECT IMAGE
        document.getElementById(xId).style.margin="1px";
        document.getElementById(xId).style.border="2px solid gold";
        document.getElementById(xId).innerHTML=xId;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]");
        //
        // GET BORDER COLOR
        //var cBorder=document.getElementById(xId).style.border-Color;  //Error
        //var cBorder=document.getElementById(xId).style.border-color;  //Error
        //var cBorder=document.getElementById(xId).style.borderColor;   //Error
        //var cBorder=document.getElementById(xId).style.bordercolor;   //Undefined
        cBorder=document.getElementById(xId).style.border;      //Empty
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]" + "\r>Border: " + cBorder);
        }
    </script>
  </head>

  <body>
    <div class="grid">
      <img style="border: 2px solid green" id="R0C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid blue" id="R0C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid purple" id="R0C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R1C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R2C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
  </body>
</html>
— Дон
джерело
28
Для розробки використовую IE10 та блокнот. ?
— xanderiel
1

На мій погляд, немає твердої відповіді.

Ан inline CSSзавантажується швидше, якщо розмір вмісту CSS завантажується швидше, ніж ваш сервер відповість на external CSS fileзапит (враховуючи час DNS, затримку сервера тощо).

Для звичайного розміру CSS я б вставив їх на сторінку, для чогось більше 15-20 КБ я б, мабуть, помістив у зовнішній файл і переконався, що його можна кешувати.

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

— adrianTNT
джерело
-1

Використання зовнішніх таблиць стилів, безумовно, є кращим варіантом, оскільки це допоможе вам запам’ятати стиль, який ви застосували до div (ів). Це зменшує час завантаження сторінки, оскільки чим менше HTML-код, тим швидше він завантажується.

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

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

— вікі
джерело
-3

Я віддаю перевагу використанню вбудованого CSS перед зовнішнім CSS, де для кожного іншого елемента чи зображення існує кілька невеликих CSS-файлів. Немає сенсу завантажувати кілька файлів CSS із лише 5-10 рядками коду в кожному. Якщо ваш елемент містить такі властивості, як наведення, активний, перевірений тощо, тоді вам слід використовувати зовнішній файл CSS, оскільки це уникне ускладнення процесу розробки.

— atuls1396
джерело
Це робить утримання надзвичайно складним. Файли CSS та JS за замовчуванням повинні бути кешовані у браузері вашого користувача.
— dave2118
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.