𝟳 ਲੁਕਵੇਂ JavaScript ਪਰਫਾਰਮੈਂਸ ਬੋਟਲਨੇਕਸ
ਹੌਲੀ ਵੈੱਬ ਐਪਸ (web apps) ਸ਼ਾਇਦ ਹੀ ਮਾੜੇ ਐਲਗੋਰਿਦਮਾਂ (algorithms) ਕਾਰਨ ਫੇਲ ਹੁੰਦੀਆਂ ਹਨ। ਉਹ ਇਸ ਕਰਕੇ ਫੇਲ ਹੁੰਦੀਆਂ ਹਨ ਕਿ ਤੁਹਾਡਾ ਕੋਡ ਬ੍ਰਾਊਜ਼ਰ ਨਾਲ ਕਿਵੇਂ ਗੱਲਬਾਤ ਕਰਦਾ ਹੈ।
ਮੈਂ 300 ਤੋਂ ਵੱਧ ਪ੍ਰੋਡਕਸ਼ਨ ਐਪਸ (production apps) ਦਾ ਪ੍ਰੋਫਾਈਲ ਕੀਤਾ। ਮੈਂ ਪਾਇਆ ਕਿ 73% ਪਰਫਾਰਮੈਂਸ ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਇਹਨਾਂ 7 ਸਰੋਤਾਂ ਤੋਂ ਆਉਂਦੀਆਂ ਹਨ।
Layout thrashing ਇਹ ਉਦੋਂ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ layout property ਨੂੰ ਪੜ੍ਹਦੇ ਹੋ ਅਤੇ ਫਿਰ ਤੁਰੰਤ ਬਾਅਦ ਵਿੱਚ DOM ਵਿੱਚ ਲਿਖਦੇ ਹੋ। ਇਹ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਕਈ ਵਾਰ layout ਦੀ ਮੁੜ-ਗਣਨਾ (recalculate) ਕਰਨ ਲਈ ਮਜਬੂਰ ਕਰਦਾ ਹੈ। • ਪ੍ਰਭਾਵ: 40-60% ਹੌਲੀ ਰੈਂਡਰਿੰਗ (rendering)। • ਹੱਲ: ਪਹਿਲਾਂ ਆਪਣੀਆਂ ਸਾਰੀਆਂ reads ਨੂੰ batch ਕਰੋ। ਫਿਰ requestAnimationFrame ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੀਆਂ ਸਾਰੀਆਂ writes ਨੂੰ batch ਕਰੋ।
Unbounded event listeners ਕਿਸੇ listener ਨੂੰ ਹਟਾਏ ਬਿਨਾਂ ਜੋੜਨਾ ਮੈਮੋਰੀ ਲੀਕ (memory leaks) ਦਾ ਕਾਰਨ ਬਣਦਾ ਹੈ। ਇਹ single-page apps ਵਿੱਚ ਇੱਕ ਵੱਡੀ ਸਮੱਸਿਆ ਹੈ। • ਪ੍ਰਭਾਵ: ਪ੍ਰਤੀ ਘੰਟਾ 15-30% ਮੈਮੋਰੀ ਵਾਧਾ। • ਹੱਲ: ਜਦੋਂ ਕੋਈ component unmount ਹੁੰਦਾ ਹੈ, ਤਾਂ listeners ਨੂੰ ਸਾਫ਼ ਕਰਨ ਲਈ AbortController ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਲੂਪਸ (loops) ਵਿੱਚ Synchronous DOM reads ਇੱਕ ਲੂਪ ਦੇ ਅੰਦਰ offsetWidth ਵਰਗੀਆਂ properties ਨੂੰ ਪੜ੍ਹਨਾ ਜੋ DOM ਵਿੱਚ ਲਿਖਦਾ ਵੀ ਹੈ, ਲਗਾਤਾਰ reflows ਦਾ ਕਾਰਨ ਬਣਦਾ ਹੈ। • ਪ੍ਰਭਾਵ: 20-40% frame drops। • ਹੱਲ: ਲੂਪ ਸ਼ੁਰੂ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਆਪਣੀਆਂ layout values ਨੂੰ ਇੱਕ variable ਵਿੱਚ cache ਕਰੋ।
Missing requestAnimationFrame batching scroll ਜਾਂ resize events 'ਤੇ ਸਿੱਧੇ DOM ਬਦਲਾਅ ਬਹੁਤ ਵਾਰ ਹੁੰਦੇ ਹਨ। • ਪ੍ਰਭਾਵ: ਸਕ੍ਰੋਲਿੰਗ ਦੌਰਾਨ 10-25% jank। • ਹੱਲ: paint cycle ਨਾਲ ਸਿੰਕ ਕਰਨ ਲਈ ਆਪਣੇ scroll handlers ਨੂੰ requestAnimationFrame ਵਿੱਚ ਲਪੇਟੋ (wrap ਕਰੋ)।
ਵੱਡੀਆਂ JSON.parse calls ਵੱਡੀਆਂ JSON ਫਾਈਲਾਂ ਨੂੰ parse ਕਰਨਾ main thread ਨੂੰ ਰੋਕ ਦਿੰਦਾ ਹੈ। ਇਸ ਨਾਲ input lag ਹੁੰਦਾ ਹੈ। • ਪ੍ਰਭਾਵ: ਪ੍ਰਤੀ call 50-200ms ਦਾ ਫ੍ਰੀਜ਼ (freeze)। • ਹੱਲ: data ਨੂੰ main thread ਤੋਂ ਬਾਹਰ parse ਕਰਨ ਲਈ Web Workers ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਗੁੰਝਲਦਾਰ CSS selector matching ਡੂੰਘੇ ਤੌਰ 'ਤੇ nested ਜਾਂ ਗੁੰਝਲਦਾਰ selectors style recalculations ਨੂੰ ਹੌਲੀ ਕਰ ਦਿੰਦੇ ਹਨ। • ਪ੍ਰਭਾਵ: 5-15% ਵਾਧੂ style ਸਮਾਂ। • ਹੱਲ: ਆਪਣੇ CSS structure ਨੂੰ ਸਰਲ ਬਣਾਓ ਅਤੇ flatter selectors ਦੀ ਵਰਤੋਂ ਕਰੋ।
Duplicate bundle chunks ਅਣ-ਅਪਟੀਮਾਈਜ਼ਡ (unoptimized) bundles bandwidth ਬਰਬਾਦ ਕਰਦੇ ਹਨ। • ਪ੍ਰਭਾਵ: 100-500KB ਦੀ ਬਰਬਾਦ ਹੋਈ ਟ੍ਰਾਂਸਫਰ। • ਹੱਲ: ਡੁਪਲੀਕੇਟ ਕੋਡ ਲੱਭਣ ਅਤੇ ਹਟਾਉਣ ਲਈ webpack-bundle-analyzer ਵਰਗੇ ਟੂਲਸ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਆਪਣੀ ਪ੍ਰਗਤੀ ਨੂੰ ਕਿਵੇਂ ਮਾਪੀਏ: • Chrome DevTools ਖੋਲ੍ਹੋ ਅਤੇ Performance tab 'ਤੇ ਜਾਓ। • 5-ਸਕਿੰਟ ਦਾ session record ਕਰੋ। • Main flame chart ਵਿੱਚ ਲੰਬੇ ਕੰਮਾਂ (long tasks) ਦੀ ਭਾਲ ਕਰੋ। • ਇੱਕ ਫਿਕਸ ਲਾਗੂ ਕਰੋ ਅਤੇ Rendering ਅਤੇ Painting ਸਮੇਂ ਦੀ ਤੁਲਨਾ ਕਰੋ।
ਆਪਣੇ Core Web Vitals ਸਕੋਰਾਂ ਨੂੰ ਸੁਧਾਰਨ ਲਈ ਇਹਨਾਂ ਖੇਤਰਾਂ 'ਤੇ ਧਿਆਨ ਦਿਓ।