softchris
3f7ec0bbe8
|
1 month ago | |
|---|---|---|
| .. | ||
| README.md | 1 month ago | |
| assignment.md | 1 month ago | |
README.md
ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਪ੍ਰੋਜੈਕਟ ਭਾਗ 3: ਬੈਕਗ੍ਰਾਊਂਡ ਟਾਸਕ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਬਾਰੇ ਸਿੱਖੋ
ਕੀ ਤੁਸੀਂ ਕਦੇ ਸੋਚਿਆ ਹੈ ਕਿ ਕੁਝ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਕਿਵੇਂ ਤੇਜ਼ ਅਤੇ ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਮਹਿਸੂਸ ਹੁੰਦੇ ਹਨ ਜਦਕਿ ਹੋਰ ਹੌਲੀ ਲੱਗਦੇ ਹਨ? ਇਸਦਾ ਰਾਜ਼ ਉਸ ਚੀਜ਼ ਵਿੱਚ ਹੈ ਜੋ ਪਿੱਛੇ ਚੱਲ ਰਿਹਾ ਹੈ। ਜਦੋਂ ਉਪਭੋਗਤਾ ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਇੰਟਰਫੇਸ 'ਤੇ ਕਲਿਕ ਕਰਦੇ ਹਨ, ਤਾਂ ਡਾਟਾ ਫੈਚਿੰਗ, ਆਈਕਨ ਅਪਡੇਟ ਅਤੇ ਸਿਸਟਮ ਸਰੋਤਾਂ ਦਾ ਪ੍ਰਬੰਧ ਕਰਨ ਵਾਲੇ ਬੈਕਗ੍ਰਾਊਂਡ ਪ੍ਰਕਿਰਿਆਵਾਂ ਦੀ ਇੱਕ ਪੂਰੀ ਦੁਨੀਆ ਚੁੱਪਚਾਪ ਕੰਮ ਕਰ ਰਹੀ ਹੁੰਦੀ ਹੈ।
ਇਹ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਸੀਰੀਜ਼ ਵਿੱਚ ਸਾਡਾ ਆਖਰੀ ਪਾਠ ਹੈ, ਅਤੇ ਅਸੀਂ ਤੁਹਾਡੇ ਕਾਰਬਨ ਫੁੱਟਪ੍ਰਿੰਟ ਟ੍ਰੈਕਰ ਨੂੰ ਸੁਚਾਰੂ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ। ਤੁਸੀਂ ਗਤੀਸ਼ੀਲ ਆਈਕਨ ਅਪਡੇਟਸ ਸ਼ਾਮਲ ਕਰੋਗੇ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਪਛਾਣਨ ਦੇ ਤਰੀਕੇ ਸਿੱਖੋਗੇ। ਇਹ ਇੱਕ ਰੇਸ ਕਾਰ ਨੂੰ ਟਿਊਨ ਕਰਨ ਵਰਗਾ ਹੈ - ਛੋਟੀਆਂ ਛੋਟੀਆਂ ਸੁਧਾਰਾਂ ਨਾਲ ਸਭ ਕੁਝ ਕਿਵੇਂ ਚੱਲਦਾ ਹੈ ਇਸ ਵਿੱਚ ਵੱਡਾ ਅੰਤਰ ਪੈ ਸਕਦਾ ਹੈ।
ਜਦੋਂ ਅਸੀਂ ਖਤਮ ਕਰਾਂਗੇ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਪਾਲਿਸ਼ ਕੀਤੀ ਐਕਸਟੈਂਸ਼ਨ ਹੋਵੇਗੀ ਅਤੇ ਉਹ ਪ੍ਰਦਰਸ਼ਨ ਸਿਧਾਂਤ ਸਮਝ ਆਉਣਗੇ ਜੋ ਚੰਗੇ ਵੈੱਬ ਐਪਸ ਨੂੰ ਮਹਾਨ ਤੋਂ ਵੱਖ ਕਰਦੇ ਹਨ। ਆਓ ਬ੍ਰਾਊਜ਼ਰ ਅਪਟੀਮਾਈਜ਼ੇਸ਼ਨ ਦੀ ਦੁਨੀਆ ਵਿੱਚ ਡੁੱਬੀਏ।
ਪੂਰਵ-ਵਿਚਾਰ ਪਾਠਕਵਾਲੀ ਪ੍ਰਸ਼ਨਾਵਲੀ
ਪੂਰਵ-ਵਿਚਾਰ ਪਾਠਕਵਾਲੀ ਪ੍ਰਸ਼ਨਾਵਲੀ
ਪੇਸ਼ਕਸ਼
ਸਾਡੇ ਪਿਛਲੇ ਪਾਠਾਂ ਵਿੱਚ, ਤੁਸੀਂ ਇੱਕ ਫਾਰਮ ਬਣਾਇਆ, ਇਸਨੂੰ API ਨਾਲ ਜੋੜਿਆ, ਅਤੇ ਅਸਿੰਕ੍ਰੋਨਸ ਡਾਟਾ ਫੈਚਿੰਗ ਦਾ ਮੁਕਾਬਲਾ ਕੀਤਾ। ਤੁਹਾਡਾ ਐਕਸਟੈਂਸ਼ਨ ਚੰਗੇ ਤਰੀਕੇ ਨਾਲ ਰੂਪ ਲੈ ਰਿਹਾ ਹੈ।
ਹੁਣ ਸਾਨੂੰ ਆਖਰੀ ਟੱਚ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ - ਜਿਵੇਂ ਕਿ ਉਸ ਐਕਸਟੈਂਸ਼ਨ ਆਈਕਨ ਨੂੰ ਕਾਰਬਨ ਡਾਟਾ ਦੇ ਅਧਾਰ 'ਤੇ ਰੰਗ ਬਦਲਣ ਲਈ ਬਣਾਉਣਾ। ਇਹ ਮੈਨੂੰ ਯਾਦ ਦਿਵਾਉਂਦਾ ਹੈ ਕਿ NASA ਨੂੰ Apollo spacecraft ਦੇ ਹਰ ਸਿਸਟਮ ਨੂੰ ਕਿਵੇਂ ਅਪਟੀਮਾਈਜ਼ ਕਰਨਾ ਪਿਆ। ਉਹ ਕੋਈ ਵੀ ਸਾਈਕਲ ਜਾਂ ਮੈਮੋਰੀ ਖਰਚ ਕਰਨ ਦਾ ਜੋਖਮ ਨਹੀਂ ਲੈ ਸਕਦੇ ਸਨ ਕਿਉਂਕਿ ਪ੍ਰਦਰਸ਼ਨ 'ਤੇ ਜ਼ਿੰਦਗੀਆਂ ਨਿਰਭਰ ਕਰਦੀਆਂ ਸਨ। ਜਦਕਿ ਸਾਡਾ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਇਸ ਕਦਰ ਮਹੱਤਵਪੂਰਨ ਨਹੀਂ ਹੈ, ਉਹੀ ਸਿਧਾਂਤ ਲਾਗੂ ਹੁੰਦੇ ਹਨ - ਕੁਸ਼ਲ ਕੋਡ ਬਿਹਤਰ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਬਣਾਉਂਦਾ ਹੈ।
ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ ਬੁਨਿਆਦੀਆਂ ਗੱਲਾਂ
ਜਦੋਂ ਤੁਹਾਡਾ ਕੋਡ ਕੁਸ਼ਲਤਾਪੂਰਵਕ ਚੱਲਦਾ ਹੈ, ਲੋਕ ਅਸਲ ਵਿੱਚ ਅੰਤਰ ਮਹਿਸੂਸ ਕਰ ਸਕਦੇ ਹਨ। ਤੁਹਾਨੂੰ ਉਹ ਪਲ ਯਾਦ ਹੈ ਜਦੋਂ ਇੱਕ ਪੰਨਾ ਤੁਰੰਤ ਲੋਡ ਹੁੰਦਾ ਹੈ ਜਾਂ ਇੱਕ ਐਨੀਮੇਸ਼ਨ ਸੁਚਾਰੂ ਤਰੀਕੇ ਨਾਲ ਚੱਲਦੀ ਹੈ? ਇਹ ਚੰਗੇ ਪ੍ਰਦਰਸ਼ਨ ਦਾ ਕੰਮ ਹੈ।
ਪ੍ਰਦਰਸ਼ਨ ਸਿਰਫ਼ ਗਤੀ ਬਾਰੇ ਨਹੀਂ ਹੈ - ਇਹ ਵੈੱਬ ਅਨੁਭਵਾਂ ਨੂੰ ਕੁਦਰਤੀ ਬਣਾਉਣ ਬਾਰੇ ਹੈ ਨਾ ਕਿ ਭਾਰੀ ਅਤੇ ਨਿਰਾਸ਼ਜਨਕ। ਕਮਪਿਊਟਿੰਗ ਦੇ ਸ਼ੁਰੂਆਤੀ ਦਿਨਾਂ ਵਿੱਚ, Grace Hopper ਨੇ ਆਪਣੇ ਡੈਸਕ 'ਤੇ ਇੱਕ ਨੈਨੋਸੈਕੰਡ (ਲਗਭਗ ਇੱਕ ਫੁੱਟ ਲੰਬੇ ਤਾਰ ਦਾ ਟੁਕੜਾ) ਰੱਖਿਆ ਸੀ ਤਾਂ ਕਿ ਦਿਖਾਇਆ ਜਾ ਸਕੇ ਕਿ ਰੋਸ਼ਨੀ ਇੱਕ ਬਿਲੀਅਨਵੇਂ ਸੈਕੰਡ ਵਿੱਚ ਕਿੰਨੀ ਦੂਰ ਤੁਰਦੀ ਹੈ। ਇਹ ਉਸਦਾ ਤਰੀਕਾ ਸੀ ਇਹ ਸਮਝਾਉਣ ਦਾ ਕਿ ਕਿਉਂ ਕਮਪਿਊਟਿੰਗ ਵਿੱਚ ਹਰ ਮਾਈਕ੍ਰੋਸੈਕੰਡ ਮਹੱਤਵਪੂਰਨ ਹੁੰਦਾ ਹੈ। ਆਓ ਉਹ ਡਿਟੈਕਟਿਵ ਟੂਲਜ਼ ਦੀ ਪੜਤਾਲ ਕਰੀਏ ਜੋ ਤੁਹਾਨੂੰ ਇਹ ਪਤਾ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ ਕਿ ਕੀ ਚੀਜ਼ਾਂ ਹੌਲੀ ਹੋ ਰਹੀਆਂ ਹਨ।
"ਵੈੱਬਸਾਈਟ ਪ੍ਰਦਰਸ਼ਨ ਦੋ ਚੀਜ਼ਾਂ ਬਾਰੇ ਹੈ: ਪੰਨਾ ਕਿੰਨੀ ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਇਸ 'ਤੇ ਕੋਡ ਕਿੰਨੀ ਤੇਜ਼ੀ ਨਾਲ ਚੱਲਦਾ ਹੈ।" -- Zack Grossbart
ਪ੍ਰੋਫਾਈਲਿੰਗ ਦੌਰਾਨ ਕੀ ਦੇਖਣਾ ਹੈ
ਪ੍ਰੋਫਾਈਲਰ ਚਲਾਉਣਾ ਸਿਰਫ਼ ਸ਼ੁਰੂਆਤ ਹੈ - ਅਸਲ ਕਲਾ ਇਹ ਜਾਣਨ ਵਿੱਚ ਹੈ ਕਿ ਉਹ ਰੰਗੀਨ ਚਾਰਟ ਤੁਹਾਨੂੰ ਅਸਲ ਵਿੱਚ ਕੀ ਦੱਸ ਰਹੇ ਹਨ। ਚਿੰਤਾ ਨਾ ਕਰੋ, ਤੁਸੀਂ ਇਹ ਪੜ੍ਹਨ ਦਾ ਤਰੀਕਾ ਸਿੱਖ ਲਵੋਗੇ। ਅਨੁਭਵੀ ਡਿਵੈਲਪਰਾਂ ਨੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮੱਸਿਆ ਬਣਨ ਤੋਂ ਪਹਿਲਾਂ ਚੇਤਾਵਨੀ ਦੇ ਸੰਕੇਤਾਂ ਨੂੰ ਪਛਾਣਨਾ ਸਿੱਖ ਲਿਆ ਹੈ।
ਆਓ ਆਮ ਦੋਸ਼ੀਆਂ ਬਾਰੇ ਗੱਲ ਕਰੀਏ - ਪ੍ਰਦਰਸ਼ਨ ਸਮੱਸਿਆਵਾਂ ਜੋ ਵੈੱਬ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਚੁਪਕੇ ਨਾਲ ਆ ਜਾਂਦੀਆਂ ਹਨ। ਜਿਵੇਂ Marie Curie ਨੂੰ ਆਪਣੇ ਲੈਬ ਵਿੱਚ ਰੇਡੀਏਸ਼ਨ ਲੈਵਲ ਦੀ ਸਾਵਧਾਨੀ ਨਾਲ ਨਿਗਰਾਨੀ ਕਰਨੀ ਪਈ, ਸਾਨੂੰ ਕੁਝ ਪੈਟਰਨਾਂ ਦੇਖਣ ਦੀ ਲੋੜ ਹੈ ਜੋ ਸਮੱਸਿਆਵਾਂ ਦੇ ਪੈਦਾ ਹੋਣ ਦਾ ਸੰਕੇਤ ਦਿੰਦੇ ਹਨ। ਇਹਨਾਂ ਨੂੰ ਜਲਦੀ ਪਕੜਨਾ ਤੁਹਾਨੂੰ (ਅਤੇ ਤੁਹਾਡੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ) ਬਹੁਤ ਸਾਰੀ ਨਿਰਾਸ਼ਾ ਤੋਂ ਬਚਾਏਗਾ।
ਐਸੈਟ ਸਾਈਜ਼: ਵੈੱਬਸਾਈਟਾਂ ਸਾਲਾਂ ਤੋਂ "ਭਾਰੀ" ਹੋ ਰਹੀਆਂ ਹਨ, ਅਤੇ ਇਸ ਵਾਧੇ ਦਾ ਬਹੁਤ ਸਾਰਾ ਭਾਰ ਚਿੱਤਰਾਂ ਤੋਂ ਆਉਂਦਾ ਹੈ। ਇਹ ਇਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਅਸੀਂ ਆਪਣੇ ਡਿਜ਼ੀਟਲ ਸੂਟਕੇਸਾਂ ਵਿੱਚ ਹੋਰ ਅਤੇ ਹੋਰ ਭਰ ਰਹੇ ਹਾਂ।
✅ Internet Archive 'ਤੇ ਜਾਂਕੇ ਦੇਖੋ ਕਿ ਪੰਨਾ ਸਾਈਜ਼ ਕਿਵੇਂ ਵਧੇ ਹਨ - ਇਹ ਕਾਫ਼ੀ ਖੁਲਾਸਾ ਕਰਨ ਵਾਲਾ ਹੈ।
DOM Traversals: ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਤੁਹਾਡੇ ਦੁਆਰਾ ਲਿਖੇ ਕੋਡ ਦੇ ਅਧਾਰ 'ਤੇ ਆਪਣਾ ਡੌਕਯੂਮੈਂਟ ਓਬਜੈਕਟ ਮਾਡਲ ਬਣਾਉਣਾ ਪੈਂਦਾ ਹੈ, ਇਸ ਲਈ ਚੰਗੇ ਪੰਨੇ ਦੇ ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਹਿੱਤ ਵਿੱਚ ਹੈ ਕਿ ਤੁਹਾਡੇ ਟੈਗਾਂ ਨੂੰ ਘੱਟ ਰੱਖਿਆ ਜਾਵੇ, ਸਿਰਫ਼ ਉਹੀ ਵਰਤ ਕੇ ਅਤੇ ਸਟਾਈਲ ਕਰਕੇ ਜੋ ਪੰਨੇ ਨੂੰ ਲੋੜ ਹੈ।
JavaScript: ਹਰ JavaScript ਡਿਵੈਲਪਰ ਨੂੰ 'render-blocking' ਸਕ੍ਰਿਪਟਾਂ ਲਈ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ ਜੋ DOM ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਪੇਂਟ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਲੋਡ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ। ਇਹ ਇੱਕ ਦਿਲਚਸਪ ਜਾਸੂਸੀ ਮਿਸ਼ਨ ਹੈ: ਕੁਝ ਪੁਰਾਣੀਆਂ ਓਪਨ ਸੋਰਸ ਵੈਬਸਾਈਟਾਂ (ਜਿਵੇਂ ਕਿ Wikipedia, GitHub, ਜਾਂ Stack Overflow) ਦੀ ਚੋਣ ਕਰੋ ਅਤੇ ਉਨ੍ਹਾਂ ਦੇ ਕਮਿਟ ਇਤਿਹਾਸ ਵਿੱਚ ਝਾਤ ਮਾਰੋ। ਕੀ ਤੁਸੀਂ ਵੇਖ ਸਕਦੇ ਹੋ ਕਿ ਉਨ੍ਹਾਂ ਨੇ ਕਿੱਥੇ ਪ੍ਰਦਰਸ਼ਨ ਵਿੱਚ ਸੁਧਾਰ ਕੀਤੇ? ਕਿਹੜੇ ਸਮੱਸਿਆਵਾਂ ਮੁੜ-ਮੁੜ ਉੱਪਜ ਰਹੀਆਂ ਸਨ?
ਤੁਹਾਡਾ ਜਾਂਚ ਕਰਨ ਦਾ ਤਰੀਕਾ:
- ਖੋਜੋ ਕਮਿਟ ਸੁਨੇਹਿਆਂ ਵਿੱਚ "optimize," "performance," ਜਾਂ "faster" ਵਰਗੇ ਸ਼ਬਦ
- ਦੇਖੋ ਪੈਟਰਨ - ਕੀ ਉਹ ਮੁੜ-ਮੁੜ ਇੱਕੋ ਤਰ੍ਹਾਂ ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਠੀਕ ਕਰ ਰਹੇ ਹਨ?
- ਪਛਾਣੋ ਉਹ ਆਮ ਕਾਰਨ ਜੋ ਵੈਬਸਾਈਟਾਂ ਨੂੰ ਹੌਲੀ ਕਰਦੇ ਹਨ
- ਸਾਂਝਾ ਕਰੋ ਜੋ ਤੁਸੀਂ ਪਤਾ ਲਗਾਇਆ - ਹੋਰ ਡਿਵੈਲਪਰ ਅਸਲ ਦੁਨੀਆ ਦੇ ਉਦਾਹਰਣਾਂ ਤੋਂ ਸਿੱਖ ਸਕਦੇ ਹਨ
ਲੈਕਚਰ ਬਾਅਦ ਕਵਿਜ਼
ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ ਅਧਿਐਨ
ਇੱਕ ਪ੍ਰਦਰਸ਼ਨ ਨਿਊਜ਼ਲੈਟਰ ਲਈ ਸਾਈਨ ਅਪ ਕਰਨ ਬਾਰੇ ਵਿਚਾਰ ਕਰੋ।
ਬ੍ਰਾਊਜ਼ਰਾਂ ਵੱਲੋਂ ਵੈਬ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਮਾਪਣ ਦੇ ਕੁਝ ਤਰੀਕਿਆਂ ਦੀ ਜਾਂਚ ਕਰੋ, ਉਨ੍ਹਾਂ ਦੇ ਵੈਬ ਟੂਲਜ਼ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਨ ਟੈਬਾਂ ਦੇਖ ਕੇ। ਕੀ ਤੁਹਾਨੂੰ ਕੋਈ ਵੱਡੇ ਅੰਤਰ ਮਿਲਦੇ ਹਨ?
ਅਸਾਈਨਮੈਂਟ
ਕਿਸੇ ਸਾਈਟ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਵਿਸ਼ਲੇਸ਼ਣ ਕਰੋ
ਅਸਵੀਕਰਤੀ:
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ Co-op Translator ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਅਸੀਂ ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।