Nima bu Flash of Unstyled Content (FOUC)?

Stilsiz Kontentning Tez-tez ko‘rinishi (FOUC) — bu brauzerda CSS uslublari qo‘llanilmasdan oldin veb-sahifaning mazmuni vaqtinchalik ko‘rsatilishi. Bu resurslarning ketma-ket yuklanishi va ishlov berilishi sababli yuzaga keladi. Brauzer avvalo HTMLni tahlil qiladi va uni ko‘rsatishni boshlaydi, so‘ngra tashqi CSS fayllaridan yoki <style> tegi orqali uslublarni yuklab, qo‘llaydi. Bu orada foydalanuvchi "bo‘sh" HTMLni ko‘radi.

FOUC sabablari:

Tarmoq tezligi past: Sekin ulanish CSSning yuklanish vaqtini oshiradi.
CSS hajmi katta: Uslublar qanchalik katta bo‘lsa, yuklanishi va tahlil qilinishi shunchalik uzoq davom etadi.
Bloklovchi uslublar: Agar uslublar HTMLdan keyin ulansa, brauzer ularni to‘liq yuklab olinmasdan render qilishni boshlashi mumkin.
JavaScript, CSSni o‘zgartiradigan: Skriptlar dinamik tarzda uslublarni qo‘shadigan yoki o‘zgartiradigan bo‘lsa, FOUC yuzaga kelishi mumkin.

FOUCning odatiy holatlari:

Matn brauzerning standart shriftida ko‘rsatiladi va keyin CSSda belgilangan shriftga keskin o‘zgaradi.
Elementlar o‘z pozitsiyasini yoki ko‘rinishini resetlaydi.
Tuzilma "tarqaladi" va keyin qayta quriladi.

FOUCni oldini olish usullari:

CSSni <head>da ulash: Bu eng samarali usul. Brauzerlar <head>da belgilangan barcha uslublar yuklanmaguncha renderni to‘xtatadi (standart <link rel="stylesheet"> uchun).

<!-- To‘g‘ri: CSS headda -->
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Mening Sahifam</title>
</head>
<body>
    <!-- Kontent -->
</body>

<!-- Noto‘g‘ri: CSS bodyda (FOUCga olib kelishi mumkin) -->
<head>
    <title>Mening Sahifam</title>
</head>
<body>
    <link rel="stylesheet" href="styles.css">
    <!-- Kontent -->
</body>

Kritik uslublar inline: Asosiy uslublarni to‘g‘ridan-to‘g‘ri <style> tegi ichiga joylashtirish, tashqi uslublar yuklanishidan oldin asosiy dizaynni tezda qo‘llash imkonini beradi.

<head>
    <style>
        body { font-family: sans-serif; }
        /* Kritikal uslublar */
    </style>
    <link rel="stylesheet" href="styles.css">
    <title>Sahifam</title>
</head>
<body>
    <!-- Kontent -->
</body>

`font-display: swap``ni qo‘llash: Fontlar uchun, uslubsiz matnning chiroyli ko‘rinmasligini (FOUT) oldini olish uchun, maxsus font yuklanmaguncha tizim fonti ko‘rsatiladi.
```
@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2');
  font-display: swap;
}
```

Uslublar yuklanmaguncha kontentni yashirish: JavaScript yordamida, barcha uslublar yuklangunga qadar asosiy kontentni yashirish mumkin (kamroq tavsiya etiladi JSga bog‘liqlik va sekinlashish xavfi sababli).

<style>
  .hidden { display: none; }
</style>
<body class="hidden">
  <!-- Kontent -->
  <script>
    // Misol: uslublar yuklangach, bodyni ko‘rsatish
    // Haqiqiy sharoitda CSS yuklanishini diqqat bilan kuzatish kerak
    document.addEventListener('DOMContentLoaded', function() {
        document.body.classList.remove('hidden');
    });
  </script>
</body>

FOUC foydalanuvchi tajribasiga salbiy ta’sir qiladi va saytni "buzilgan" yoki sekin deb qabul qilishiga olib keladi, shuning uchun uning minimallashtirilishi frontend optimallashtirishning muhim qismidir.