Rendering pipeline va CSS animatsiya samaradorligi: nega faqat transform va opacity

Qisqacha: Brauzer har kadrni konveyerda tayyorlaydi: uslub hisobi (style) → joylashtirish (layout) → bo'yash (paint) → yig'ish (composite). Animatsiya qaysi xususiyatni o'zgartirsa, konveyer o'sha bosqichdan boshlab qayta ishlaydi. Masalan, width, left, margin har kadrda layout'ni chaqiradi, box-shadow va background-position esa paint'ni. Eng arzoni — transform va opacity: ular faqat yig'ishni uyg'otadi. Shuning uchun silliq animatsiya uchun deyarli faqat shu ikkitasi ishlatiladi. Qolgan vositalar — will-change, contain, content-visibility — brauzerga ishni kamaytirishga yordam beradi.

Bu darsda

• Kadr konveyerining to'rt bosqichini va har xususiyat qaysi bosqichni "uyg'otishini" tushuntira olasiz.
• Qimmat animatsiyani (left, width, box-shadow) arzon transform va opacity bilan almashtira olasiz.
• will-change ni qachon qo'yish va qachon qo'ymaslikni bilasiz.
• contain va content-visibility: auto bilan brauzer ishini cheklay olasiz.
• DevTools'ning Performance, Rendering va Layers panellarida animatsiyani o'lchay olasiz.

Oldin bilishingiz kerak: Critical Rendering Path, Renderni nima to'xtatadi, @keyframes va animation, z-index va stacking context.

1. Nega bu kerak?

Kirish va chiqish animatsiyalari darsida elementlarni paydo qilish va yopishni o'rgandik. Kompyuterda hammasi silliq edi. Endi o'sha sahifani eski, arzon Android telefonda oching. Menyu "sakrab-sakrab" ochiladi, karta hover'da titraydi.

Sabab ko'pincha kodning ma'nosida emas, qaysi xususiyat tanlanganida. Ekranda bir xil ko'rinadigan ikki animatsiya brauzer uchun o'n barobar farqli ish bo'lishi mumkin.

Renderni nima to'xtatadi darsida uch narxni ko'rgan edik: reflow, repaint va composite. U yerda bu nazariya edi. Bugun uni animatsiyaga qo'llaymiz, Chrome'da o'lchaymiz va har qimmat animatsiyaning arzon o'rinbosarini yozamiz.

O'xshatish: choyxonada Otabek choynakni stolga olib boryapti. Choynakni ko'tarib olib borish — faqat uning o'zi harakatlanadi (transform). Stolni surib borish esa — mehmonlar ham o'rnidan turib, stullarini surishi kerak (layout). Natija bir xil — choynak stol yonida. Mehnat esa butunlay boshqa.

2. Kadr konveyeri

2.1 To'rt bosqich

Critical Rendering Path darsida brauzer sahifani birinchi marta qanday chizishini ko'rdik. Animatsiyada xuddi shu konveyer har kadrda qayta ishlaydi:

flowchart LR
  S["Style<br/>qaysi qoida?"] --> L["Layout<br/>qayerda, qancha?"]
  L --> P["Paint<br/>qanday rangda?"]
  P --> C["Composite<br/>qatlamlarni yig'ish"]
  C --> E["Ekran"]

Nimaga qarang: o'q faqat o'ngga yuradi. Qaysi bosqich uyg'onsa, undan keyingilarning hammasi ham ishlaydi.

