𝟳 𝗛𝗶𝗱𝗱𝗲𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝗕𝗼𝘁𝘁𝗹𝗲𝗻𝗲𝗰𝗸𝘀
ನಿಧಾನಗತಿಯ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು ಕಳಪೆ ಅಲ್ಗಾರಿದಮ್ಗಳಿಂದಾಗಿ ವಿಫಲವಾಗುವುದು ಅಪರೂಪ. ನಿಮ್ಮ ಕೋಡ್ ಬ್ರೌಸರ್ ಜೊತೆ ಹೇಗೆ ಸಂವಹನ ನಡೆಸುತ್ತದೆ ಎಂಬ ಕಾರಣದಿಂದ ಅವು ವಿಫಲವಾಗುತ್ತವೆ.
ನಾನು 300 ಕ್ಕೂ ಹೆಚ್ಚು ಪ್ರೊಡಕ್ಷನ್ ಅಪ್ಲಿಕೇಶನ್ಗಳನ್ನು ವಿಶ್ಲೇಷಿಸಿದ್ದೇನೆ. ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳಲ್ಲಿ ಶೇಕಡಾ 73 ರಷ್ಟು ಈ 7 ಮೂಲಗಳಿಂದ ಬರುತ್ತವೆ ಎಂದು ನಾನು ಕಂಡುಕೊಂಡಿದ್ದೇನೆ.
Layout thrashing ನೀವು ಒಂದು layout property ಅನ್ನು ಓದಿದ ತಕ್ಷಣವೇ DOM ಗೆ ಬರೆಯಲು ಪ್ರಯತ್ನಿಸಿದಾಗ ಇದು ಸಂಭವಿಸುತ್ತದೆ. ಇದು ಬ್ರೌಸರ್ ಅನ್ನು ಹಲವಾರು ಬಾರಿ layout ಅನ್ನು ಮರುಹಣಿಸಲು (recalculate) ಒತ್ತಾಯಿಸುತ್ತದೆ. • ಪರಿಣಾಮ: 40-60% ನಿಧಾನಗತಿಯ rendering. • ಪರಿಹಾರ: ಮೊದಲು ನಿಮ್ಮ ಎಲ್ಲಾ 'reads' ಅನ್ನು ಗುಂಪು ಮಾಡಿ (batch). ನಂತರ requestAnimationFrame ಬಳಸಿ ಎಲ್ಲಾ 'writes' ಅನ್ನು ಗುಂಪು ಮಾಡಿ.
Unbounded event listeners ಒಂದು listener ಅನ್ನು ತೆಗೆದುಹಾಕದೆ ಸೇರಿಸುವುದು memory leaks ಗೆ ಕಾರಣವಾಗುತ್ತದೆ. ಇದು single-page apps ನಲ್ಲಿ ದೊಡ್ಡ ಸಮಸ್ಯೆಯಾಗಿದೆ. • ಪರಿಣಾಮ: ಪ್ರತಿ ಗಂಟೆಗೆ 15-30% ಮೆಮೊರಿ ಬೆಳವಣಿಗೆ. • ಪರಿಹಾರ: ಒಂದು component unmount ಆದಾಗ listeners ಅನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಲು AbortController ಬಳಸಿ.
Synchronous DOM reads in loops DOM ಗೆ ಬರೆಯುವ ಲೂಪ್ನ ಒಳಗಡೆ offsetWidth ನಂತಹ properties ಅನ್ನು ಓದುವುದು ನಿರಂತರ 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 ಮಾಡಿ.
Large JSON.parse calls ಬೃಹತ್ JSON ಫೈಲ್ಗಳನ್ನು ಪಾರ್ಸ್ ಮಾಡುವುದು main thread ಅನ್ನು ತಡೆಯುತ್ತದೆ. ಇದು input lag ಗೆ ಕಾರಣವಾಗುತ್ತದೆ. • ಪರಿಣಾಮ: ಪ್ರತಿ ಕರೆಯಲ್ಲೂ 50-200ms ಫ್ರೀಜ್ ಆಗುವುದು. • ಪರಿಹಾರ: main thread ನಿಂದ ಹೊರತಾಗಿ ಡೇಟಾವನ್ನು ಪಾರ್ಸ್ ಮಾಡಲು Web Workers ಬಳಸಿ.
Complex CSS selector matching ಆಳವಾಗಿ ಅಡಕವಾಗಿರುವ (deeply nested) ಅಥವಾ ಸಂಕೀರ್ಣವಾದ selectors ಶೈಲಿ ಮರುಹಣಿಕೆಗಳನ್ನು (style recalculations) ನಿಧಾನಗೊಳಿಸುತ್ತವೆ. • ಪರಿಣಾಮ: 5-15% ಹೆಚ್ಚುವರಿ style ಸಮಯ. • ಪರಿಹಾರ: ನಿಮ್ಮ CSS ರಚನೆಯನ್ನು ಸರಳಗೊಳಿಸಿ ಮತ್ತು flatter selectors ಬಳಸಿ.
Duplicate bundle chunks ಅನ್ಆಪ್ಟಿಮೈಸ್ ಮಾಡಲಾದ bundles ಬ್ಯಾಂಡ್ವಿಡ್ತ್ ಅನ್ನು ವ್ಯರ್ಥ ಮಾಡುತ್ತವೆ. • ಪರಿಣಾಮ: 100-500KB ಡೇಟಾ ವ್ಯರ್ಥ ವರ್ಗಾವಣೆ. • ಪರಿಹಾರ: ಡೂಪ್ಲಿಕೇಟ್ ಕೋಡ್ ಅನ್ನು ಕಂಡುಹಿಡಿಯಲು ಮತ್ತು ತೆಗೆದುಹಾಕಲು webpack-bundle-analyzer ನಂತಹ ಪರಿಕರಗಳನ್ನು ಬಳಸಿ.
ನಿಮ್ಮ ಪ್ರಗತಿಯನ್ನು ಅಳೆಯುವುದು ಹೇಗೆ: • Chrome DevTools ತೆರೆಯಿರಿ ಮತ್ತು Performance tab ಗೆ ಹೋಗಿ. • 5 ಸೆಕೆಂಡ್ಗಳ ಸೆಷನ್ ಅನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡಿ. • Main flame chart ನಲ್ಲಿ ದೀರ್ಘಾವಧಿಯ ಕಾರ್ಯಗಳನ್ನು (long tasks) ಹುಡುಕಿ. • ಒಂದು ಪರಿಹಾರವನ್ನು ಅನ್ವಯಿಸಿ ಮತ್ತು Rendering ಮತ್ತು Painting ಸಮಯಗಳನ್ನು ಹೋಲಿಸಿ ನೋಡಿ.
ನಿಮ್ಮ Core Web Vitals ಸ್ಕೋರ್ಗಳನ್ನು ಸುಧಾರಿಸಲು ಈ ಕ್ಷೇತ್ರಗಳ ಮೇಲೆ ಗಮನ ಹರಿಸಿ.