Abin browser yayi bincike ga HTML kuma gina shafi (critical rendering path)?

Question

Accepted Answer

**critical rendering path** shine jerin matakalan da browser ke kwata don canza HTML, CSS, da JS zuwa pixels. Gane shi yana bayyana abin da ke tare da yin, kuma yadda ake yin minti a sauri. ## Matakalan ```text 1. Parse HTML → DOM tree (the document structure) 2. Parse CSS → CSSOM tree (the style rules) 3. DOM + CSSOM → Render tree (visible nodes + their styles) 4. Layout (reflow) → compute each node's geometry (position/size) 5. Paint → fill in pixels (colors, text, images) 6. Composite → combine layers onto the screen ``` ## Abin da ke tare da yin **CSS ke tare da yin.** Browser ba zai yi zane har sai CSSOM ya shirya (don kauce wa walwal mara tufafi). Saboda haka, CSS mai girma/jajere yana jaddada farar zane — ki iyada CSS mahimmanci kuma saka shi a cikin jeri idan yiwu. **Jigon synchronous suna tare da bincike.** Plain ` ``` Wajhe, jigo mai daidaitawa wanda ake bukatai CSSOM (misali karanta salon da aka kirga) yana jira CSS kuma — saboda haka fayil CSS zai iya tare da jigo ta aljanu, wanda yana tare da bincike. ## Yadda ake inganta shi - Saka CSS a `` (loda shi da sauri); saka CSS mahimmanci a cikin jeri. - Ƙara `defer` (ko `type="module"`) zuwa jigogi, ko saka su kafin ``. - Rage kuma damjemet CSS/JS; cire sabuwar manane. - Yi amfani da `preload` don mahimmin abokan/allunan, `preconnect` don tushen mahalarta. - Guje wa kawar layout (karanta/rubuta layout a maimakon a JS) — yana tilasta ƙarin reflows. ## Yaren menene mahimmanci Madaidaita jerin rendering mahimmanci yana tabbatar da ma'aunin kamar Farar Gajere Rubuta da Mafi Girman Gajere Rubuta. Sanin cewa CSS yana tare da yin kuma synchronous JS yana tare da bincike ya gaya maka daidai yamen `defer`/`async`, CSS mahimmanci saka a cikin jeri, kuma kaura-allunan da sauri shafi — suna gajarta ko bubugi wannan jiya.