• Style (uslub hisobi) — brauzer har elementga qaysi qoidalar tegishini va hisoblangan qiymatlarni topadi. DevTools buni Recalculate Style deb ko'rsatadi.
• Layout (joylashtirish) — har elementning o'lchami va joyi. Firefox buni reflow deydi.
• Paint (bo'yash) — piksellar: matn, fon, chegara, soya.
• Composite (yig'ish) — tayyor qatlamlarni to'g'ri tartibda ustma-ust qo'yish. Buni ko'pincha videokarta (GPU) bajaradi.

2.2 Kadr byudjeti

60 Hz ekranda har kadrga taxminan 16.7 ms bor, 120 Hz da — 8.3 ms (Critical Rendering Path darsidagi hisob). Bu vaqtga JavaScript, uslub, layout, paint va yig'ish — hammasi sig'ishi kerak. Sig'masa, kadr tushib qoladi va foydalanuvchi "qotish" (jank) ni sezadi.

Jank — animatsiyadagi notekislik: harakat bir tekis emas, turtki bilan ketadi.

2.3 Asosiy oqim va kompozitor oqimi

Brauzerda ikki ishchi bor:

• Asosiy oqim (main thread) — JavaScript, style, layout va paint'ni bajaradi. U band bo'lsa, hamma kutadi.
• Kompozitor oqimi (compositor thread) — faqat tayyor qatlamlarni suradi, aylantiradi va shaffoflashtiradi.

transform va opacity animatsiyasini brauzer to'liq kompozitorga topshira oladi. Shuning uchun sahifadagi og'ir skript asosiy oqimni band qilib tursa ham, bunday animatsiya silliq davom etadi. left animatsiyasi esa asosiy oqimni kutadi va skript bilan birga qotadi.

Tekshirib ko'ring: Animatsiya color ni o'zgartiradi. Konveyerning qaysi bosqichlari har kadrda ishlaydi?

3. Qaysi xususiyat qaysi bosqichni uyg'otadi

3.1 Chrome'da o'lchadik

Bitta blokni besh xil usulda bir soniya animatsiya qildik va Chrome 154 ning ichki yozuvidan (trace) bosqichlarni sanadik. Blok ostida matn bor edi:

Nimaga qarang: left bir soniyada 154 marta layout va 290 marta paint chaqirdi. Raqamlar kadrlar soniga bog'liq: sinovdagi Chrome ekransiz rejimda soniyasiga taxminan 145 kadr chizdi. transform va opacity esa bor-yo'g'i bir-ikki marta — animatsiya boshlanganda qatlam tayyorlash uchun. Qolgan hamma kadrni kompozitor o'zi surdi.

background-color ham tekshirildi. Chrome 154 uni ham kompozitorda animatsiya qildi — bu Chrome'ning o'z optimizatsiyasi, hamma brauzerda va hamma holatda kafolatlanmagan. Rang animatsiyasini "odatda paint" deb hisoblang.

3.2 Uch guruh

csstriggers.com degan sayt har xususiyat qaysi bosqichni uyg'otishini jadval qilib bergan. U bir necha yildan beri yangilanmaydi — umumiy yo'nalish uchun qarang, aniq javobni esa o'zingiz DevTools'da o'lchang.

filter ham ko'pincha kompozitorda animatsiya qilinadi, lekin blur() ning radiusi katta bo'lsa, videokartaga og'ir. Filterlar darsida ko'ramiz.

3.3 Namoyish: ko'z bir xil ko'radi

<style>
  body { font-family: system-ui, sans-serif; }
  .yol {
    position: relative;
    height: 48px;
    margin-block: 0.5rem;
    background: #e8f1ec;
  }
  .choynak {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #2f6b3a;
  }
  @keyframes chap {
    to { left: calc(100% - 48px); }
  }
  @keyframes surish {
    to { translate: calc(min(100vw, 600px) - 80px); }
  }
  @media (prefers-reduced-motion: no-preference) {
    .qimmat .choynak {
      left: 0;
      animation: chap 2s ease-in-out infinite alternate;
    }
    .arzon .choynak {
      animation: surish 2s ease-in-out infinite alternate;
    }
  }
</style>
<p>1) <code>left</code> — har kadrda layout</p>
<div class="yol qimmat"><div class="choynak"></div></div>
<p>2) <code>translate</code> — faqat kompozitor</p>
<div class="yol arzon"><div class="choynak"></div></div>

Nimaga qarang: ikkala yashil doira chapdan o'ngga va orqaga suzadi — ko'z farqni sezmaydi. Kuchli kompyuterda farq ko'rinmaydi ham. Farq kuchsiz telefonda va asosiy oqim band bo'lganda chiqadi. Tizimda harakatni kamaytirish yoqilgan bo'lsa, doiralar joyida turadi.

