Обобщите некоторый опыт написания CSS, который я узнал, слушал, смотрел и спрашивал, и напишите эффективный CSS — поговорим об эффективности рендеринга CSS, которая связана с эффективностью рендеринга и потребляемыми ресурсами. Часть написана исходя из моего собственного понимания. Не исключены ошибки и неточности. Пожалуйста, выскажите свое мнение.
1. Шестнадцатеричное значение цвета, сочетание цифр и регистра.
При записи шестнадцатеричных значений цвета вы можете использовать строчные буквы или опускать их до 3 цифр. Нет убедительных данных, подтверждающих, влияет ли этот метод записи на эффективность рендеринга браузера, но стандарт по умолчанию для шестнадцатеричных значений цвета. Это заглавная буква и шестизначное число. Нежелание рисковать в неизвестных ситуациях снижает эффективность рендеринга.
* Отклонено — цвет:#f3a;
* Рекомендуется использовать - цвет:#FF33AA;
2. Разница между отображением и видимостью
Они используются для установки или получения информации о том, отображается ли объект. Отображение скрытых объектов не сохраняет физическое пространство, а видимость сохраняет физическое пространство, занимаемое скрытыми объектами. Когда браузер отображает занятое физическое пространство, ресурсы потребляются.
* Устарело — видимость: скрыта;
* Рекомендуется использовать - display:none;
3. Разница между border:none и border:0;
Подобно взаимосвязи между отображением и видимостью, пространство не резервируется и не резервируется соответственно. Подробнее о границе:0; Хотя границу можно скрыть, она сохранит для вас использование цвета границы/стиля границы.
* Отклонено — граница:0;
* Рекомендуется использовать - border:none;
4. Слишком маленькие фоновые изображения не следует размещать в виде мозаики.
Хотя размер файла фонового изображения шириной и высотой 1 пиксель очень мал, для рендеринга панели шириной и высотой 500 пикселей требуется повторная мозаика 2500 раз. Повышение эффективности рендеринга фонового изображения связано с размером и объемом изображения. Самый большой размер файла изображения остается около 70 КБ.
* Отклонено: мозаика фоновых изображений шириной и высотой менее 8 пикселей.
*Рекомендуется к использованию - фоновое изображение среднего размера и размера.
5. IE-фильтры
Помимо потребления ресурсов, фильтры IE также имеют проблемы с совместимостью. Существует фильтр, который делает PNG прозрачным. Вы можете избежать использования этого фильтра, сделав GIF или JPG прозрачными. В IE6 рекомендуется использовать только прозрачность GIF, поскольку IE7 и более поздние версии уже поддерживают прозрачность PNG.
* Неодобрение, злоупотребление фильтрами IE не только потребляют ресурсы, но и вызывают проблемы совместимости.
* Рекомендуется, лучше выбрать другие методы, чтобы избежать использования фильтров.
6. *{margin:0; padding:0;}, чтобы избежать различий в стиле браузера.
Подстановочный знак * инициализирует все теги, а рендеринг браузера потребляет определенные ресурсы. Некоторые теги практически одинаковы в разных браузерах, а некоторые больше не рекомендуются (поскольку вы не будете их использовать). Для их повторной инициализации не требуются подстановочные знаки. Это может сэкономить некоторые ресурсы.
* Устарело, используйте * подстановочный знак
* Отклонено, таблица кнопки b диапазона div и другие теги должны быть включены в подстановочные знаки для управления внутренними и внешними стилями заполнения.
* Рекомендуется выборочно использовать подстановочные знаки для управления стилями внутренней и внешней заливки.
7. Не добавляйте дополнительные теги для описания класса или идентификатора.
Если у вас есть селектор, который использует id в качестве ключевого селектора, не добавляйте дополнительные имена тегов. Поскольку идентификатор уникален, не следует снижать эффективность сопоставления по несуществующей причине.
* Устарело — button#backButton { }
* Устарело — .menu-left #newMenuIcon { }
* Рекомендуется использовать - #backButton { }
* Рекомендуется использовать - #newMenuIcon { }
8. Постарайтесь выбрать самый особенный класс для хранения селектора.
Одной из основных причин снижения эффективности системы является то, что мы используем слишком много селекторов в классах тегов. Добавляя классы к элементам, мы можем разделить категории на классы, чтобы нам не приходилось тратить время на сопоставление слишком большого количества селекторов для одного тега.
* Устарело: Treeitem[mailfolder="true"] > Treerow > Treecell { }
* Рекомендуется использовать - .treecell-mailfolder { }
9. Избегайте селекторов потомков
Селектор потомков — самый ресурсоемкий селектор в CSS. Это действительно очень ресурсоемко, особенно когда селектор использует класс метки или общий класс. Во многих случаях нам действительно нужен подселектор. Если явно не указано иное, использование селекторов-потомков строго запрещено в CSS пользовательского интерфейса.
* Устарело - Treehead Treerow TreeCell { }
* Лучше, но все равно не работает (см. следующую статью) — верхушка дерева > строка дерева > ячейка дерева { }
10. Не включайте подселекторы в классы меток.
Не используйте подселекторы в классах меток. В противном случае каждое появление элемента дополнительно увеличит время сопоставления. (Особенно, если селектор, скорее всего, будет совпадать)
* Устарело — верхушка дерева > строка дерева > ячейка дерева { }
* Рекомендуется использовать - .treecell-header { }
11. Обратите внимание на использование всех подселекторов.
Используйте субселекторы осторожно. Если вы можете придумать способ не использовать его, не используйте его. В частности, деревья и меню RDF часто используют подселекторы, подобные этому.
* Устарело: Treeitem[IsImapServer="true"] > Treerow > .tree-folderpane-icon { }
Помните, что свойства RDF можно копировать в шаблоны! Используя это, мы можем скопировать атрибуты RDF в дочерние элементы XUL, которые мы хотим изменить на основе этого атрибута.
* Рекомендуется использовать - .tree-folderpane-icon[IsImapServer="true"] { }