Запись эффективного CSS
Важно сохранить перспективу. Изучая математику, высшая математика, calc, и т.д. является большой для мыслительных процессов, и много положений программирования ожидают и могут использовать математические и математические понятия. Но много заданий программирования используют мало ни для какой математики вообще.
Информатика, будучи математической дисциплиной, конечно, требует большого количества математики. Но немного заданий программирования являются производными науки аккомпанемента, CS является очень определенной дисциплиной. Существует причина, почему школы IT теперь имеют Разработку программного обеспечения как отдельную дисциплину от CS. Они - совсем другие поля.
Наука Аккомпанемента, например, не готовит Вас хорошо к миру большинства веб-приложений. И разработка программного обеспечения не готовит Вас хорошо к дизайну компилятора и разработке ядра.
8 ответов
Прежде всего - предложения в этой статье не для html-страниц - они предназначены специально для пользовательского интерфейса Mozilla - XUL , поэтому он может лучше всего подходит для XUL, но не для html.
Применение CSS к средней HTML-странице - одно из самых быстрых действий, чем при загрузке страницы.
Кроме того, в статье может быть предложен самый быстрый способ применения правил CSS, но какой ценой? Например, они предлагают не иметь более одного класса на правило:
BAD - .treecell.indented {}
ХОРОШО - с отступом от .treecell {}
Это почти возмутительно . Это может привести к более быстрому CSS, но кого это волнует? Предполагая, что у вас уже есть .treecell и .indented , следование этим предложениям приводит к сложной логике , более сложному обслуживанию, дублированным правилам css , сложнее JavaScript (который стоит намного дороже, чем CSS) и т. Д.
Они предлагают не использовать все богатство селекторов CSS и заменить эти селекторы плоскими классами, что является позором.
Потомком может быть ребенок / внук / правнук и т. Д.? А у ребенка только одна глубина?
Да, именно так. Поскольку дочерний элемент может иметь только одну глубину, движку рендеринга требуется гораздо меньше места для рекурсивного поиска, чтобы проверить, соответствует ли правило или нет.
И да, эта статья касается как Firefox, так и браузеров в целом. Большая часть (все?) Того, что в нем, применимо к любому механизму рендеринга страниц.
... пока я пишу, я думаю, что, возможно, понял это. Потомком может быть ребенок / внук / правнук и т. Д.? А у ребенка только одна глубина?
В самом деле.
Я могу добавить одну вещь по поводу эффективности: Не используйте *, если вы действительно не имеете в виду . Это довольно сложный процесс с точки зрения правил, и большинство людей может уйти, просто указав элементы, на которые они действительно хотят нацеливаться.
«parent> child» находится только на одну ступень ниже, тогда как «предок-потомок» может быть на одну или несколько ступеней вниз.
Еще лучше использовать теги «#id» везде, где возможно, так что будет меньше поиска DOM.
CSS UI предназначен для стилизации внутренних компонентов браузера - диалогового окна настроек, интерфейсов расширений и т. Д.
Потомки и потомки разные, потомки гораздо более специфичны и в результате гораздо меньше имеют подлежит рассмотрению.
О'Рейлли " Даже более быстрые веб-сайты » содержит целую главу под названием« Упрощение селекторов CSS ». Он ссылается на вашу ссылку в Mozilla.
Я думаю, что стоит иметь в виду два момента.
Да, если бы вы сделали это, насколько это возможно, ваш HTML и CSS были бы беспорядочно стилей и, возможно, даже более неэффективными из-за чтобы добавить размер файла. Разработчик должен выбрать наилучший баланс. Не пытайтесь оптимизировать каждую строчку во время ее написания, заставьте ее работать, а затем посмотрите, что может быть полезно.
Как заметил другой комментатор, браузеру требуются миллисекунды, чтобы понять, как применять ваши стили при загрузке страницы. Однако там, где это может иметь гораздо большее влияние, является DHTML. Каждый раз, когда вы меняете DOM, браузер повторно применяет всю вашу таблицу стилей к странице. В этом сценарии многие неэффективные селекторы могут оказать видимое влияние на вашу страницу (воспринимаемая задержка / невосприимчивость).
Проблема с дочерним селектором в том, что он не так хорошо поддерживается. Конечно, это могло быть исправлено в новых браузерах IE.
В любом случае, при написании CSS для веб-страницы это не будет иметь большого значения. Я сомневаюсь, что доли секунды, которые вы сэкономили при загрузке страницы, даже были бы замечены. Эта статья больше ориентирована на людей, которые пишут что-то для реального браузера, а не для веб-сайтов.
Документация для Google Page Speed (надстройка Firefox / Firebug) включает хорошую страницу по эффективному CSS .