Maslahat: Ikkinchi animatsiyada masofani calc() bilan yozdik: translate foizi ota blokdan emas, elementning o'zidan hisoblanadi (translate: 100% — o'z eni qadar). 2D transformlar darsidagi shu farqni unutmang.

3.4 Qimmatni arzonga almashtirish

Oxirgi ikki qator — muhim hiyla. Soyaning o'zini animatsiya qilmaymiz. Kuchli soyani oldindan pseudo-elementga chizib qo'yamiz va faqat uning shaffofligini o'zgartiramiz:

<style>
  body { font-family: system-ui, sans-serif; }
  .taom-karta {
    position: relative;
    max-width: 16rem;
    margin-block: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: #fffaf0;
    box-shadow: 0 1px 3px rgb(31 42 36 / 0.2);
  }
  .taom-karta::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 8px 24px rgb(31 42 36 / 0.25);
    opacity: 0;
    pointer-events: none;
  }
  .taom-karta:hover::after {
    opacity: 1;
  }
  @media (prefers-reduced-motion: no-preference) {
    .taom-karta {
      transition: translate 0.2s ease-out;
    }
    .taom-karta::after {
      transition: opacity 0.2s ease-out;
    }
    .taom-karta:hover {
      translate: 0 -4px;
    }
  }
</style>
<article class="taom-karta">
  <h3>Osh</h3>
  <p class="narx">35 000 so'm</p>
</article>

Nimaga qarang: sichqonchani kartaga olib boring — karta 4 piksel ko'tariladi va ostidagi soya yumshoq quyuqlashadi. Brauzer bir marta ikkita soyani chizib qo'ydi, keyin faqat ikkinchisining opacity sini o'zgartirdi. pointer-events: none — pseudo-element sichqonchani "ushlab" qolmasin. Harakatni kamaytirish yoqilgan bo'lsa, soya sakrab paydo bo'ladi, karta esa joyida qoladi.

Tekshirib ko'ring: Dizayner "tugma bosilganda enini 10% qisqartiring" dedi. width: 90% ni animatsiya qilasizmi?

4. Qatlamlar va will-change

4.1 Kompozitor qatlami

Critical Rendering Path darsida brauzer sahifani shaffof plyonkalarga bo'lib bo'yashini aytgan edik. Bu plyonkalar — kompozitor qatlamlari (compositor layers). Element alohida qatlamda bo'lsa, videokarta uni boshqalarga tegmasdan suradi.

Chrome elementni alohida qatlamga o'zi chiqaradi. Masalan, transform yoki opacity animatsiyasi boshlanganda, position: fixed element uchun yoki <video> uchun. «Chrome'da o'lchadik» bo'limidagi transform ning "boshida bir marta" paint'i — aynan shu qatlamni tayyorlash edi.

4.2 will-change — oldindan ogohlantirish

Ba'zan birinchi kadr ham kechikmasin deymiz. Shunda brauzerga oldindan aytamiz: "bu element tez orada shu xususiyatini o'zgartiradi":

.taom-karta {
  will-change: transform;
}

will-change — brauzerga "tayyorlanib tur" maslahati. Brauzer elementni oldindan alohida qatlamga chiqaradi. Baseline ma'lumotiga ko'ra u 2020-yildan Baseline, keng tarqalgan.

4.3 Tejab ishlating

will-change — dori, vitamin emas. Har qatlam videokarta xotirasini egallaydi. Telefonda bu xotira kam.

/* ❌ "hammasi tez bo'lsin" — teskari natija */
* {
  will-change: transform, opacity;
}

Bunday qoida yuzlab qatlam yaratadi. Buni qatlamlar portlashi (layer explosion) deyishadi: xotira to'ladi, sahifa tezlashish o'rniga sekinlashadi.

Qoidalar:

• Faqat haqiqatan sekin ekanini o'lchagan joyingizga qo'ying.
• Faqat animatsiya qilinadigan xususiyatni yozing: will-change: transform, all emas.
• Iloji bo'lsa, animatsiyadan oldingina yoqing. Masalan, ro'yxat ustiga sichqoncha kelganda: main:hover .taom-karta { will-change: transform; } — kartaga yetib borguncha brauzer tayyorlanib oladi. Animatsiya tugagach o'chirish JavaScript ishi — DOM darslarida ko'ramiz.

