Middle
Ի՞նչ է Flash of Unstyled Content (FOUC)-ը։
sobes.tech AI
Պատասխան AI-ից
Անհատուկ բովանդակության փայլ (FOUC) — դա ժամանակավոր ցուցադրություն է, երբ վեբ էջի բովանդակությունը բրաուզերում ցուցադրվում է CSS ոճերը կիրառելուց առաջ: Դա տեղի է ունենում ռեսուրսների հերթական բեռնման և մշակման պատճառով: Բրաուզերը սկզբում վերլուծում է HTML-ը և սկսում է այն ցուցադրել, ապա բեռնում և կիրառում է ոճերը արտաքին CSS ֆայլերից կամ <style> թեգից: Այս ընթացքում օգտվողը տեսնում է «մաքուր» HTML-ը առանց ձևավորման:
FOUC-ի պատճառները՝
- Ճանցքային ցանցի արագության նվազում: Աշխատանքային կապը մեծացնում է CSS-ի բեռնման ժամանակը:
- CSS-ի մեծ ծավալ: Որքան մեծ է ոճերի չափը, այնքան ավելի երկար է բեռնման և վերլուծության ժամանակը:
- Արգելափակող ոճեր: Եթե ոճերը միացվում են HTML-ից հետո, բրաուզերը կարող է սկսել ռենդերինգը նրանց ամբողջական բեռնմանց առաջ:
- JavaScript, որը փոփոխում է CSS-ը: Սկրիպտներ, որոնք դինամիկ ավելացնում կամ փոխում են ոճերը, կարող են առաջացնել FOUC:
Տիպիկ FOUC սցենարներ՝
- Տեքստը ցուցադրվում է բրաուզերի ստանդարտ գրությամբ և հետո հանկարծակի փոխվում է CSS-ում սահմանվածով:
- տարրերը կորցնում են իրենց դիրքավորումը կամ տեսանելիությունը:
- Մակետային ցանցը «փշրվում է» և հետո վերականգնվում:
FOUC-ի կանխարգելման միջոցներ՝
- CSS- ի միացում
<head>-ում: Սա ամենաարդյունավետ միջոցն է: Բրաուզերները կանգնեցնում են ռենդերինգը մինչև բոլոր ոճերը բեռնվեն<head>-ում, եթե դրանք նշված են որպես բլոկավոր (նույնպես `<link rel=