ਬ੍ਰਾਉਜ਼ਰ HTML ਨੂੰ ਕਿਵੇਂ ਪਾਰਸ ਕਰਦਾ ਹੈ ਅਤੇ ਪੰਨਾ ਬਣਾਉਂਦਾ ਹੈ (ਮਹੱਤਵਪੂਰਨ ਰੈਂਡਰਿੰਗ ਪਾਥ)?

Question

Accepted Answer

**ਮਹੱਤਵਪੂਰਨ ਰੈਂਡਰਿੰਗ ਪਾਥ** ਉਹ ਪੜਾਵਾਂ ਦਾ ਇੱਕ ਕ੍ਰਮ ਹੈ ਜੋ ਬ੍ਰਾਉਜ਼ਰ HTML, CSS, ਅਤੇ JS ਨੂੰ ਪਿਕਸਲ ਵਿੱਚ ਬਦਲਣ ਲਈ ਕਰਦਾ ਹੈ। ਇਸ ਨੂੰ ਸਮਝਣਾ ਇਹ ਸਮਝਾਉਂਦਾ ਹੈ ਕਿ ਕੀ ਰੈਂਡਰਿੰਗ ਨੂੰ ਬਲਾਕ ਕਰਦਾ ਹੈ ਅਤੇ ਪੰਨੇ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਪੇਂਟ ਕਰਨਾ ਕਿਵੇਂ ਹੈ। ## ਪੜਾਅ ```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 ``` ## ਕੀ ਰੈਂਡਰਿੰਗ ਨੂੰ ਬਲਾਕ ਕਰਦਾ ਹੈ **CSS ਰੈਂਡਰ-ਬਲਾਕਿੰਗ ਹੈ।** ਬ੍ਰਾਉਜ਼ਰ ਉਦੋਂ ਤੱਕ ਪੇਂਟ ਨਹੀਂ ਕਰਦਾ ਜਦੋਂ ਤੱਕ CSSOM ਤਿਆਰ ਨਹੀਂ ਹੋਵੇ (ਬਿਨਾ ਸਟਾਈਲ ਕੀਤੇ ਮਸਾਲੇ ਨੂੰ ਰੋਕਣ ਲਈ)। ਇਸ ਲਈ ਵੱਡੀ/ਹੌਲੀ CSS ਪਹਿਲੀ ਪੇਂਟ ਨੂੰ ਦੇਰੀ ਕਰਦੀ ਹੈ — ਮਹੱਤਵਪੂਰਨ CSS ਨੂੰ ਛੋਟਾ ਰੱਖੋ ਅਤੇ ਜਦੋਂ ਸੰਭਵ ਹੋ ਇਸਨੂੰ ਇਨਲਾਈਨ ਕਰੋ। **ਸਿੰਕਰੋਨਸ ਸਕ੍ਰਿਪਟ ਪਾਰਸਰ-ਬਲਾਕਿੰਗ ਹਨ।** ਇੱਕ ਸਾਧਾਰਨ ` ``` ਵੀ ਬੁਰਾ, ਇੱਕ ਸਿੰਕਰੋਨਸ ਸਕ੍ਰਿਪਟ ਜਿਸਨੂੰ CSSOM ਦੀ ਲੋੜ ਹੈ (ਉਦਾਹਰਣ ਲਈ ਗਣਨਾ ਕੀਤੀ ਸਟਾਈਲ ਪੜ੍ਹੋ) CSS ਦੀ ਵੀ ਉਡੀਕ ਕਰਦਾ ਹੈ — ਇਸ ਲਈ ਇੱਕ CSS ਫਾਈਲ ਅਸਿੱਧੇ ਤੌਰ ਤੇ ਇੱਕ ਸਕ੍ਰਿਪਟ ਨੂੰ ਬਲਾਕ ਕਰ ਸਕਦੀ ਹੈ, ਜੋ ਪਾਰਸਰ ਨੂੰ ਬਲਾਕ ਕਰਦਾ ਹੈ। ## ਇਸ ਨੂੰ ਕਿਵੇਂ ਅਨੁਕੂਲ ਕਰੋ - CSS ਨੂੰ `` ਵਿੱਚ ਰੱਖੋ (ਇਸਨੂੰ ਜਲਦੀ ਲੋਡ ਕਰੋ); ਮਹੱਤਵਪੂਰਨ CSS ਇਨਲਾਈਨ ਕਰੋ। - ਸਕ੍ਰਿਪਟ ਵਿੱਚ `defer` (ਜਾਂ `type="module"`) ਸ਼ਾਮਲ ਕਰੋ, ਜਾਂ ਉਨ੍ਹਾਂ ਨੂੰ `` ਤੋਂ ਪਹਿਲਾਂ ਰੱਖੋ। - CSS/JS ਨੂੰ ਘੱਟ ਕਰੋ ਅਤੇ ਕਮਪ੍ਰੈਸ ਕਰੋ; ਅਪ੍ਰਯੁਕਤ ਨਿਯਮ ਹਟਾਓ। - ਮਹੱਤਵਪੂਰਨ ਫੋਂਟ/ਸੰਪਤੀ ਲਈ `preload` ਵਰਤੋ, ਮੁੱਖ ਮੂਲ ਲਈ `preconnect` ਵਰਤੋ। - ਲੇਆਉਟ ਥ੍ਰੈਸਿੰਗ ਤੋਂ ਬਚੋ (JS ਵਿੱਚ ਲੇਆਉਟ ਨੂੰ ਵਾਰ-ਵਾਰ ਪੜ੍ਹਨਾ/ਲਿਖਣਾ) — ਇਹ ਵਾਧੂ ਰੀਫਲੋ ਨੂੰ ਮਜਬੂਰ ਕਰਦਾ ਹੈ। ## ਇਹ ਕਿਉਂ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ ਮਹੱਤਵਪੂਰਨ ਰੈਂਡਰਿੰਗ ਪਾਥ First Contentful Paint ਅਤੇ Largest Contentful Paint ਵਰਗੇ ਮੈਟ੍ਰਿਕਸ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ। ਇਹ ਜਾਣਨਾ ਕਿ CSS ਰੈਂਡਰਿੰਗ ਨੂੰ ਬਲਾਕ ਕਰਦਾ ਹੈ ਅਤੇ ਸਿੰਕਰੋਨਸ JS ਪਾਰਸਿੰਗ ਨੂੰ ਬਲਾਕ ਕਰਦਾ ਹੈ, ਤੁਹਾਨੂੰ ਠੀਕ ਦੱਸਦਾ ਹੈ ਕਿ ਕਿਉਂ `defer`/`async`, ਇਨਲਾਈਨ ਕੀਤੀ ਮਹੱਤਵਪੂਰਨ CSS, ਅਤੇ ਸੰਸਾਧਨ ਸੰਕੇਤ ਇੱਕ ਪੰਨੇ ਨੂੰ ਤੇਜ਼ ਕਰਦੇ ਹਨ — ਉਹ ਇਸ ਪਾਥ ਨੂੰ ਛੋਟਾ ਕਰਦੇ ਹਨ ਜਾਂ ਅਨਬਲਾਕ ਕਰਦੇ ਹਨ।