4.4 Yon ta'sir: yangi kontekst

z-index va stacking context darsidagi jadvalni eslang: will-change: transform (yoki opacity) yangi stacking context yaratadi. Chrome'da tekshirdik: will-change: transform li element ichidagi position: fixed bola endi ekranga emas, shu elementga nisbatan joylashdi — xuddi haqiqiy transform dagidek. Ya'ni will-change "ko'rinmas" emas: u layout'ni ham o'zgartirishi mumkin.

Tekshirib ko'ring: Hamkasbingiz sahifa sekin deb, 200 ta karta ro'yxatining har kartasiga will-change: transform qo'ydi. Nima bo'ladi?

5. contain: brauzerga "bu blok mustaqil" deyish

5.1 Muammo

Sahifada «Bahor»ning jonli buyurtmalar paneli bor. Uning ichida raqam har soniyada o'zgaradi. Brauzer har safar o'ylaydi: "bu o'zgarish sahifaning qolgan qismiga ta'sir qiladimi?" Ishonch uchun u kattaroq hududni qayta hisoblaydi.

contain (cheklash) xususiyati bilan brauzerga va'da berasiz: "bu blokning ichi tashqariga ta'sir qilmaydi". Shunda brauzer qayta hisobni blok ichida to'xtatadi. Baseline ma'lumotiga ko'ra contain 2022-yildan Baseline, keng tarqalgan.

5.2 Qiymatlar

Tayyor to'plamlar: contain: content = layout paint style — eng xavfsiz va eng ko'p ishlatiladigani. contain: strict = size + shu uchtasi. inline-size ni Container queries darsida container-type: inline-size ichida ko'rgan edingiz — u aynan shu cheklashni yoqadi.

5.3 Yon ta'sirlarni ko'ramiz

<style>
  body { font-family: system-ui, sans-serif; }
  .panel {
    position: relative;
    width: 14rem;
    margin: 1.5rem 1rem;
    padding: 0.5rem;
    border: 2px solid #2f6b3a;
  }
  .belgi {
    position: absolute;
    top: -12px;
    right: -12px;
    padding: 0 0.5rem;
    color: #fffaf0;
    background: #b4461a;
  }
  .kesadi { contain: paint; }
  .ezadi { contain: size; }
</style>
<div class="panel">Oddiy panel
  <span class="belgi">Yangi</span></div>
<div class="panel kesadi">contain: paint
  <span class="belgi">Yangi</span></div>
<div class="panel ezadi">contain: size<br>ikkinchi qator</div>

Nimaga qarang: birinchi panelda "Yangi" belgisi burchakdan tashqariga chiqib turibdi. Ikkinchisida (contain: paint) belgining chegaradan tashqaridagi qismi kesilgan. Uchinchi panel (contain: size) ezilib qoldi: Chrome'da o'lchadik, balandligi atigi 20 piksel — faqat padding va chegara. Matn esa chegaradan tashqariga to'kildi.

Xulosa: contain — tezlik vositasi, lekin har qiymat va'da. Va'dani buzsangiz, brauzer sizga ishonib, kontentni kesadi yoki ezadi. Ko'p holatda contain: content yetadi.

6. content-visibility: auto: ko'rinmaganni chizmaslik

6.1 G'oya

«Bahor» menyusining to'liq sahifasi: 12 bo'lim, 150 ta taom. Telefon ekranida faqat birinchi bo'lim ko'rinadi. Brauzer esa sahifa ochilganda hamma 150 kartaning layout va paint'ini qiladi.

