Ага не приходят, еще как приходят, и хостинг вырубает ваш волшебный VPS в волшебном облаке, наглухо, он не то что перестает пинговаться, к нему никак не приконнектится и из панели управления хостингом ничего не сделать, ну то есть вообще.
А дальше действия такие, просишь и умоляешь хостинг включить сервер для удаления того материала на который жалуется РКН, пишешь, что неугодная статья удалена, ну и в принципе все, дальше вроде хостинг сам там РКН отправляет что запрещенный материал на земле и луне был удален и сервер продолжает работать(ПОКА) :-)
Жалобы были в основном на статьи по обходу заблокированных сайтов и попускания РКН, ВПН, прокси и т.п., т.к. сайт на компьютерную тематику.
Теперь веб-мастер в свободном интернете в свободной и демократической России, не просто раб, а Рабыня Изаура.
И это только про белый и пушистый частный сайт хобби одного человека энтузиаста на компьютерную тематику и только речь про один сайт.
Можно топать ножкой, можно говорить, что вы же платите за сервер деньги и т.п. придумки, но пока не удалишь(УДОЛИ!), сервер не включат. И ты удалишь, если ты не совсем дурак, т.к. 5К статей важней одной.
С моей машиной двадцатилетней давности это все не имеет значения, но резину на передние колеса я таки поменял, японская якогама годовалая не так плоха, а задняя почти не на что не влияет, всетаки это переднеприводная авто, а зад как у телеги, там все равно балка, я как-то видел ролик по ютубу там чел на гелике даже не представляю сколько он весит наверное тонны три, заварил и закольцевал задние тормозные трубки, короче тормозил только на передних, а вы говорите.
Посмотрел их пример, ну понятно, таблица в обертке внутри дива:
<div class="table-responsive">
<table class="table">
</table>
</div>
И банальный overflow-x: auto;, гении верстки.
Я её в столбик свернул, построчно, но конечно для пользователей такой вид — это мягко сказать не очень (Выглядит ужасно), но зато горизонтальной прокрутки на сайте нет, за что Google ставит пометки на такие мобильные страницы.
Да, абсолютно правильно.
Смысла переставлять "самые важные" свойства в начало CSS-файла (или даже в начало блока правил) нет. Это не повлияет на скорость обработки или рендеринга страницы.
Суть процесса
* Парсинг всего файла: Браузер сначала полностью загружает и парсит весь CSS-файл, чтобы построить CSSOM (CSS Object Model).
* Вычисление стилей: После построения CSSOM и DOM (из HTML) браузер вычисляет конечный, объединенный набор стилей для каждого элемента на странице. Он не применяет свойства по одному, проходя по файлу сверху вниз. Он видит все свойства сразу.
* Применение каскада: Правила каскада (специфичность, важность, и, в последнюю очередь, порядок в файле) используются только для разрешения конфликтов между разными правилами. Если конфликта нет (например, ты просто переставляешь width и height местами), порядок не имеет значения.
Итог: Для производительности и скорости рендеринга не имеет значения, где в файле находится правило для body или main-container. Важно, чтобы файл был загружен и разобран (parsed) как можно быстрее, а не в каком порядке внутри него расположены правила.
Теперь ты спросишь, а как же отрисовка?
Обработка CSS связана с процессом отрисовки (Rendering).
Обработка CSS-файла — это лишь первый этап. После него происходит сложный многоступенчатый процесс, который в итоге приводит к отображению страницы на экране.
Как CSSOM влияет на Отрисовку
Процесс отрисовки (Критический Путь Рендеринга) состоит из нескольких ключевых шагов:
1. Построение CSSOM (CSS Object Model)
Как мы обсуждали, браузер парсит весь CSS-файл и создает древовидную структуру CSSOM. Поскольку стили могут влиять на внешний вид и положение любого элемента, браузеру нужно иметь полную картину всех стилей, прежде чем он сможет начать рендеринг. Именно поэтому CSS блокирует рендеринг.
2. Построение Дерева Рендеринга (Render Tree)
Дерево рендеринга создается путем объединения DOM (содержимое) и CSSOM (стили).
* Браузер проходит по каждому узлу DOM.
* Он собирает все потенциально применимые правила из CSSOM (используя правила каскада, специфичности и наследования).
* Он вычисляет конечный, абсолютный (например, из em в px) набор стилей для этого узла.
* Он добавляет узел и его вычисленные стили в Дерево Рендеринга. Ну кроме display: none не включаются в это дерево.
3. Компоновка
После того как Дерево Рендеринга сформировано, браузер определяет точное геометрическое положение и размер каждого элемента на экране. Этот процесс называется компоновкой или перекомпоновкой (reflow). Он должен знать, где именно находится каждый элемент, чтобы начать его рисовать.
4. Отрисовка
На этом шаге браузер использует вычисленные стили и геометрические данные для преобразования каждого элемента в пиксели на экране. Этот процесс включает в себя рисование цветов, границ, текста, теней и других визуальных эффектов.
в итоге что? Роль CSS в отрисовке
Таким образом, твой CSS-файл напрямую не "рисует" страницу, пока браузер идет по нему сверху вниз. Вместо этого:
* CSS-файл должен быть полностью обработан для создания CSSOM.
* CSSOM является основой для создания Дерева Рендеринга.
* Дерево Рендеринга является основой для Компоновки и Отрисовки.
Если бы браузер пытался отрисовывать страницу, читая CSS сверху вниз, он мог бы начать рендерить один элемент, но потом, обнаружив в конце файла правило с высокой специфичностью, ему пришлось бы останавливаться, пересчитывать стили и полностью перерисовывать элемент, что привело бы к постоянному "мерцанию" и нестабильности. Построение CSSOM заранее гарантирует, что отрисовка начнется только тогда, когда у браузера есть все необходимые данные о стиле.
Все просто.
Спасибо, понятно, но все равно вот много где видел что основное поближе к верху стараются делать, например скачал тут вот более-менее относительно классическую последнюю тему для WordPress – Twenty Twenty-One, просто она идет с нормальным классическим css, а не этими json штуками всякими, даже с последним обновлением в 5 августа 2025 и короче в ней если посмотреть её css файл, там как-будто важное и основное все таки идет сверху, типа шрифтов, переменных, нормалайза, ресета, брейкпоинтов и т.п. Но скорее всего да, это наверное просто ради удобства, а не фичи чтобы быстрее основное сверху разбиралось, хотя если директиву @charset(И обязательно сверху, а не снизу или в любом месте) не пропишешь в самом вверху до всех свойств, то парсер не распарсит, но это скорее исключение.
Theme Name: Twenty Twenty-One:
/**
* SETTINGS
* File-header..........The file header for the themes style.css file.
* Fonts................Any font files, if the project needs specific fonts.
* Global...............Project-specific, globally available variables.
*
* TOOLS
* Functions............Global functions.
* Mixins...............Global mixins.
* GENERIC
* Normalize.css........Normalise browser defaults.
* Breakpoints..........Mixins and variables for responsive styles
* Vertical-margins.....Vertical spacing for the main components.
* Reset................Reset specific elements to make them easier to style in other contexts.
* Clearings............Clearings for the main components.
* ELEMENTS
* Blockquote...........Default blockquote.
* Forms................Element-level form styling.
* Headings.............H1–H6
* Links................Default links.
* Lists................Default lists.
* Media................Images, Figure, Figcaption, Embed, iFrame, Objects, Video.
* BLOCKS
* Audio................Specific styles for the audio block.
* Button...............Specific styles for the button block.
* Code.................Specific styles for the code block.
* Columns..............Specific styles for the columns block.
* Cover................Specific styles for the cover block.
* File.................Specific styles for the file block.
* Gallery..............Specific styles for the gallery block.
* Group................Specific styles for the group block.
* Heading..............Specific styles for the heading block.
* Image................Specific styles for the image block.
* Latest comments......Specific styles for the latest comments block.
* Latest posts.........Specific styles for the latest posts block.
* Legacy...............Specific styles for the legacy gallery.
* List.................Specific styles for the list block.
* Media text...........Specific styles for the media and text block.
* Navigation...........Specific styles for the navigation block.
* Paragraph............Specific styles for the paragraph block.
* Pullquote............Specific styles for the pullquote block.
* Quote................Specific styles for the quote block.
* Search...............Specific styles for the search block.
* Separator............Specific styles for the separator block.
* Table................Specific styles for the table block.
* Verse................Specific styles for the verse block.
* Video................Specific styles for the video block.
* Utilities............Block alignments.
* COMPONENTS
* Header...............Header styles.
* Footer...............Footer styles.
* Comments.............Comment styles.
* Archives.............Archive styles.
* 404..................404 styles.
* Search...............Search styles.
* Navigation...........Navigation styles.
* Footer Navigation....Footer Navigation styles.
* Pagination...........Pagination styles.
* Single...............Single page and post styles.
* Posts and pages......Misc, sticky post styles.
* Entry................Entry, author biography.
* Widget...............Widget styles.
* Editor...............Editor styles.
* UTILITIES
* A11y.................Screen reader text, prefers reduced motion etc.
* Color Palette........Classes for the color palette colors.
* Editor Font Sizes....Editor Font Sizes.
* Measure..............The width of a line of text, in characters.
*/
Браузер не обрабатывает CSS-файл сверху вниз, применяя стили по очереди к элементам. Вместо этого он сначала парсит весь CSS-код, чтобы построить специальную структуру данных, а затем использует ее для вычисления и применения стилей ко всем элементам HTML-документа.
1. Загрузка и парсинг.
2. Построение дерева рендеринга и вычисление стилей.
3. Компановка и отрисовка.
Вот и всё. Всё просто.
Дополню, пока не начали задавать вопросы:
Единственное, где порядок имеет значение, — это каскадность (например, стили, написанные позже, могут переопределить стили, написанные раньше, если у них одинаковая специфичность), но это не влияет на низкоуровневую скорость парсинга..
