1. Введение
Осталось всего несколько дней до Национального дня и Праздника Середины Осени. Скоро будет праздник. Желаю всем счастливого праздника! Я уже писал предложения и навыки написания js, так что давайте сегодня поговорим о css! Когда дело доходит до css, каждая веб-страница неотделима от css, но для css идея многих разработчиков заключается в том, что пока css можно использовать для верстки и можно выгружать рендеринг, другие детали или оптимизации не нужны. рассматривать. . Но думаю css не просто доделать верстку страницы, но и продумать много деталей для оптимизации, и это будет не так просто, как все думают.В процессе обучения, если найду какие навыки или оптимизации баллы, я также научусь использовать его! Итак, сегодня я поделюсь некоторыми предложениями по написанию CSS и оптимизацией производительности, которые я суммировал! Я надеюсь, что это поможет вам по-новому понять магию css, если, конечно, вы считаете, что есть какие-либо другие предложения. Добро пожаловать, чтобы дать указатели!
2. Правила отрисовки CSS
Во-первых, правила рендеринга CSS, как вы знаете, рендерятся справа налево! каштаны следующим образом
.nav h3 a{font-size: 14px;}Процесс рендеринга примерно таков: сначала найдите всеa, вместеaНайдите родительский элементh3, а затем вдольh3, найти.nav. Когда узел, соответствующий правилу сопоставления, находится в середине, он добавляется в набор результатов. Если корневой элемент найденhtmlЕсли совпадений нет, больше не проходить этот путь, начиная со следующегоaНачните повторять это совпадение поиска (пока на странице есть несколько самых правых узлов, которыеa).
Ссылаться на:Правила соответствия селектора CSS справа налево
3. Уровень вложенности не должен превышать 3-х уровней
В нормальных условиях уровень вложенности элементов не может превышать 3. Чрезмерная вложенность приведет к тому, что код станет раздутым, избыточным и сложным. В результате размер файла css становится больше, что приводит к потере производительности и влияет на скорость рендеринга! И это слишком зависит от структуры HTML-документа. Такой стиль css чрезвычайно сложен в обслуживании, если вы хотите изменить стиль в будущем, вам, возможно, придется использовать!importantобложка.
4. Сброс стиля
Я на данный момент придерживаюсь нейтрального мнения по этому поводу, потому что глядя на статьи в интернете, некоторые люди поддерживают использование сброса стиля, некоторые люди не поддерживают использование, и никто никого не может переубедить. В моей собственной ситуации я использовал сброс стиля, но это относительно простое резюме, код выглядит следующим образом!
body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
ol, ul {
list-style: none;
}
h1{
font-size: 24px;
}
h2{
font-size: 20px;
}
h3{
font-size: 18px;
}
h4 {
font-size: 16px;
}
h5{
font-size: 14px;
}
h6{
font-size: 12px;
}
5. Уровень стиля
Во-первых, уровни стиля css организованы следующим образом.
!important> встроенный стиль> стиль идентификатора> стиль класса> стиль имени тега.
Затем следует упомянуть, что веса, используемые комбинированными селекторами, будут накладываться друг на друга. Например, вес id равен 100, класс равен 10, а имя метки равно 1 (остальные неясны)! Такdiv.test-classВес 11,div#test101
Например, есть div
<div id="test" class="test-class" style="color:green;"></div>
Тогда веса стилей
div {color: red !improtant;}(больше, чем все ниже)<div id="test" class="test-class" style="color:black;"></div>(больше 111)div#test.test-class(111)#id.test-class(110)div#test(101)#test(100)div.test-class(11).test-class(10)div(1)*(менее 1)
6. Маржа инлайн-блока
Не объясняй, посмотри на картинку
несколько вышеpэлементmarginиpaddingОба равны 0, но поля все еще есть. Для этого есть два решения
1. Удалите пустые строки перед кодом
поясdisplay:inline-blockПустые строки перед элементами элемента удаляются следующим образом
2. Размер шрифта родительского элемента установлен на 0, что видно сразу
7. Изображение должно задавать ширину и высоту
Если на странице используются теги img, то img рекомендуется устанавливать ширину и высоту. Цель состоит в том, чтобы убедиться, что макет не будет хаотичным, когда изображение не может быть загружено из-за плохой скорости сети или по другим причинам.
Следующие каштаны, очень распространенный макет.
Но в случае, если что-то происходит и изображение не может быть загружено, рекомендуемый способ решения этой проблемы — первый.Отображение изображения по умолчанию.Даже если изображение по умолчанию не отображается, пусть изображение имеет функцию заполнителя, чтобы гарантировать, что макет не будет хаоса!
Если изображение не может быть загружено, а img не устанавливает ширину и высоту, это будет выглядеть следующим образом, и макет будет испорчен!
О настройкахwidthиheight, позвольте мне сказать кое-что кстати
1. ПК станции, рекомендуется установить свойства тега imgwidthиheight. Это позволяет избежать неправильного размещения css, который не может быть загружен.
2. Мобильная станция, рекомендуется использовать настройки cssimgизwidthиheight, так как мобильная станция должна быть адаптирована, в настройках свойствwidthиheightНегибкий, такой как использование макета rem, его нельзя установить в атрибутеwidthиheight.
3. Если картинка не фиксируется, но естьmax-widthиmax-height, то рекомендуется задать ширину и высоту в родительском элементе img. img в соответствии с родительским элементомwidthиheightнастраиватьmax-widthиmax-height.
8. Вертикальное центрирование любого элемента
Здесь показаны только картинки, без пояснений
8-1.table-cell
8-2.flex
8-3.позиция, трансформация
8-4.позиция, маржа
Этот метод не рекомендуется, потому что такой способ записи,.div2Ширина и высота должны быть установлены, иначе это 100%; например, установитеtop:0;bottom:0;Эффекты и настройкиheight:100%;это то же самое. Если вы хотите избежать этого, вы должны установитьheight.
9. Предварительная загрузка изображения
Упомянутая здесь предварительная загрузка не является ленивой загрузкой. Прежде всего, согласно моему личному научно-популярному пониманию, разница между ленивой загрузкой и предварительной загрузкой.
Ленивая загрузка:Когда страница загружается, сначала загрузите часть содержимого (обычно сначала загружается содержимое первого экрана) и дождитесь загрузки другого содержимого перед загрузкой!
Предварительная загрузка:При загрузке страницы сначала загружается часть содержимого (обычно загружается содержимое первого экрана), а другое содержимое загружается после загрузки первой загруженной части содержимого (обычно содержимого первого экрана), а затем загружается .
Оба пути заключаются в том, чтобы сократить время входа пользователей на сайт и быстрее увидеть содержимое первого экрана!
Под каштанами поместите это#preloaderЭтот элемент добавляется в html, и его можно реализовать через CSS.backgroundсвойство для предварительной загрузки изображения на закадровый фон. Пока путь к этим изображениям остается прежним, браузер будет использовать предварительно загруженные (кешированные) изображения во время рендеринга, когда они вызываются в другом месте веб-страницы. Простой, эффективный и не требует JavaScript.
#preloader {
/*需要预加载的图片*/
background: url(image1.jpg) no-repeat,url(image2.jpg) no-repeat,url(image3.jpg) no-repeat;
width: 0px;
height: 0px;
display: inline;
}Но с этим есть проблема, потому что#preloaderПредварительно загруженные изображения, загружаемые вместе с другим содержимым страницы, увеличивают общее время загрузки страницы. Итак, вам нужно использовать управление js
function preloader(urlArr,obj) {
var bgText='';
for(var i=0,len=urlArr.length;i<len;i++){
bgText+='url('+urlArr[i]+') no-repeat,';
}
obj.style.background=bgText.substr(0,bgText.length-1);
}
window.onload = function() {
preloader(['image1.jpg','image2.jpg','image3.jpg'],document.getElementById('preloader'));
}Принцип тоже очень простой, то есть сначала дайте загрузиться картинке на первом экране, а потом загрузите другие картинки. Давая#preloaderУстановите фоновое изображение, загрузите необходимые изображения, а затем, когда эти изображения должны быть загружены на страницу, берите изображения непосредственно из кеша, и не нужно получать изображения через http-запрос, поэтому загрузка происходит очень быстро .
10. Будьте осторожны с подстановочными знаками *
При создании веб-страниц часто используются следующие два метода для сброса стилей, чтобы исключить макет меток по умолчанию и отображение одной и той же метки разными браузерами.
*{margin：0；padding：0;}Вышеупомянутый метод имеет меньше кода, но низкую производительность, потому что при рендеринге ему нужно сопоставить все элементы на странице! Многие базовые стили неmarginиpaddingэлементы, такие какdiv,liЖдать. Все совпало, совершенно не нужно!
Смотрите другой способ ниже.
body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul{margin：0；padding：0;}Таким образом, кода немного больше, но производительность лучше, чем в предыдущем случае, при рендеринге только сопоставлениеbody,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ulЭлементы внутри этих элементов сmarginиpadding, нужно сбросить!
Посмотрите еще раз на пример:
.test * {color: red;}
Сопоставьте все элементы в документе, а затем сопоставьте элементы с проверкой класса до корневого узла документа.
.test a {color: red;}
Сопоставьте все элементы a в документе, а затем сопоставьте элементы с проверкой класса уровень за уровнем, пока не появится корневой узел документа.
Какой из двух методов лучше, само собой разумеется, поэтому при разработке рекомендуется избегать использования групповых селекторов.
11. Слияние, сжатие css
Этому нет хорошего объяснения, это сжатие и слияние CSS.
Сначала сжимайте css, помимо использования таких инструментов, как gulp, webpack и т. д., для сжатия кода, удаления пробелов и разрывов строк. Еще одно предложение - это сокращение свойства.
Например
margin-top:0;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
background-image: url('test.jpg');
background-position: top center;
background-repeat: no-repeat;
border-width:1px;
border-style:solid;
border-color:#000;
color:#0099FF;
можно заменить следующим
margin:0 10px 10px 10px;
background: url('test.jpg') no-repeat top center;
border:1px solid #000;
color:#09F;
Что касается слияния, я дам несколько советов в соответствии с моими собственными привычками развития:
1. Объедините общие стили, такие как заголовок, нижняя часть и боковая панель проекта, которые обычно являются общими, и их можно записать в общую таблицу стилей, напримерmain.css.
2. Упомянутый выше main.css заключается в том, что каждая страница должна быть представлена, а таблица сброса стилейreset.cssОн также нужен для каждой страницы, поэтому рекомендуется объединить main.css и reset.css в один файл и внедрить его на страницу! Меньше запросов!
3. Стиль, соответствующий каждой странице, представляет собой отдельный файл, например, главной странице соответствуетindex.css. Соответствующий стиль страницы списка продуктовproduct-list.css. Такindex.cssОн вводится только на главной странице, а другие страницы не вводятся, потому что введение - это пустая трата ресурсов запроса! Таким же образом обрабатываются и стили, соответствующие другим страницам!index.css,product-list.cssСтили других страниц будут сохранены в виде отдельных файлов и не будут объединены!
12.css вводится в голову
Браузер не начнет отображать всю страницу, пока не будут загружены все таблицы стилей, до этого браузер не будет отображать содержимое страницы, и страница останется пустой. Вот почему вы помещаете таблицу стилей в заголовок. Если он размещен в нижней части HTML-страницы, рендеринг страницы не только ожидает загрузки таблицы стилей, но и ожидания загрузки html-содержимого, чтобы пользователь мог увидеть страницу позже.
13. Избегайте @import
Есть два способа импортировать файлы стилей css, один из нихlinkэлемент, другой@import. Здесь мой совет - избегать использования@import. так как@importЭто повлияет на параллельную загрузку браузера, что приведет к дополнительной задержке загрузки страницы и увеличению времени приема-передачи. и несколько@importМожет привести к нарушению последовательности загрузки. Например, css-файлindex.cssСодержит следующее:@import url("reset.css"). Тогда браузер должен сначалаindex.cssПосле скачивания, парсинга и выполнения загружается, анализируется и исполняется второй файл reset.css. Простой обходной путь заключается в использовании<link>альтернатива@import.
14. Подумайте, как кодировать из PSD-файла
После получения визуализаций не беспокойтесь в первую очередь о картинках, сначала посмотрите на файл psd. Подумайте о том, как форматировать, эти модули можно сделать общедоступными, как модули должны называться, стилизоваться и т. д.!
Когда мы получим PSD от дизайнера, не спешите сначала писать код CSS, сначала проанализируйте всю страницу и подумайте над следующими моментами:
(1) Какие модули являются общедоступными на странице анализа, общие общедоступные модули включают заголовок, нижнюю часть, строку меню, плавающую кнопку и т. д.
(2) Проанализируйте, какие стили имеет модуль, и извлеките общие стили.Общие стили включают общие стили состояний, такие как кнопки, поля ввода, раскрывающиеся списки и другие распространенные выбранные состояния, стили отключенных состояний и т. д.
15. Решения для мелких иконок
На веб-сайте должно быть много маленьких значков.Для этих маленьких значков в настоящее время существует два решения: cssSprite (изображение спрайта), значок шрифта и преобразование изображения в base64. Сравните два метода ниже!
CSSSprite:Объедините все изображения значков в изображение png, используйте is, установите ширину и высоту узла и добавьте bacgroud-position. Отображать требуемую иконку в виде фонового изображения.Если на сайте 20 иконок, он будет запрашиваться 20 раз.С cssSprite требуется только один запрос, что значительно сокращает http-запрос. Недостаток в том, что управление не гибкое, если нужно добавить иконку, то нужно менять исходный файл объединяемой картинки, а позиционирование значка должно быть стандартизировано, иначе оно легко будет мешать позиционированию между изображениями!
Значки шрифтов:Простое и грубое понимание — относиться ко всем иконкам как к шрифту! Таким образом, вам не нужно просить фотографии. Как правило, для определения значка используется класс, при замене значка нужно только изменить имя стиля, он прост в управлении, имеет четкую семантику, гибко увеличивается и уменьшается, не вызывает искажений. Но поддерживает только монохромные изображения.
база64:Другим решением является преобразование небольших изображений значков в кодировку base64, чтобы без запроса изображений кодировку base64 можно было напрямую интегрировать в js или css, что может предотвратить такие проблемы, как некоторые относительные пути или удаление изображений.Ошибка изображения 404. Но найдите способ сгенерировать кучу кодировок base64. Вообще говоря, изображения ниже 8K преобразуются в кодировку base64. Если вы преобразуете изображение размером 50 КБ в кодировку base64, оно сгенерирует кодировку base64 с более чем 65 000 символов, а размер символов составляет почти 70 КБ! Предложение: изображения ниже 8K должны быть преобразованы в кодировку base64.
16. Не вставляйте и не пишите теги перед селекторами идентификаторов.
1. ID уникальный на странице и вес такой большой, фронт вложенный(.content #test) является полной тратой производительности. И пишите больше бессмысленного кода! Хоть это и приговор, но все же есть люди, которые допускают такую ошибку!
2. Кроме вложенности перед id не нужно добавлять теги или другие селекторы. Напримерdiv#testили.test#test. Эти два метода полностью избыточны, причина в том, что ID уникален на странице. Добавлять что-либо впереди лишнее!
17. Извлеките общие стили в общие стили
Извлеките тот же стиль длинного абзаца, что и обычный стиль, например, часто используемый плавающий стиль, одна строка, превышающая отображаемое многоточие, несколько строк, превышающие многоточие и т. д.
каштаны следующим образом
/*超出省略号*/
/*<p class='text-ellipsis'></p>*/
.text-ellipsis{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/*清除浮动*/
/*<div class='clearfix'></div>*/
.clearfix:after {
display: block;
content: '';
clear: both;
height:0;
}
18. Оптимизация анимации CSS3
В моей предыдущей статье (проблемы мобильной веб-разработки и краткое изложение оптимизации) я также написал предложения по оптимизации по этому поводу. Два упомянутых выше предложения:
1. Анимация или переход CSS3 должны использоваться как можно чаще.transformиopacityдля анимации, не используйтеleftиtop.
2. Доступны анимации и переходыcss3решено, не используйтеjs. Если это сложная анимация, можно использоватьcss3+js(илиhtml5+css3+js) с развитием эффект только неожиданный, а не невозможный.
Вот дополнение: анимаций не должно быть слишком много, особенно для мобильных сайтов, иначе будут проблемы с производительностью, такие как загрузка процессора сразу, пропуск кадров и т.д. Также не рекомендуется использовать аппаратное ускорение для каждого элемента.
Ссылка на ссылку:
Оптимизация производительности анимации CSS
Оптимизация производительности анимации CSS3
Аппаратное ускорение анимации CSS
веб-анимация
19. минимальная ширина корпуса
Это проблема, которая может возникнуть на ПК-станции, и все должны знать об этом. Просто скажите это ниже!
Например, каштан ниже, веб-сайт, ширина содержимого страницы составляет 1200 пикселей. Выглядит нормально, ничего особенного
Если на этот раз, уменьшите окно страницы. Менее 1200 пикселей, на странице появляется полоса прокрутки, а затем перетащите полосу прокрутки в крайнее правое положение.
Таким образом, вы обнаружите, что часть изображения и фон вверху неисправны! Решить эту проблему тоже очень просто, достаточно датьbodyплюсmin-width. Значением является значение ширины страницы.body{min-width:1200px;}
Повторите предыдущий шаг, как бы вы ни меняли размер окна браузера, это нормально
Причина, по которой возникает эта проблема, заключается в том, что, например, когда окно уменьшается до 900 пикселей, ширина содержимого меньше 1200 пикселей. Это горизонтальная полоса прокрутки, ноbodyШирина 900px. В это время, если есть элементы (такие как серая область изображения и розовое изображение), относительныйbodyизwidthУстановите 100%, тогда ширина этих элементов на самом деле будет 900 пикселей. Так что будут визуальные неисправности! Решение состоит в том, чтобы датьbodyплюсmin-width. позволятьbodyШирина минимума не будет меньше ширины содержимого!
20. Резюме
Это краткое изложение моих советов по написанию CSS и оптимизации производительности. CSS определенно не тот язык, который можно использовать до тех пор, пока его можно использовать или пока с помощью CSS можно хорошо выполнить макет. CSS дает мне ощущение, что начать очень легко, но если вы хотите хорошо использовать CSS, вам все равно придется потратить время на исследования. CSS или CSS3, есть еще много вещей, которые можно оптимизировать. Использование CSS или CSS3 может сэкономить много кода js, и сделанные вещи потрясающие. Вам все еще нужно продолжать изучать знания!
Если вы считаете, что какая-то часть моей статьи написана неправильно или неправильно, пожалуйста, поправьте меня. Если у вас есть какие-либо другие предложения, пожалуйста, подскажите, пусть все общаются друг с другом, учатся друг у друга и добиваются прогресса вместе! Напоследок поздравляю всех с праздником!
------------------------- Великолепная разделительная линия --------------------
Хотите узнать больше, обратите внимание на мой публичный аккаунт WeChat: В ожидании книжного магазина