.menyu-bolim {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

• content-visibility: auto — "blok ekranga yaqinlashmaguncha ichini chizma". Brauzer ichki layout va paint'ni o'tkazib yuboradi. Skroll qilinib blok yaqinlashganda — chizadi.
• contain-intrinsic-size: auto 600px — hali chizilmagan blok uchun "taxminiy balandlik". Usiz chizilmagan blok balandligi 0 bo'lardi, skroll paneli sakrab turardi. auto so'zi esa "blok bir marta chizilgach, haqiqiy o'lchamini eslab qol" degani.

Chrome'da tekshirdik: ekrandan uzoqdagi bo'lim ichida bitta qisqa paragraf bo'lsa ham, balandligi aynan 300 piksel chiqdi — biz bergan contain-intrinsic-size.

6.2 Nima saqlanib qoladi

display: none dan farqi: kontent DOM'da va accessibility daraxtida qoladi. Ekran o'quvchi uni o'qiydi, Ctrl + F qidiruvi topadi, havola bilan unga o'tish mumkin. Brauzer faqat chizishni kechiktiradi.

Uchinchi qiymat ham bor: content-visibility: hidden — "chizma, lekin holatini eslab qol". U display: none ga o'xshaydi, lekin qayta ko'rsatish tezroq. Asosan JavaScript bilan boshqariladigan tablar uchun.

6.3 Baseline

Baseline ma'lumotiga ko'ra content-visibility — yangi Baseline (2025-yil sentabr): eski brauzerlarda ishlamaydi. Qo'rqinchli emas: tushunmagan brauzer bu qatorni tashlab ketadi va sahifani oddiy chizadi — faqat biroz sekinroq. Bu Brauzer mosligi darsidagi progressive enhancement'ning toza namunasi. contain-intrinsic-size esa 2026-yil martdan keng tarqalgan.

Diqqat: content-visibility: auto ni kichik bloklarga, ekranning birinchi qismiga (u baribir darhol chiziladi) yoki qisqa sahifalarga qo'ymang. Foyda faqat uzun sahifada, katta bo'limlarda. Avval o'lchang, keyin qo'ying.

7. DevTools bilan o'lchash

7.1 Rendering paneli: ko'z bilan ko'rish

Critical Rendering Path darsining mashqida Paint flashing ni yoqqan edingiz. Rendering panelida (Ctrl + Shift + P → "Show Rendering") yana ikki katak foydali:

• Paint flashing — qayta bo'yalgan joy yashil miltillaydi. left animatsiyasida blok to'xtovsiz yashil yonadi, translate da esa deyarli jim.
• Layer borders — alohida qatlamlar to'q sariq va zangori chegara bilan belgilanadi.
• Frame Rendering Stats — ekran burchagida kadrlar hisoblagichi.

7.2 Performance paneli: aniq raqam

1. DevTools → Performance paneli.
2. Tishli g'ildirak (sozlamalar) → CPU ro'yxatidan 4 barobar sekinlashtirishni tanlang. Kompyuteringiz arzon telefondek ishlaydi.
3. Yozish (dumaloq) tugmasini bosing, animatsiyani 3–5 soniya kuzating, Stop ni bosing.

Natijada vaqt chizig'i chiqadi. Main qatorida rangli bloklar — asosiy oqim ishi. Siyohrang — uslub va layout, yashil — paint, sariq — JavaScript. Qizil uchburchak yoki qizil chiziq — cho'zilib ketgan kadr yoki vazifa.

7.3 Layers paneli

⋮ → More tools → Layers. Sahifa qatlamlari uch o'lchamli ko'rinishda. Qatlamni tanlasangiz, Compositing reasons (qatlam nega yaratildi) yoziladi — masalan, will-change yoki faol transform animatsiyasi. Qatlamlar portlashini shu yerda ko'rasiz.

7.4 Layout thrashing — JavaScript'dagi tuzoq

Eng og'ir layout'ni ko'pincha CSS emas, JavaScript chaqiradi. Renderni nima to'xtatadi darsidagi qoidani eslang: skript o'lchamni o'qib-yozib, o'qib-yozib ketsa, brauzer har safar majburan layout qiladi. Buni layout thrashing deyishadi. Performance panelida u Main qatorida bitta vazifa ichidagi o'nlab siyohrang Layout bloklari bo'lib ko'rinadi, yonida Forced reflow ogohlantirishi bilan. Kodini Rendering pipeline va layout thrashing darsida yozamiz.

Tekshirib ko'ring: Paint flashing yoqilgan. Kartaga hover qilganda butun karta yashil miltillayapti. Bu nimani bildiradi va qanday tekshirasiz?

8. Ko'p uchraydigan xatolar

8.1 transition: all

Transition darsida all xavfini ko'rgan edik. Samaradorlik tomoni ham bor: all bo'lsa, siz o'ylamagan width yoki padding ham animatsiyaga kirib qoladi va har kadrda layout chaqiradi. Tuzatish: xususiyatlarni aniq yozing: transition: translate 0.2s, opacity 0.2s;.

8.2 height: auto ochilishini "arzon" deb o'ylash

Kirish va chiqish animatsiyalari darsidagi interpolate-size va grid-template-rows: 0fr → 1fr hiylasi qulay, lekin ikkalasi ham layout animatsiyasi. Kichik akkordeon uchun bu normal. Katta ro'yxat yoki telefonda sekin bo'lsa — scale yoki opacity + translate bilan almashtiring.

8.3 will-change ni hamma joyga sepish

«Qatlamlar va will-change» bo'limidagi qatlamlar portlashi. Tuzatish: o'chiring, o'lchang, faqat kerakli joyga qaytaring.

8.4 Faqat kuchli kompyuterda tekshirish

Sizning noutbukingizda hammasi silliq — foydalanuvchining 3 yillik telefonida emas. Tuzatish: Performance panelida CPU sekinlashtirishini yoqib tekshiring.

8.5 contain: size ni o'lchamsiz qo'yish

Blok 0 balandlikka tushadi, kontent tashqariga to'kiladi («contain» bo'limidagi namoyish). Tuzatish: contain: content ishlating yoki blokka aniq o'lcham bering.

