[{"data":1,"prerenderedAt":150},["ShallowReactive",2],{"$fBBpTfVNscNso8oZ6kMWev1q5YxO_BzLBmwYt5WV5-QU":3},{"article":4,"similarArticles":16,"tagCounts":147},{"slug":5,"content":6,"notes":7,"groupedNotes":8,"title":9,"date":10,"description":11,"tags":12,"author":15},"mdn-contributors-css-performance-optimization-2025","\u003Cp>Данная обучающая статья посвящена техникам оптимизации CSS для повышения производительности веб-сайтов. Основная цель — уменьшить блокировку отрисовки (render-blocking) и минимизировать количество перекомпоновок (reflow) страниц.\u003C\u002Fp>\n\u003Ch4 id=\"подготовка-и-измерение\">Подготовка и измерение\u003C\u002Fh4>\n\u003Cp>Прежде чем приступать к оптимизации, необходимо измерить текущую производительность сайта с помощью встроенных инструментов браузера (Network и Performance мониторы), чтобы понять, какие части страницы загружаются слишком долго.\u003C\u002Fp>\n\u003Ch4 id=\"оптимизация-рендеринга-и-cssom\">Оптимизация рендеринга и CSSOM\u003C\u002Fh4>\n\u003Cp>Браузер не может отрисовать страницу, пока не построит объектную модель CSS (CSSOM). Для ускорения этого процесса статья предлагает следующие методы:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Удаление неиспользуемых стилей\u003C\u002Fstrong>: Лишние правила замедляют парсинг, поэтому важно поддерживать модульность кода и вовремя удалять ненужные стили.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Разделение CSS на модули\u003C\u002Fstrong>: Использование атрибута \u003Ccode>media\u003C\u002Fcode> в теге \u003Ccode><link>\u003C\u002Fcode> позволяет браузеру определять, какие стили критичны для текущего экрана, а какие (например, мобильные стили) можно загрузить без блокировки отрисовки.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Минификация и сжатие\u003C\u002Fstrong>: Удаление пробелов (минификация) и использование сжатия на стороне сервера (например, gzip) значительно сокращают размер файлов.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Упрощение селекторов\u003C\u002Fstrong>: Сложные селекторы увеличивают время парсинга и размер файла. Рекомендуется использовать простые и менее специфичные селекторы.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Ограничение области применения\u003C\u002Fstrong>: Избегайте использования универсальных селекторов (\u003Ccode>*\u003C\u002Fcode>) и избыточного применения стилей к элементам, которые могут наследовать свойства от родителей.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch4 id=\"работа-с-ресурсами-и-изображениями\">Работа с ресурсами и изображениями\u003C\u002Fh4>\n\u003Cul>\n\u003Cli>\u003Cstrong>CSS-спрайты\u003C\u002Fstrong>: Объединение множества мелких изображений (иконок) в один файл сокращает количество HTTP-запросов.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Предзагрузка критических ресурсов\u003C\u002Fstrong>: Использование \u003Ccode>rel=\"preload\"\u003C\u002Fcode> для CSS, шрифтов и ключевых изображений позволяет браузеру начать их загрузку как можно раньше.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch4 id=\"оптимизация-анимаций\">Оптимизация анимаций\u003C\u002Fh4>\n\u003Cp>Анимации могут как улучшить восприятие интерфейса, так и замедлить его. Статья рекомендует:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Использовать \u003Cstrong>CSS-анимации\u003C\u002Fstrong> вместо JavaScript-анимаций там, где это возможно.\u003C\u002Fli>\n\u003Cli>Анимировать только те свойства, которые не вызывают перекомпоновку (reflow) и перерисовку (repaint), такие как \u003Ccode>transform\u003C\u002Fcode> и \u003Ccode>opacity\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>Переносить нагрузку по обработке анимаций на \u003Cstrong>GPU\u003C\u002Fstrong> (композитинг), используя 3D-трансформации или свойство \u003Ccode>will-change\u003C\u002Fcode> (последнее следует использовать осторожно и только как крайнюю меру).\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch4 id=\"производительность-шрифтов\">Производительность шрифтов\u003C\u002Fh4>\n\u003Cp>Шрифты могут быть очень тяжелыми и замедлять загрузку. Для их оптимизации предлагается:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Ограничивать количество используемых шрифтов (2–3 на сайт).\u003C\u002Fli>\n\u003Cli>Использовать \u003Cstrong>сабсеттинг\u003C\u002Fstrong> (subsetting) — создание файлов шрифтов, содержащих только необходимые символы.\u003C\u002Fli>\n\u003Cli>Применять свойство \u003Ccode>font-display: swap\u003C\u002Fcode>, чтобы текст оставался видимым (с использованием резервного шрифта) во время загрузки основного файла.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch4 id=\"продвинутые-техники-css-containment\">Продвинутые техники: CSS Containment\u003C\u002Fh4>\n\u003Cp>Модуль \u003Cstrong>CSS Containment\u003C\u002Fstrong> позволяет изолировать части страницы, чтобы браузер мог оптимизировать их отрисовку независимо друг от друга:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Свойство \u003Ccode>contain\u003C\u002Fcode> позволяет ограничить область пересчета стилей и макета.\u003C\u002Fli>\n\u003Cli>Свойство \u003Ccode>content-visibility\u003C\u002Fcode> в сочетании с \u003Ccode>contain-intrinsic-size\u003C\u002Fcode> позволяет браузеру пропускать рендеринг элементов, которые находятся вне зоны видимости (viewport), что значительно ускоряет начальную загрузку.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>В заключение упоминается, что использование современных селекторов, таких как \u003Ccode>:has()\u003C\u002Fcode>, требует осторожности из-за возможных проблем с производительностью в определенных сценариях.\u003C\u002Fp>",[],{},"CSS performance optimization (2025)","2026-07-22","Оптимизация CSS для быстрого рендера — блокировка отрисовки, reflow, анимации на GPU, шрифты и CSS Containment.",[13,14],"Frontend","Программирование","MDN Contributors",[17,24,30,35,43,49,55,62,68,78,83,88,94,99,107,113,120,127,133,141],{"slug":18,"title":19,"date":10,"author":20,"tags":21,"searchText":23},"simpson-kyle-you-don-t-know-js-async-performance-2015","You Don't Know JS: Async & Performance (2015)","Simpson, Kyle",[22,13,14],"Javascript","you don't know js: async & performance (2015) асинхронность и производительность в javascript — событийный цикл, промисы, генераторы, web workers и практики бенчмаркинга. simpson, kyle javascript frontend программирование",{"slug":25,"title":26,"date":10,"author":27,"tags":28,"searchText":29},"stemmler-khalil-client-side-architecture-basics-i","Client-Side Architecture Basics: I. Architecture (2020)","Stemmler, Khalil",[13,14],"client-side architecture basics: i. architecture (2020) проблемы mvc и mvp во фронтенде и путь к клиентской архитектуре — разделение домена, приложения и инфраструктуры. stemmler, khalil frontend программирование",{"slug":31,"title":32,"date":10,"author":27,"tags":33,"searchText":34},"stemmler-khalil-client-side-architecture-basics-ii","Client-Side Architecture Basics: II. Principles (2020)",[13,14],"client-side architecture basics: ii. principles (2020) принципы cqs и разделения ответственности для фронтенда — чтение и запись, вертикальные срезы и выбор инструментов. stemmler, khalil frontend программирование",{"slug":36,"title":37,"date":38,"author":39,"tags":40,"searchText":42},"notashelf-taste-is-all-that-s-left-2026","Taste Is All That's Left (2026)","2026-08-10","notashelf",[41,14],"AI","taste is all that's left (2026) когда генеративный ии обнуляет стоимость воплощения, вкус остаётся единственным дефицитом — трение ученичества, кураторство и отказ от «slop». notashelf ai программирование",{"slug":44,"title":45,"date":10,"author":46,"tags":47,"searchText":48},"brooks-frederick-p-jr-the-mythical-man-month-essays-on","The Mythical Man-Month: Essays on Software Engineering (1995)","Brooks, Frederick P., Jr.",[14],"the mythical man-month: essays on software engineering (1995) классика управления разработкой — мифический человеко-месяц, хирургические бригады, концептуальная целостность и отсутствие серебряной пули. brooks, frederick p., jr. программирование",{"slug":50,"title":51,"date":10,"author":52,"tags":53,"searchText":54},"spolsky-joel-the-law-of-leaky-abstractions-2002","The Law of Leaky Abstractions (2002)","Spolsky, Joel",[14],"the law of leaky abstractions (2002) закон дырявых абстракций — почему любое упрощение в программировании рано или поздно просачивается и не освобождает от изучения основ. spolsky, joel программирование",{"slug":56,"title":57,"date":58,"author":59,"tags":60,"searchText":61},"kholmatova-alla-design-systems-a-practical-guide-to","Design Systems: A practical guide to creating design languages for digital products","2026-07-16","Kholmatova, Alla",[14],"design systems: a practical guide to creating design languages for digital products практическое руководство по созданию и поддержке дизайн-систем для цифровых продуктов — от теоретических основ к процессам. kholmatova, alla программирование",{"slug":63,"title":64,"date":58,"author":65,"tags":66,"searchText":67},"martin-robert-c-clean-code-a-handbook-of-agile-software","Clean Code: A Handbook of Agile Software Craftsmanship (2025)","Martin, Robert C.",[14],"clean code: a handbook of agile software craftsmanship (2025) практическое руководство по ремеслу разработки: читаемый код, рефакторинг и дисциплины тестирования в agile-среде. martin, robert c. программирование",{"slug":69,"title":70,"date":71,"author":72,"tags":73,"searchText":77},"frothingham-a-l-kniga-ierofeya-stefana-bar-sudaili-i","Оригенизм и «Книга Иерофея» Стефана бар Судаили и оригенизм (из Frothingham, 1886)","2026-09-27","Frothingham, A. L.",[74,75,76],"Ориген","Сирия","Ареопагит","оригенизм и «книга иерофея» стефана бар судаили и оригенизм (из frothingham, 1886) связь «книги иерофея» с оригенистским возрождением vi века: параллели в доктрине апокатастасиса и сирийском мистическом пантеизме. frothingham, a. l. ориген сирия ареопагит",{"slug":79,"title":80,"date":71,"author":72,"tags":81,"searchText":82},"frothingham-a-l-kniga-svyatogo-ierofeya-o-sokrovennykh","Книга святого Иерофея о сокровенных тайнах Божества (конспект из Frothingham, 1886)",[75,74,76],"книга святого иерофея о сокровенных тайнах божества (конспект из frothingham, 1886) конспект сирийского трактата стефана бар судаили: происхождение мира, восхождение ума, отождествление со христом и апокатастический финал. frothingham, a. l. сирия ориген ареопагит",{"slug":84,"title":85,"date":71,"author":72,"tags":86,"searchText":87},"frothingham-a-l-stephen-bar-sudaili-the-syrian-mystic-and","Stephen bar Sudaili the Syrian Mystic, and the Book of Hierotheos (1886)",[75,76,74],"stephen bar sudaili the syrian mystic, and the book of hierotheos (1886) филологическое и богословское исследование «книги иерофея» как псевдоэпиграфа стефана бар судаили и проблемы корпуса псевдо-дионисия. frothingham, a. l. сирия ареопагит ориген",{"slug":89,"title":90,"date":71,"author":91,"tags":92,"searchText":93},"guillaumont-antoine-bogoslovsko-kosmologicheskaya-sistema","Богословско-космологическая система «Képhalaia gnostica» в контексте оригенизма IV века (из Guillaumont, 1962)","Guillaumont, Antoine",[74,75],"богословско-космологическая система «képhalaia gnostica» в контексте оригенизма iv века (из guillaumont, 1962) протология и космология «гностических глав» евагрия: хенада разумных духов, «первое движение» и место трактата в оригенизме iv века. guillaumont, antoine ориген сирия",{"slug":95,"title":96,"date":71,"author":91,"tags":97,"searchText":98},"guillaumont-antoine-les-kephalaia-gnostica-d-evagre-le","Les «Képhalaia gnostica» d’Évagre le Pontique et l’histoire de l’origénisme chez les Grecs et chez les Syriens (1962)",[74,75],"les «képhalaia gnostica» d’évagre le pontique et l’histoire de l’origénisme chez les grecs et chez les syriens (1962) монография о «гностических главах» евагрия и оригенистских спорах iv–vi веков; открытие нецензурированной сирийской версии s2. guillaumont, antoine ориген сирия",{"slug":100,"title":101,"date":71,"author":102,"tags":103,"searchText":106},"levy-oscar-prefatory-letter-to-the-world-significance-of","Prefatory Letter to The World Significance of the Russian Revolution (1920)","Levy, Oscar",[104,105],"Политика","История","prefatory letter to the world significance of the russian revolution (1920) философско-исторический разбор победы большевизма: еврейский идеализм, либеральная демократия и мессианские ожидания в контексте революции 1917 года. levy, oscar политика история",{"slug":108,"title":109,"date":71,"author":102,"tags":110,"searchText":112},"levy-oscar-the-idiocy-of-idealism-1940","The Idiocy of Idealism (1940)",[111,104],"Ницше","the idiocy of idealism (1940) памфлет леви о кризисе европы: ницшеанская критика идеализма и попытка объяснить нацизм и большевизм через моральные и религиозные идеи. levy, oscar ницше политика",{"slug":114,"title":115,"date":71,"author":116,"tags":117,"searchText":119},"limonov-eduard-distsiplinarnyi-sanatorii-1993","«Дисциплинарный санаторий» (1993)","Лимonov, Эдуард",[118],"Литература","«дисциплинарный санаторий» (1993) социально-философское эссе о «санатории» постиндустриального общества: смена прямого насилия мягким контролем, медиакратия и инфантилизация масс. лимonov, эдуард литература",{"slug":121,"title":122,"date":71,"author":123,"tags":124,"searchText":126},"louth-andrew-the-reception-of-dionysius-up-to-maximus-the","The Reception of Dionysius up to Maximus the Confessor (2008)","Louth, Andrew",[76,125],"Христианство","the reception of dionysius up to maximus the confessor (2008) ранний приём псевдо-дионисиевского корпуса в византийской традиции до максима исповедника: переводы, комментарии и богословские адаптации. louth, andrew ареопагит христианство",{"slug":128,"title":129,"date":71,"author":130,"tags":131,"searchText":132},"malone-alice-elisabeth-s-nietzsche-2024","Elisabeth’s Nietzsche (2024)","Malone, Alice",[111],"elisabeth’s nietzsche (2024) критика мифа «заговора элизабет»: сравнение её правок с прижизненными текстами и переоценка ответственности самого ницше за расистскую рецепцию. malone, alice ницше",{"slug":134,"title":135,"date":71,"author":136,"tags":137,"searchText":140},"obraz-boga-v-gimne-kleanfa","Образ Бога в гимне Клеанфа","Claude",[138,139],"Теология","Стоицизм","образ бога в гимне клеанфа богословский разбор гимна клеанфа: зевс как κοινὸς λόγος, имманентная царственность, провидение и этика участия в общем νόμος. claude теология стоицизм",{"slug":142,"title":143,"date":71,"author":144,"tags":145,"searchText":146},"ramelli-ilaria-the-christian-doctrine-of-apokatastasis-a","The Christian Doctrine of Apokatastasis. A Critical Assessment from the New Testament to Eriugena (2013)","Ramelli, Ilaria",[74,125,76],"the christian doctrine of apokatastasis. a critical assessment from the new testament to eriugena (2013) систематическая реконструкция христианского учения об апокатастасисе от новозаветных текстов до иоанна скота эриугены. ramelli, ilaria ориген христианство ареопагит",{"Frontend":148,"Программирование":149},4,9,1790540349727]