Ачаалах хурдыг сайжруулахын тулд олон CSS сонгогчдыг бүлэглээрэй
Үр ашиг нь амжилттай вэбсайт дахь чухал хүчин зүйл юм. Энэ сайт онлайн зураг хэрхэн ашигладаг үр дүнтэй байх ёстой. Энэ нь сайтын үйлчлүүлэгчдэд сайнаар ажиллаж, төхөөрөмж дээрээ хурдан ачаалах боломжийг хангахад тусална. Үр ашгийг хүртэх нь мөн таны ерөнхий үйл явцын нэг хэсэг бөгөөд таныг сайт дээр цагтаа, төсөвт ахиц дэвшил гаргахад тусалдаг.
Эцэст нь, үр ашиг нь вэбсайтын бүтэц, урт хугацааны амжилт, тэр дундаа тухайн сайтын CSS хуудсанд зориулж бичсэн загварын хувьд үүрэг гүйцэтгэдэг. Илүү уян хатан, цэвэр CSS файлуудыг үүсгэх чадвартай байх нь хамгийн тохиромжтой бөгөөд үүнийг олон арга замуудыг нэгтгэх замаар хийх боломжтой арга замуудын нэг юм.
Бүлэг сонгох
CSS сонгогчдыг бүлэглэх үед та хэв маягийн хуудсандаа стилийг давтахгүйгээр хэд хэдэн өөр элементүүдэд ижил хэв маягийг хэрэглэдэг. Хоёр, гурван, эсвэл бүр илүү олон CSS дүрмүүдтэй байхын оронд бүгд ижил зүйлийг хийдэг (жишээ нь, улаан өнгийг өнгөөр нь тохируулаарай), танд нэг хуудсанд зориулсан CSS дүрэм байна.
Энэ "сонгогчдын бүлэглэл" яагаад хуудсыг ашигласан олон шалтгаан байдаг. Эхлээд та хэв маягийн хуудас жижиг болж, илүү хурдан ачаална. Загварын хуудсууд нь удаан ачаалалтай сайтуудтай холбоотой гол буруутануудын нэг биш юм. CSS файлууд нь текст файлууд учраас CSS хуудаснууд нь маш жижиг, файлын хэмжээний хувьд ухаалаг биш, тохиромжгүй зургуудтай харьцуулахад. Гэсэн хэдий ч, бага зэрэг тоологддог бөгөөд хэрвээ та CSS-ийн зарим хэмжээг хусч, хуудаснуудаа хурдан ачаалж чадвал энэ нь үргэлж сайн зүйл юм.
Ер нь, сайтуудын ачааллын дундаж хурд 3 секундээс бага байх; 3-7 секунд орчим дундажтай, 7 секундээс их удаан байдаг. Эдгээр цөөхөн тоогоор тэд сайтдаа хүрэхийн тулд чадах бүхнээ хийх хэрэгтэй! Тиймээс та вэбсайтаа CSS сонгогчдыг ашиглан хурдан шуурхай байлгахад туслах болно.
CSS хэрхэн сонгох вэ
CSS загварын сонголтын булгийг таны хэв маягийн хуудсан дээр бүлэглэхийн тулд та загварт олон бүлэг сонгогдсон хэсгийг салгахын тулд комманд ашиглана . Доорх жишээ нь загвар нь p ба div элементүүдэд нөлөөлдөг:
div, p {color: # f00; }Энэ нь үндсэндээ "ба" гэсэн утгатай. Энэ сонгон шалгаруулагч нь бүх элементийн элементүүд болон бүх хуваах элементэд хамаарна. Хэрвээ таслал байхгүй бол хуваах хүүхдийн бүх элементүүд байх болно. Энэ нь маш олон төрлийн сонгон шалгаруулагч болж байгаа тул энэ таслал нь сонгогчдын утгыг өөрчилдөг.
Аливаа сонгон шалгаруулагчийн хэлбэрийг бусад сонгон шалгаруулагчаар бүлэглэнэ. Энэ жишээнд анги сонгон шалгаруулагчийг ID сонгон шалгаруулагчаар бүлэглэнэ:
p.red, #sub {color: # f00; }Энэ загвар нь "улаан" гэсэн ангиллын шинж чанар бүхий аливаа догол мөрөнд хамаарна. Мөн "дэд" гэсэн ID шинж чанар бүхий ямар элемент (бид ямар төрлийг зааж өгөөгүйгээс) хамаарна.
Та хэд хэдэн сонгон шалгаруулагчдыг нэгтгэж, нэг үгээр сонгож, сонгон шалгаруулагчдыг нэгтгэн сонгож болно. Энэ жишээнд дөрвөн өөр сонгон шалгаруулагч орно:
p, .red, #sub, div a: link {color: # f00; }Тиймээс энэ CSS дүрмийг дараах байдлаар хэрэглэх болно:
- Аль нэг зүйлийн элемент
- "Улаан" ангитай ямар ч элемент
- "Дэд" -ын ID дугаар бүхий элемент
- Бэхэлгээний хэсэг болох зангуу элементийн "холбоос" псевдо класс.
Сүүлчийн сонгон шалгаруулагч нь нийлмэл сонгон шалгаруулагч юм. Та энэ CSS дүрмэндээ бусад сонголтынхоо хамт хялбархан харагдаж байгааг харж болно. Энэ дүрэмдгээр бид эдгээр 4 сонгон шалгаруулагчдын # f00 (улаан өнгөтэй) өнгөц тохируулгатай байгаа нь ижил үр дүнд хүрэхийн тулд 4 тусдаа сонгонуудыг бичих нь зүйтэй юм.
Сонгогчдыг бүлэглэх өөр нэг давуу тал бол, хэрэв та өөрчлөлт хийх шаардлагатай бол олон тооны оронд нэг CSS дүрмийг засварлаж болно гэсэн үг юм. Энэ нь ирээдүйд сайтыг хадгалахын тулд хуудасны жин, хугацааг хэмнэх гэсэн үг юм.
Ямар ч сонгогчийг бүлэглэх боломжтой
Дээрх жишээнүүдээс харахад ямар ч хүчин төгөлдөр сонгон шалгаруулагч нь бүлэгт байрлаж болох ба бүх бүлэглэсэн элементүүдэд тохирох баримт бичгийн бүх элемент нь тухайн загварын шинж чанар дээр тулгуурлан ижил загвартай байна.
Зарим хүмүүс кодлогдсон элементүүдийг тусдаа мөрөнд жагсаан бичихийг илүүд үздэг. Вэбсайт дээрх ачаалал болон ачааллын хурд ижил хэвээр байна. Жишээлбэл, та зураасан кодоор тусгаарлагдсан хэв маягийг нэг маягийн шинж чанартай болгох боломжтой.
th, td, p.red, div # firstred {color: red; }
эсвэл та нар тодорхой мөрөнд хэв маягийг жагсааж болно:
р,
td,
хуучирсан,
div # firstred
{
өнгө: улаан;
}
Олон төрлийн CSS сонгогчдыг бүлэглэхэд ашигладаг аль ч арга нь таны сайтыг хурдасгаж, урт хугацааны загварыг удирдахад хялбар болгодог.
Женнифер Кэрнин эх нийтлэл. 5/8/17 дээр Жереми Герард засварлав.