9. Mashqlar

1-mashq (oson): Arzonmi, qimmatmi?

Har animatsiya uchun ayting: konveyerning qaysi bosqichlari har kadrda ishlaydi?

1. transition: opacity 0.3s
2. @keyframes { to { padding: 2rem; } }
3. transition: border-color 0.2s
4. @keyframes { to { rotate: 1turn; } }
5. transition: font-size 0.2s

Ishora: «Uch guruh» jadvali.

2-mashq (o'rta): Bron tugmasini qayta yozing

Stajyor «Bahor»ning "Stolni band qilish" havolasiga shunday hover yozdi:

.bron-havola {
  position: relative;
  top: 0;
  box-shadow: 0 2px 4px rgb(31 42 36 / 0.2);
  transition: all 0.3s;
}
.bron-havola:hover {
  top: -3px;
  box-shadow: 0 6px 16px rgb(31 42 36 / 0.3);
}

Uchta muammoni toping va ekranda xuddi shunday ko'rinadigan, lekin faqat kompozitorda ishlaydigan variant yozing. Harakat faqat prefers-reduced-motion: no-preference da bo'lsin.

Ishora: top → translate, soya → ::after + opacity, all → aniq ro'yxat.

.bron-havola {
  position: relative; /* ::after uchun */
  box-shadow: 0 2px 4px rgb(31 42 36 / 0.2);
}
.bron-havola::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 6px 16px rgb(31 42 36 / 0.3);
  opacity: 0;
  pointer-events: none;
}
.bron-havola:hover::after {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .bron-havola {
    transition: translate 0.3s ease-out;
  }
  .bron-havola::after {
    transition: opacity 0.3s ease-out;
  }
  .bron-havola:hover {
    translate: 0 -3px;
  }
}

3-mashq (qiyin): Uzun menyu sahifasi

«Bahor»ning menyu/index.html sahifasi: 12 ta section, har birida 10–15 ta .taom-karta. Telefonda sahifa ochilishi sekin. Vazifa:

