Встраивать среднюю страницу CSS - плохая идея?

Рассмотрим два примера:

# 1 Со встроенными стилями непосредственно перед компонентом:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <style>.component-1 { color: red; }</style>
    <div class = "component-1">...</div>

    <style>.component-2 { color: blue; }</style>
    <div class = "component-2">...</div>

    <style>.component-3 { color: yellow; }</style>
    <div class = "component-3">...</div>

    <!-- repeating components do not include their <style> again -->
    <div class = "component-1">...</div>
  </body>
</html>

# 2 Со встроенными стилями каждого компонента в заголовке:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .component-1 { color: red; }
      .component-2 { color: blue; }
      .component-3 { color: yellow; }
    </style>
  </head>
  <body>
    <div class = "component-1">...</div>
    <div class = "component-2">...</div>
    <div class = "component-3">...</div>
    <div class = "component-1">...</div>
  </body>
</html>

С точки зрения производительности, значительно ли лучше использовать №2 вместо №1? Если да, то почему?

Идентификатор sas # 1 более производительный, но не совсем существенно. Почему бы не открыть оба и не посмотреть на вкладку производительности браузеров?

— 27.10.2018 11:41

ясно, что первый лучше для обслуживания ... мы должны разделять HTML и CSS, что не в случае № 1, это похоже на использование встроенных стилей

— 27.10.2018 11:43

javascript html css performance

27.10.2018 11:36

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Другие вопросы по теме

Сформировать разные энктипы входных данных

Угловой 6: ошибка TS2339: свойство 'значение' не существует для типа 'HTMLElement'

Выпадающее меню на чистом CSS без Javascript

Настраиваемый CSS-код радиообмена при изменении

Название карусели исчезает

Как установить jscolor chooser на кнопку BS

Локальное хранилище JavaScript не сохраняет или не получает информацию

Значения PHP $ _SESSION не меняются

Как изменить цвет текста в теге marquee при каждом обновлении

Почему я не могу переместить некоторые из моих столов с позиционированием?

Встраивать среднюю страницу CSS - плохая идея?

Другие вопросы по теме

Похожие вопросы