𝟩 𝗛𝗶𝗱𝗱𝗲𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗕𝗼𝘁𝘁𝗹𝗲𝗻𝗲𝗰𝗸𝘀 𝗔𝗻𝗱 𝗛𝗼𝘄 𝗧𝗼 𝗙𝗶𝘅 𝗧𝗵𝗲𝗺
ನಿಧಾನಗತಿಯ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು ಕೆಟ್ಟ ಅಲ್ಗಾರಿದಮ್ಗಳಿಂದಾಗಿ ವಿಫಲವಾಗುವುದು ಅಪರೂಪ. ನಿಮ್ಮ ಕೋಡ್ ಬ್ರೌಸರ್ನೊಂದಿಗೆ ಹೇಗೆ ಸಂವಹನ ನಡೆಸುತ್ತದೆ ಎಂಬ ಕಾರಣದಿಂದ ಅವು ವಿಫಲವಾಗುತ್ತವೆ.
ನಾನು 300 ಪ್ರೊಡಕ್ಷನ್ ಅಪ್ಲಿಕೇಶನ್ಗಳನ್ನು ಪ್ರೊಫೈಲ್ ಮಾಡಿದ್ದೇನೆ. 73% ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳು ಈ 7 ಮೂಲಗಳಿಂದ ಬರುತ್ತವೆ.
- Layout thrashing ನೀವು ಒಂದು ಪ್ರಾಪರ್ಟಿಯನ್ನು ಓದಿದಾಗ (read), DOM ಗೆ ಬರೆದಾಗ (write), ಮತ್ತು ಮತ್ತೆ ಓದಿದಾಗ ಇದು ಸಂಭವಿಸುತ್ತದೆ. ಇದು ಬ್ರೌಸರ್ ಅನ್ನು ಪದೇ ಪದೇ ಲೇಔಟ್ ಅನ್ನು ಮರುಹಣಿಸಲು (recalculate) ಒತ್ತಾಯಿಸುತ್ತದೆ.
- ಪರಿಹಾರ: ಮೊದಲು ಎಲ್ಲಾ 'reads' ಅನ್ನು ಗುಂಪು ಮಾಡಿ (batch). ನಂತರ
requestAnimationFrameಬಳಸಿ ಎಲ್ಲಾ 'writes' ಅನ್ನು ಗುಂಪು ಮಾಡಿ.
- Unbounded event listeners ಇವೆಂಟ್ ಲಿಸನರ್ ಅನ್ನು ತೆಗೆದುಹಾಕದೆ ಸೇರಿಸುವುದು ಮೆಮೊರಿ ಸೋರಿಕೆಗಳಿಗೆ (memory leaks) ಕಾರಣವಾಗುತ್ತದೆ. ಇದು ಸಿಂಗಲ್-ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್ಗಳಲ್ಲಿ (single-page apps) ದೊಡ್ಡ ಸಮಸ್ಯೆಯಾಗಿದೆ.
- ಪರಿಹಾರ: ಕಾಂಪೊನೆಂಟ್ಗಳು ಅನ್ಮೌಂಟ್ (unmount) ಆದಾಗ ಲಿಸನರ್ಗಳನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಲು
AbortControllerಬಳಸಿ.
- Synchronous DOM reads in loops
ಲೂಪ್ನ ಒಳಗಡೆ
offsetWidthಅಥವಾgetBoundingClientRectಅನ್ನು ಓದುವುದು ನಿರಂತರ ರಿಫ್ಲೋಗಳನ್ನು (reflows) ಉಂಟುಮಾಡುತ್ತದೆ.
- ಪರಿಹಾರ: ಲೂಪ್ ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು ಲೇಔಟ್ ಮೌಲ್ಯಗಳನ್ನು ಒಂದು ವೇರಿಯೇಬಲ್ನಲ್ಲಿ ಕ್ಯಾಶ್ (cache) ಮಾಡಿ.
- Missing requestAnimationFrame batching ಸ್ಕ್ರಾಲ್ ಅಥವಾ ರಿಸೈಜ್ ಇವೆಂಟ್ಗಳ ಸಮಯದಲ್ಲಿ ನೇರವಾದ DOM ಬದಲಾವಣೆಗಳು ಅತಿ ಹೆಚ್ಚು ಬಾರಿ ಸಂಭವಿಸುತ್ತವೆ. ಇದು 'jank' ಉಂಟುಮಾಡುತ್ತದೆ.
- ಪರಿಹಾರ: ಅಪ್ಡೇಟ್ಗಳನ್ನು ಪೇಂಟ್ ಸೈಕಲ್ನೊಂದಿಗೆ (paint cycle) ಸಿಂಕ್ ಮಾಡಲು ಟಿಕ್ಕಿಂಗ್ ವೇರಿಯೇಬಲ್ (ticking variable) ಮತ್ತು
requestAnimationFrameಬಳಸಿ.
- Large JSON.parse payloads ದೊಡ್ಡ ಫೈಲ್ಗಳನ್ನು ಪಾರ್ಸ್ ಮಾಡುವುದು ಮೇನ್ ಥ್ರೆಡ್ ಅನ್ನು (main thread) ಬ್ಲಾಕ್ ಮಾಡುತ್ತದೆ. ಇದು ಇನ್ಪುಟ್ ವಿಳಂಬಕ್ಕೆ (input lag) ಕಾರಣವಾಗುತ್ತದೆ.
- ಪರಿಹಾರ: ಡೇಟಾವನ್ನು ಮೇನ್ ಥ್ರೆಡ್ನಿಂದ ಹೊರಗೆ ಪಾರ್ಸ್ ಮಾಡಲು Web Workers ಬಳಸಿ.
- Complex CSS selector matching ಆಳವಾಗಿ ನೆಸ್ಟೆಡ್ (nested) ಅಥವಾ ಸಂಕೀರ್ಣ ಸೆಲೆಕ್ಟರ್ಗಳು ಸ್ಟೈಲ್ ಮರುಹಣಿಕೆಯನ್ನು (style recalculations) ನಿಧಾನಗೊಳಿಸುತ್ತವೆ.
- ಪರಿಹಾರ: ಲೇಔಟ್ ಶಿಫ್ಟ್ಗಳನ್ನು (layout shifts) ಪತ್ತೆಹಚ್ಚಲು Lighthouse ಬಳಸಿ ಮತ್ತು ನಿಮ್ಮ ಸೆಲೆಕ್ಟರ್ಗಳನ್ನು ಸರಳಗೊಳಿಸಿ.
- Duplicate bundle chunks ದೊಡ್ಡದಾದ, ಅನ್ಆಪ್ಟಿಮೈಸ್ಡ್ ಬಂಡಲ್ಗಳು ವರ್ಗಾವಣೆ ಸಮಯವನ್ನು ವ್ಯರ್ಥ ಮಾಡುತ್ತವೆ.
- ಪರಿಹಾರ: ಡೂಪ್ಲಿಕೇಟ್ ಕೋಡ್ ಅನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಮತ್ತು ತೆಗೆದುಹಾಕಲು
webpack-bundle-analyzerಬಳಸಿ.
ನಿಮ್ಮ ಪ್ರಗತಿಯನ್ನು ಅಳೆಯುವುದು ಹೇಗೆ:
- Chrome DevTools ತೆರೆಯಿರಿ.
- Performance ಟ್ಯಾಬ್ಗೆ ಹೋಗಿ.
- 5 ಸೆಕೆಂಡ್ಗಳ ಸೆಷನ್ ಅನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡಿ.
- Main flame ಚಾರ್ಟ್ನಲ್ಲಿ 50ms ಗಿಂತ ಹೆಚ್ಚಿನ ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುವ ಕಾರ್ಯಗಳನ್ನು (tasks) ಗಮನಿಸಿ.
- ಒಂದು ಪರಿಹಾರವನ್ನು ಅನ್ವಯಿಸಿ ಮತ್ತು Rendering ಮತ್ತು Painting ಸಮಯಗಳನ್ನು ಹೋಲಿಸಿ ನೋಡಿ.
ಈ ಕ್ಷೇತ್ರಗಳನ್ನು ಸರಿಪಡಿಸುವುದರಿಂದ ನಿಮ್ಮ Core Web Vitals ಸುಧಾರಿಸುತ್ತದೆ, ವಿಶೇಷವಾಗಿ Largest Contentful Paint ಮತ್ತು Interaction to Next Paint.