1. Ekrandan tashqaridagi bo'limlarni kechiktirib chizadigan CSS yozing. Bo'lim balandligi taxminan 900 piksel.
2. Birinchi bo'limga bu qoidani qo'llamang (u baribir darhol ko'rinadi).
3. Har karta ichidagi o'zgarishlar tashqariga ta'sir qilmasligini brauzerga va'da qiling — kontentni kesmasdan va ezmasdan.
4. Eski brauzerda nima bo'lishini bir gap bilan yozing.

Ishora: :not(:first-of-type) (Tuzilma pseudo-klasslari), contain ning xavfsiz to'plami.

main section:not(:first-of-type) {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

.taom-karta {
  contain: content; /* layout + paint + style */
}

4-mashq: Portfolio qadami — samaradorlik auditi

Portfoliongizni o'lchaymiz. 2D transformlar va Transition darslaridan beri unda harakat paydo bo'lgan bo'lishi mumkin.

1. sayt/loyihalar/index.html ni Live Server'da oching. Rendering → Paint flashing ni yoqing. Menyu havolalari, loyiha kartalari va tugma ustidan sichqonchani o'tkazing. Qaysi joylar yashil miltilladi?
2. Performance panelida CPU'ni 4 barobar sekinlashtiring va hover paytini 5 soniya yozib oling. Main qatorida siyohrang Layout bloklari bormi?
3. asosiy.css da Ctrl + F bilan transition va animation ni qidiring. Har biri uchun jadval tuzing: element, xususiyat, guruh (geometriya / ko'rinish / kompozitor).
4. Geometriya guruhidagi har animatsiyani translate/scale ga, kuchayadigan soyani ::after + opacity ga o'tkazing. transition: all qolmasin. will-change bo'lsa — o'chiring.

.loyihalar > article {
  position: relative;
  isolation: isolate; /* ::after kartaning o'z qatlamida qolsin */
}

.loyihalar > article::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 8px 24px
    color-mix(in oklch, var(--rang-matn) 18%, transparent);
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) {
  .loyihalar > article:hover::after {
    opacity: 1;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .loyihalar > article::after {
    transition: opacity 0.2s ease-out;
  }
}

10. Real ishda

• Animatsiya kodini ko'rib chiqish. Jamoada birinchi savol: "Bu nimani animatsiya qilyapti? transform/opacity mi?" left yoki width ko'rilsa, kod qaytariladi.
• Core Web Vitals. Google o'lchaydigan INP ko'rsatkichi (bosishdan keyin sahifa qancha tez javob berdi) asosiy oqim bandligiga bog'liq. Og'ir layout animatsiyasi uni yomonlashtiradi. Ko'rsatkichlarni Performance API va Core Web Vitals darsida o'rganamiz.
• JS animatsiya kutubxonalari (GSAP, Motion — kursda keyinroq tanishamiz, hozir bilish shart emas) ham xuddi shu qoidaga amal qiladi: ular ham imkon qadar transform va opacity ni o'zgartiradi.
• Uzun ro'yxatlar. Chat tarixi, katalog, lenta — content-visibility: auto yoki JavaScript bilan "virtual ro'yxat" ishlatiladi.
• Intervyuda so'raladi: "Reflow va repaint farqi?", "Nega left o'rniga transform?", "will-change nima qiladi va qachon zararli?", "60 FPS uchun kadrga qancha vaqt bor?".

Xulosa

• Har kadr: style → layout → paint → composite. Uyg'ongan bosqichdan keyingilarning hammasi ishlaydi.
• transform va opacity — faqat composite; width, left, margin — layout; rang va soya — paint.
• Kuchayadigan soya va yuruvchi yorug'lik — pseudo-elementning opacity yoki translate i bilan.
• will-change — faqat o'lchangan joyga, faqat kerakli xususiyatga; ko'pi qatlamlar portlashiga olib keladi.
• contain: content — xavfsiz cheklash; content-visibility: auto + contain-intrinsic-size — uzun sahifa uchun.
• Taxmin qilmang — Rendering, Performance va Layers panellarida o'lchang.

Keyingi dars: prefers-reduced-motion va harakat etikasi — animatsiya kimgadir zarar berishi mumkinligini va uni qanday to'g'ri kamaytirishni o'rganamiz.

Manbalar

• web.dev: "Rendering performance", "Stick to compositor-only properties and manage layer count", "content-visibility: the new CSS property that boosts your rendering performance" — web.dev
• MDN: "will-change", "contain", "content-visibility", "contain-intrinsic-size", "CSS performance optimization" — developer.mozilla.org
• Chrome DevTools: "Analyze runtime performance", "Rendering tab", "Layers panel" — developer.chrome.com/docs/devtools
• web-features (Baseline ma'lumotlari): "will-change", "contain", "content-visibility", "contain-intrinsic-size" — github.com/web-platform-dx/web-features