ವೇಗದ ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅನ್‌ಲಾಕ್ ಮಾಡಿ. ಸಿಎಸ್‌ಎಸ್ ಗ್ರಿಡ್ ಲೇಔಟ್ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಪ್ರೊಫೈಲ್ ಮಾಡಲು, ಟ್ರ್ಯಾಕ್ ಗಾತ್ರದ ಪ್ರಭಾವಗಳನ್ನು ವಿಶ್ಲೇಷಿಸಲು, ಮತ್ತು Chrome DevTools ನೊಂದಿಗೆ ನಿಮ್ಮ ರೆಂಡರಿಂಗ್ ಪೈಪ್‌ಲೈನ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಕಲಿಯಿರಿ.
ಸಿಎಸ್‌ಎಸ್ ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರದ ಕಾರ್ಯಕ್ಷಮತೆಯ ಪ್ರೊಫೈಲಿಂಗ್: ಲೇಔಟ್ ಲೆಕ್ಕಾಚಾರದ ವಿಶ್ಲೇಷಣೆಯ ಆಳವಾದ ಅಧ್ಯಯನ
ಸಿಎಸ್‌ಎಸ್ ಗ್ರಿಡ್ ವೆಬ್ ಲೇಔಟ್‌ನಲ್ಲಿ ಕ್ರಾಂತಿಯನ್ನುಂಟುಮಾಡಿದೆ, ಸಂಕೀರ್ಣ, ಸ್ಪಂದನಾಶೀಲ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಅಭೂತಪೂರ್ವ ಶಕ್ತಿ ಮತ್ತು ನಮ್ಯತೆಯನ್ನು ನೀಡುತ್ತದೆ. `fr` ಯುನಿಟ್, `minmax()`, ಮತ್ತು ವಿಷಯ-ಅರಿವಿನ ಗಾತ್ರದಂತಹ ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ, ನಾವು ಒಮ್ಮೆ ಕನಸಿನಂತಿದ್ದ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು, ಆಗಾಗ್ಗೆ ಆಶ್ಚರ್ಯಕರವಾಗಿ ಕಡಿಮೆ ಕೋಡ್‌ನೊಂದಿಗೆ. ಆದಾಗ್ಯೂ, ಹೆಚ್ಚಿನ ಶಕ್ತಿಯೊಂದಿಗೆ ಹೆಚ್ಚಿನ ಜವಾಬ್ದಾರಿಯೂ ಬರುತ್ತದೆ—ಮತ್ತು ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಜಗತ್ತಿನಲ್ಲಿ, ಆ ಜವಾಬ್ದಾರಿಯು ನಮ್ಮ ವಿನ್ಯಾಸದ ಆಯ್ಕೆಗಳ ಗಣನಾತ್ಮಕ ವೆಚ್ಚವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದರಲ್ಲಿದೆ.
ನಾವು ಸಾಮಾನ್ಯವಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಾರ್ಯಗತಗೊಳಿಸುವಿಕೆ ಅಥವಾ ಇಮೇಜ್ ಲೋಡಿಂಗ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದರ ಮೇಲೆ ಗಮನಹರಿಸುತ್ತೇವೆಯಾದರೂ, ಒಂದು ಗಮನಾರ್ಹ ಮತ್ತು ಆಗಾಗ್ಗೆ ಕಡೆಗಣಿಸಲ್ಪಡುವ ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಯೆಂದರೆ ಬ್ರೌಸರ್‌ನ ಲೇಔಟ್ ಲೆಕ್ಕಾಚಾರದ ಹಂತ. ಪ್ರತಿ ಬಾರಿ ಬ್ರೌಸರ್ ಪುಟದಲ್ಲಿನ ಅಂಶಗಳ ಗಾತ್ರ ಮತ್ತು ಸ್ಥಾನವನ್ನು ನಿರ್ಧರಿಸಬೇಕಾದಾಗ, ಅದು 'ಲೇಔಟ್' ಕಾರ್ಯಾಚರಣೆಯನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ಸಂಕೀರ್ಣ ಸಿಎಸ್‌ಎಸ್, ವಿಶೇಷವಾಗಿ ಅತ್ಯಾಧುನಿಕ ಗ್ರಿಡ್ ರಚನೆಗಳೊಂದಿಗೆ, ಈ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಗಣನಾತ್ಮಕವಾಗಿ ದುಬಾರಿಯಾಗಿಸಬಹುದು, ಇದು ನಿಧಾನಗತಿಯ ಸಂವಹನಗಳು, ವಿಳಂಬಿತ ರೆಂಡರಿಂಗ್ ಮತ್ತು ಕಳಪೆ ಬಳಕೆದಾರರ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ. ಇಲ್ಲಿಯೇ ಕಾರ್ಯಕ್ಷಮತೆಯ ಪ್ರೊಫೈಲಿಂಗ್ ಕೇವಲ ಡೀಬಗ್ ಮಾಡುವ ಸಾಧನವಾಗದೆ, ವಿನ್ಯಾಸ ಮತ್ತು ಅಭಿವೃದ್ಧಿ ಪ್ರಕ್ರಿಯೆಯ ಒಂದು ನಿರ್ಣಾಯಕ ಭಾಗವಾಗುತ್ತದೆ.
ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯು ನಿಮ್ಮನ್ನು ಸಿಎಸ್‌ಎಸ್ ಗ್ರಿಡ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಜಗತ್ತಿನಲ್ಲಿ ಆಳವಾದ ಅಧ್ಯಯನಕ್ಕೆ ಕರೆದೊಯ್ಯುತ್ತದೆ. ನಾವು ಸಿಂಟ್ಯಾಕ್ಸ್‌ನಿಂದಾಚೆ ಸಾಗಿ ಕಾರ್ಯಕ್ಷಮತೆಯ ವ್ಯತ್ಯಾಸಗಳ ಹಿಂದಿನ 'ಏಕೆ' ಎಂಬುದನ್ನು ಅನ್ವೇಷಿಸುತ್ತೇವೆ. ನಿಮ್ಮ ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರದ ತಂತ್ರಗಳಿಂದ ಉಂಟಾಗುವ ಲೇಔಟ್ ಅಡಚಣೆಗಳನ್ನು ಅಳೆಯಲು, ವಿಶ್ಲೇಷಿಸಲು ಮತ್ತು ಪತ್ತೆಹಚ್ಚಲು ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂದು ನೀವು ಕಲಿಯುವಿರಿ. ಕೊನೆಯಲ್ಲಿ, ನೀವು ಕೇವಲ ಸುಂದರ ಮತ್ತು ಸ್ಪಂದನಾಶೀಲವಲ್ಲದೆ, ಮಿಂಚಿನ ವೇಗದ ಲೇಔಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಸಜ್ಜಾಗುತ್ತೀರಿ.
ಬ್ರೌಸರ್ ರೆಂಡರಿಂಗ್ ಪೈಪ್‌ಲೈನ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
ನಾವು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವ ಮೊದಲು, ನಾವು ಸುಧಾರಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತಿರುವ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಮೊದಲು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕು. ಒಂದು ಬ್ರೌಸರ್ ವೆಬ್‌ಪುಟವನ್ನು ರೆಂಡರ್ ಮಾಡಿದಾಗ, ಅದು ಕ್ರಿಟಿಕಲ್ ರೆಂಡರಿಂಗ್ ಪಾತ್ ಎಂದು ಕರೆಯಲ್ಪಡುವ ಹಂತಗಳ ಅನುಕ್ರಮವನ್ನು ಅನುಸರಿಸುತ್ತದೆ. ನಿಖರವಾದ ಪರಿಭಾಷೆಯು ಬ್ರೌಸರ್‌ಗಳ ನಡುವೆ ಸ್ವಲ್ಪ ಬದಲಾಗಬಹುದಾದರೂ, ಪ್ರಮುಖ ಹಂತಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಸ್ಥಿರವಾಗಿರುತ್ತವೆ:
- ಸ್ಟೈಲ್: ಬ್ರೌಸರ್ ಸಿಎಸ್‌ಎಸ್ ಅನ್ನು ಪಾರ್ಸ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಪ್ರತಿ DOM ಅಂಶಕ್ಕೆ ಅಂತಿಮ ಶೈಲಿಗಳನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. ಇದು ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಪರಿಹರಿಸುವುದು, ಕ್ಯಾಸ್ಕೇಡ್ ಅನ್ನು ನಿರ್ವಹಿಸುವುದು, ಮತ್ತು ಪ್ರತಿ ನೋಡ್‌ಗೆ ಗಣනය ಮಾಡಿದ ಶೈಲಿಯನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ.
- ಲೇಔಟ್ (ಅಥವಾ ರಿಫ್ಲೋ): ಇದು ನಮ್ಮ ಪ್ರಾಥಮಿಕ ಗಮನ. ಶೈಲಿಗಳನ್ನು ಗಣනය ಮಾಡಿದ ನಂತರ, ಬ್ರೌಸರ್ ಪ್ರತಿ ಅಂಶದ ಜ್ಯಾಮಿತಿಯನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ. ಇದು ಪ್ರತಿ ಅಂಶವು ಪುಟದಲ್ಲಿ ನಿಖರವಾಗಿ ಎಲ್ಲಿಗೆ ಹೋಗಬೇಕು ಮತ್ತು ಅದು ಎಷ್ಟು ಜಾಗವನ್ನು ಆಕ್ರಮಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಕಂಡುಹಿಡಿಯುತ್ತದೆ. ಇದು ಅಗಲಗಳು, ಎತ್ತರಗಳು ಮತ್ತು ಸ್ಥಾನಗಳಂತಹ ಜ್ಯಾಮಿತೀಯ ಮಾಹಿತಿಯನ್ನು ಒಳಗೊಂಡಿರುವ 'ಲೇಔಟ್ ಟ್ರೀ' ಅಥವಾ 'ರೆಂಡರ್ ಟ್ರೀ' ಅನ್ನು ರಚಿಸುತ್ತದೆ.
- ಪೇಂಟ್: ಈ ಹಂತದಲ್ಲಿ, ಬ್ರೌಸರ್ ಪಿಕ್ಸೆಲ್‌ಗಳನ್ನು ತುಂಬುತ್ತದೆ. ಇದು ಹಿಂದಿನ ಹಂತದಿಂದ ಲೇಔಟ್ ಟ್ರೀಯನ್ನು ತೆಗೆದುಕೊಂಡು ಅದನ್ನು ಪರದೆಯ ಮೇಲೆ ಪಿಕ್ಸೆಲ್‌ಗಳ ಗುಂಪಾಗಿ ಪರಿವರ್ತಿಸುತ್ತದೆ. ಇದು ಪಠ್ಯ, ಬಣ್ಣಗಳು, ಚಿತ್ರಗಳು, ಬಾರ್ಡರ್‌ಗಳು ಮತ್ತು ನೆರಳುಗಳನ್ನು ಚಿತ್ರಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ - ಮೂಲಭೂತವಾಗಿ, ಅಂಶಗಳ ಎಲ್ಲಾ ದೃಶ್ಯ ಭಾಗಗಳು.
- ಕಂಪೋಸಿಟ್: ಬ್ರೌಸರ್ ವಿವಿಧ ಪೇಂಟ್ ಮಾಡಿದ ಲೇಯರ್‌ಗಳನ್ನು ಸರಿಯಾದ ಕ್ರಮದಲ್ಲಿ ಪರದೆಗೆ ಚಿತ್ರಿಸುತ್ತದೆ. `transform` ಅಥವಾ `opacity` ನಂತಹ ನಿರ್ದಿಷ್ಟ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಹೊಂದಿರುವ ಅಥವಾ ಒಂದರ ಮೇಲೊಂದು ಇರುವ ಅಂಶಗಳನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ನಂತರದ ನವೀಕರಣಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ತಮ್ಮದೇ ಆದ ಲೇಯರ್‌ಗಳಲ್ಲಿ ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ.
ಗ್ರಿಡ್ ಕಾರ್ಯಕ್ಷಮತೆಗೆ 'ಲೇಔಟ್' ಹಂತ ಏಕೆ ನಿರ್ಣಾಯಕವಾಗಿದೆ
ಸರಳ ಬ್ಲಾಕ್-ಮತ್ತು-ಇನ್‌ಲೈನ್ ಡಾಕ್ಯುಮೆಂಟ್‌ಗೆ ಲೇಔಟ್ ಹಂತವು ತುಲನಾತ್ಮಕವಾಗಿ ಸರಳವಾಗಿದೆ. ಬ್ರೌಸರ್ ಆಗಾಗ್ಗೆ ಅಂಶಗಳನ್ನು ಒಂದೇ ಪಾಸ್‌ನಲ್ಲಿ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಬಹುದು, ಅವುಗಳ ಪೋಷಕರ ಆಧಾರದ ಮೇಲೆ ಅವುಗಳ ಆಯಾಮಗಳನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಸಿಎಸ್‌ಎಸ್ ಗ್ರಿಡ್ ಹೊಸ ಮಟ್ಟದ ಸಂಕೀರ್ಣತೆಯನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ. ಗ್ರಿಡ್ ಕಂಟೇನರ್ ಒಂದು ನಿರ್ಬಂಧ-ಆಧಾರಿತ ವ್ಯವಸ್ಥೆಯಾಗಿದೆ. ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್ ಅಥವಾ ಐಟಂನ ಅಂತಿಮ ಗಾತ್ರವು ಸಾಮಾನ್ಯವಾಗಿ ಇತರ ಟ್ರ್ಯಾಕ್‌ಗಳ ಗಾತ್ರ, ಕಂಟೇನರ್‌ನಲ್ಲಿ ಲಭ್ಯವಿರುವ ಸ್ಥಳ, ಅಥವಾ ಅದರ ಸಹೋದರ ಐಟಂಗಳೊಳಗಿನ ವಿಷಯದ ಆಂತರಿಕ ಗಾತ್ರವನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ.
ಅಂತಿಮ ಲೇಔಟ್ ಅನ್ನು ತಲುಪಲು ಬ್ರೌಸರ್‌ನ ಲೇಔಟ್ ಇಂಜಿನ್ ಈ ಸಂಕೀರ್ಣ ಸಮೀಕರಣಗಳ ವ್ಯವಸ್ಥೆಯನ್ನು ಪರಿಹರಿಸಬೇಕಾಗುತ್ತದೆ. ನಿಮ್ಮ ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ನೀವು ವ್ಯಾಖ್ಯಾನಿಸುವ ವಿಧಾನ—ನಿಮ್ಮ ಗಾತ್ರದ ಯುನಿಟ್‌ಗಳು ಮತ್ತು ಫಂಕ್ಷನ್‌ಗಳ ಆಯ್ಕೆ—ಈ ವ್ಯವಸ್ಥೆಯನ್ನು ಪರಿಹರಿಸಲು ಬೇಕಾದ ಕಷ್ಟ ಮತ್ತು ಆದ್ದರಿಂದ ಸಮಯದ ಮೇಲೆ ನೇರವಾಗಿ ಪ್ರಭಾವ ಬೀರುತ್ತದೆ. ಇದಕ್ಕಾಗಿಯೇ `grid-template-columns` ನಲ್ಲಿನ ಒಂದು ಸಣ್ಣ ಬದಲಾವಣೆಯು ರೆಂಡರಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಅಸಮಾನವಾದ ಪರಿಣಾಮವನ್ನು ಬೀರಬಹುದು.
ಸಿಎಸ್‌ಎಸ್ ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರದ ರಚನೆ: ಒಂದು ಕಾರ್ಯಕ್ಷಮತೆಯ ದೃಷ್ಟಿಕೋನ
ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಪ್ರೊಫೈಲ್ ಮಾಡಲು, ನಿಮ್ಮ ಬಳಿ ಲಭ್ಯವಿರುವ ಪರಿಕರಗಳ ಕಾರ್ಯಕ್ಷಮತೆಯ ಗುಣಲಕ್ಷಣಗಳನ್ನು ನೀವು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕು. ನಾವು ಸಾಮಾನ್ಯ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರದ ಕಾರ್ಯವಿಧಾನಗಳನ್ನು ವಿಭಜಿಸಿ ಅವುಗಳ ಸಂಭಾವ್ಯ ಗಣನಾತ್ಮಕ ವೆಚ್ಚವನ್ನು ವಿಶ್ಲೇಷಿಸೋಣ.
1. ಸ್ಥಿರ ಮತ್ತು ನಿರೀಕ್ಷಿತ ಗಾತ್ರ
ಇವುಗಳು ಸರಳ ಮತ್ತು ಅತ್ಯಂತ ಕಾರ್ಯಕ್ಷಮತೆಯ ಆಯ್ಕೆಗಳಾಗಿವೆ ಏಕೆಂದರೆ ಅವು ಲೇಔಟ್ ಇಂಜಿನ್‌ಗೆ ಸ್ಪಷ್ಟ, ಅಸಂದಿಗ್ಧ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸುತ್ತವೆ.
- ಸ್ಥಿರ ಯುನಿಟ್‌ಗಳು (`px`, `rem`, `em`): ನೀವು `grid-template-columns: 200px 10rem;` ಎಂದು ಟ್ರ್ಯಾಕ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿದಾಗ, ಬ್ರೌಸರ್‌ಗೆ ಈ ಟ್ರ್ಯಾಕ್‌ಗಳ ನಿಖರ ಗಾತ್ರ ತಕ್ಷಣವೇ ತಿಳಿಯುತ್ತದೆ. ಯಾವುದೇ ಸಂಕೀರ್ಣ ಲೆಕ್ಕಾಚಾರದ ಅಗತ್ಯವಿಲ್ಲ. ಇದು ಗಣನಾತ್ಮಕವಾಗಿ ಬಹಳ ಅಗ್ಗವಾಗಿದೆ.
- ಶೇಕಡಾವಾರು ಯುನಿಟ್‌ಗಳು (`%`): ಶೇಕಡಾವಾರು ಗ್ರಿಡ್ ಕಂಟೇನರ್‌ನ ಗಾತ್ರಕ್ಕೆ ಸಂಬಂಧಿಸಿದಂತೆ ಪರಿಹರಿಸಲ್ಪಡುತ್ತದೆ. ಇದಕ್ಕೆ ಒಂದು ಹೆಚ್ಚುವರಿ ಹಂತ (ಪೋಷಕರ ಅಗಲವನ್ನು ಪಡೆಯುವುದು) ಬೇಕಾದರೂ, ಇದು ಇನ್ನೂ ಅತ್ಯಂತ ವೇಗದ ಮತ್ತು ನಿರ್ಣಾಯಕ ಲೆಕ್ಕಾಚಾರವಾಗಿದೆ. ಬ್ರೌಸರ್ ಈ ಗಾತ್ರಗಳನ್ನು ಲೇಔಟ್ ಪ್ರಕ್ರಿಯೆಯ ಆರಂಭದಲ್ಲಿಯೇ ಪರಿಹರಿಸಬಲ್ಲದು.
ಕಾರ್ಯಕ್ಷಮತೆಯ ಪ್ರೊಫೈಲ್: ಕೇವಲ ಸ್ಥಿರ ಮತ್ತು ಶೇಕಡಾವಾರು ಗಾತ್ರವನ್ನು ಬಳಸುವ ಲೇಔಟ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಅತ್ಯಂತ ವೇಗವಾಗಿರುತ್ತವೆ. ಬ್ರೌಸರ್ ಗ್ರಿಡ್ ಜ್ಯಾಮಿತಿಯನ್ನು ಒಂದೇ, ದಕ್ಷ ಪಾಸ್‌ನಲ್ಲಿ ಪರಿಹರಿಸಬಲ್ಲದು.
2. ನಮ್ಯ ಗಾತ್ರ (Flexible Sizing)
ಈ ವರ್ಗವು ನಮ್ಯತೆಯನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ, ಟ್ರ್ಯಾಕ್‌ಗಳಿಗೆ ಲಭ್ಯವಿರುವ ಸ್ಥಳಕ್ಕೆ ಹೊಂದಿಕೊಳ್ಳಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಇದು ಸ್ಥಿರ ಗಾತ್ರಕ್ಕಿಂತ ಸ್ವಲ್ಪ ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾಗಿದೆ ಆದರೆ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಹೆಚ್ಚು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲಾಗಿದೆ.
- ಫ್ರ್ಯಾಕ್ಷನಲ್ ಯುನಿಟ್‌ಗಳು (`fr`): `fr` ಯುನಿಟ್ ಗ್ರಿಡ್ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಲಭ್ಯವಿರುವ ಸ್ಥಳದ ಒಂದು ಭಾಗವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. `fr` ಯುನಿಟ್‌ಗಳನ್ನು ಪರಿಹರಿಸಲು, ಬ್ರೌಸರ್ ಮೊದಲು ಎಲ್ಲಾ ನಮ್ಯವಲ್ಲದ ಟ್ರ್ಯಾಕ್‌ಗಳು (`px` ಅಥವಾ `auto` ಟ್ರ್ಯಾಕ್‌ಗಳಂತಹ) ತೆಗೆದುಕೊಂಡ ಸ್ಥಳವನ್ನು ಕಳೆಯುತ್ತದೆ ಮತ್ತು ನಂತರ ಉಳಿದ ಸ್ಥಳವನ್ನು `fr` ಟ್ರ್ಯಾಕ್‌ಗಳ ನಡುವೆ ಅವುಗಳ ಭಾಗಕ್ಕೆ ಅನುಗುಣವಾಗಿ ವಿಭಜಿಸುತ್ತದೆ.
ಕಾರ್ಯಕ್ಷಮತೆಯ ಪ್ರೊಫೈಲ್: `fr` ಯುನಿಟ್‌ಗಳ ಲೆಕ್ಕಾಚಾರವು ಬಹು-ಹಂತದ ಪ್ರಕ್ರಿಯೆಯಾಗಿದೆ, ಆದರೆ ಇದು ಗ್ರಿಡ್ ಐಟಂಗಳ ವಿಷಯದ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿಲ್ಲದ ಉತ್ತಮವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಗಣಿತದ ಕಾರ್ಯಾಚರಣೆಯಾಗಿದೆ. ಹೆಚ್ಚಿನ ಸಾಮಾನ್ಯ ಬಳಕೆಯ ಸಂದರ್ಭಗಳಲ್ಲಿ, ಇದು ಅತ್ಯಂತ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಹೊಂದಿದೆ.
3. ವಿಷಯ-ಆಧಾರಿತ ಗಾತ್ರ (ಕಾರ್ಯಕ್ಷಮತೆಯ ಹಾಟ್‌ಸ್ಪಾಟ್)
ಇಲ್ಲಿ ವಿಷಯಗಳು ಆಸಕ್ತಿದಾಯಕವಾಗುತ್ತವೆ - ಮತ್ತು ಸಂಭಾವ್ಯವಾಗಿ ನಿಧಾನವಾಗುತ್ತವೆ. ವಿಷಯ-ಆಧಾರಿತ ಗಾತ್ರದ ಕೀವರ್ಡ್‌ಗಳು ಬ್ರೌಸರ್‌ಗೆ ಅದರೊಳಗಿನ ಐಟಂಗಳ ವಿಷಯದ ಆಧಾರದ ಮೇಲೆ ಟ್ರ್ಯಾಕ್ ಅನ್ನು ಗಾತ್ರಗೊಳಿಸಲು ಸೂಚಿಸುತ್ತವೆ. ಇದು ವಿಷಯ ಮತ್ತು ಲೇಔಟ್ ನಡುವೆ ಪ್ರಬಲವಾದ ಸಂಪರ್ಕವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ, ಆದರೆ ಇದು ಗಣನಾತ್ಮಕ ವೆಚ್ಚದೊಂದಿಗೆ ಬರುತ್ತದೆ.
- `min-content`: ವಿಷಯದ ಆಂತರಿಕ ಕನಿಷ್ಠ ಅಗಲವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಪಠ್ಯಕ್ಕಾಗಿ, ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಅತಿ ಉದ್ದದ ಪದ ಅಥವಾ ಮುರಿಯಲಾಗದ ಸ್ಟ್ರಿಂಗ್‌ನ ಅಗಲವಾಗಿರುತ್ತದೆ. ಇದನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು, ಬ್ರೌಸರ್‌ನ ಲೇಔಟ್ ಇಂಜಿನ್ ಆ ಅತಿ ಅಗಲದ ಭಾಗವನ್ನು ಕಂಡುಹಿಡಿಯಲು ವಿಷಯವನ್ನು ತಾತ್ವಿಕವಾಗಿ ಲೇಔಟ್ ಮಾಡಬೇಕು.
- `max-content`: ವಿಷಯದ ಆಂತರಿಕ ಆದ್ಯತೆಯ ಅಗಲವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ, ಇದು ಸ್ಪಷ್ಟವಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಲೈನ್ ಬ್ರೇಕ್‌ಗಳಿಲ್ಲದೆ ತೆಗೆದುಕೊಳ್ಳುವ ಅಗಲವಾಗಿದೆ. ಇದನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು, ಬ್ರೌಸರ್ ಸಂಪೂರ್ಣ ವಿಷಯವನ್ನು ಒಂದೇ, ಅನಂತವಾಗಿ ಉದ್ದವಾದ ಸಾಲಿನಲ್ಲಿ ತಾತ್ವಿಕವಾಗಿ ಲೇಔಟ್ ಮಾಡಬೇಕು.
- `auto`: ಈ ಕೀವರ್ಡ್ ಸಂದರ್ಭ-ಅವಲಂಬಿತವಾಗಿದೆ. ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಗಾತ್ರಗೊಳಿಸಲು ಬಳಸಿದಾಗ, ಐಟಂ ಅನ್ನು ವಿಸ್ತರಿಸದಿದ್ದರೆ ಅಥವಾ ನಿರ್ದಿಷ್ಟ ಗಾತ್ರವನ್ನು ಹೊಂದಿರದಿದ್ದರೆ, ಇದು ಸಾಮಾನ್ಯವಾಗಿ `max-content` ನಂತೆ ವರ್ತಿಸುತ್ತದೆ. ಅದರ ಸಂಕೀರ್ಣತೆಯು `max-content` ಗೆ ಹೋಲುತ್ತದೆ ಏಕೆಂದರೆ ಬ್ರೌಸರ್ ಅದರ ಗಾತ್ರವನ್ನು ನಿರ್ಧರಿಸಲು ವಿಷಯವನ್ನು ಅಳೆಯಬೇಕಾಗುತ್ತದೆ.
ಕಾರ್ಯಕ್ಷಮತೆಯ ಪ್ರೊಫೈಲ್: ಈ ಕೀವರ್ಡ್‌ಗಳು ಅತ್ಯಂತ ಗಣನಾತ್ಮಕವಾಗಿ ದುಬಾರಿಯಾಗಿವೆ. ಏಕೆ? ಏಕೆಂದರೆ ಅವು ದ್ವಿಮುಖ ಅವಲಂಬನೆಯನ್ನು ಸೃಷ್ಟಿಸುತ್ತವೆ. ಕಂಟೇನರ್‌ನ ಲೇಔಟ್ ಐಟಂಗಳ ವಿಷಯದ ಗಾತ್ರದ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದೆ, ಆದರೆ ಐಟಂಗಳ ವಿಷಯದ ಲೇಔಟ್ ಕಂಟೇನರ್‌ನ ಗಾತ್ರದ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರಬಹುದು. ಇದನ್ನು ಪರಿಹರಿಸಲು, ಬ್ರೌಸರ್ ಬಹು ಲೇಔಟ್ ಪಾಸ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಬೇಕಾಗಬಹುದು. ಟ್ರ್ಯಾಕ್‌ನ ಅಂತಿಮ ಗಾತ್ರವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು ಅದು ಆ ಟ್ರ್ಯಾಕ್‌ನಲ್ಲಿರುವ ಪ್ರತಿಯೊಂದು ಐಟಂನ ವಿಷಯವನ್ನು ಅಳೆಯಬೇಕಾಗುತ್ತದೆ. ಅನೇಕ ಐಟಂಗಳನ್ನು ಹೊಂದಿರುವ ಗ್ರಿಡ್‌ಗೆ, ಇದು ಗಮನಾರ್ಹ ಅಡಚಣೆಯಾಗಬಹುದು.
4. ಫಂಕ್ಷನ್-ಆಧಾರಿತ ಗಾತ್ರ
ಫಂಕ್ಷನ್‌ಗಳು ವಿಭಿನ್ನ ಗಾತ್ರದ ಮಾದರಿಗಳನ್ನು ಸಂಯೋಜಿಸಲು ಒಂದು ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತವೆ, ನಮ್ಯತೆ ಮತ್ತು ನಿಯಂತ್ರಣ ಎರಡನ್ನೂ ನೀಡುತ್ತವೆ.
- `minmax(min, max)`: ಈ ಫಂಕ್ಷನ್ ಗಾತ್ರದ ವ್ಯಾಪ್ತಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. `minmax()` ನ ಕಾರ್ಯಕ್ಷಮತೆಯು ಅದರ ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳಿಗಾಗಿ ಬಳಸಲಾಗುವ ಯುನಿಟ್‌ಗಳ ಮೇಲೆ ಸಂಪೂರ್ಣವಾಗಿ ಅವಲಂಬಿತವಾಗಿರುತ್ತದೆ. `minmax(200px, 1fr)` ಅತ್ಯಂತ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಹೊಂದಿದೆ, ಏಕೆಂದರೆ ಇದು ಸ್ಥಿರ ಮೌಲ್ಯವನ್ನು ನಮ್ಯ ಮೌಲ್ಯದೊಂದಿಗೆ ಸಂಯೋಜಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, `minmax(min-content, 500px)` `min-content` ನ ಕಾರ್ಯಕ್ಷಮತೆಯ ವೆಚ್ಚವನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುತ್ತದೆ ಏಕೆಂದರೆ ಬ್ರೌಸರ್ ಅದನ್ನು ಗರಿಷ್ಠ ಮೌಲ್ಯಕ್ಕಿಂತ ದೊಡ್ಡದಾಗಿದೆಯೇ ಎಂದು ನೋಡಲು ಅದನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಬೇಕಾಗುತ್ತದೆ.
- `fit-content(value)`: ಇದು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಒಂದು ಕ್ಲ್ಯಾಂಪ್ ಆಗಿದೆ. ಇದು `minmax(auto, max-content)` ಗೆ ಸಮನಾಗಿರುತ್ತದೆ, ಆದರೆ ನೀಡಿದ `value` ನಲ್ಲಿ ಕ್ಲ್ಯಾಂಪ್ ಮಾಡಲಾಗಿದೆ. ಆದ್ದರಿಂದ, `fit-content(300px)` `minmax(min-content, max(min-content, 300px))` ನಂತೆ ವರ್ತಿಸುತ್ತದೆ. ಇದು ವಿಷಯ-ಆಧಾರಿತ ಗಾತ್ರದ ಕಾರ್ಯಕ್ಷಮತೆಯ ವೆಚ್ಚವನ್ನು ಸಹ ಹೊಂದಿರುತ್ತದೆ.
ವೃತ್ತಿಯ ಪರಿಕರಗಳು: Chrome DevTools ನೊಂದಿಗೆ ಪ್ರೊಫೈಲಿಂಗ್
ಸಿದ್ಧಾಂತವು ಉಪಯುಕ್ತವಾಗಿದೆ, ಆದರೆ ಡೇಟಾ ನಿರ್ಣಾಯಕವಾಗಿದೆ. ನಿಮ್ಮ ಗ್ರಿಡ್ ಲೇಔಟ್‌ಗಳು ನೈಜ ಜಗತ್ತಿನಲ್ಲಿ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು, ನೀವು ಅವುಗಳನ್ನು ಅಳೆಯಬೇಕು. Google Chrome ನ DevTools ನಲ್ಲಿನ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಪ್ಯಾನೆಲ್ ಇದಕ್ಕಾಗಿ ಒಂದು ಅನಿವಾರ್ಯ ಸಾಧನವಾಗಿದೆ.
ಕಾರ್ಯಕ್ಷಮತೆಯ ಪ್ರೊಫೈಲ್ ಅನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡುವುದು ಹೇಗೆ
ನಿಮಗೆ ಬೇಕಾದ ಡೇಟಾವನ್ನು ಸೆರೆಹಿಡಿಯಲು ಈ ಹಂತಗಳನ್ನು ಅನುಸರಿಸಿ:
- Chrome ನಲ್ಲಿ ನಿಮ್ಮ ವೆಬ್‌ಪುಟವನ್ನು ತೆರೆಯಿರಿ.
- DevTools ತೆರೆಯಿರಿ (F12, Ctrl+Shift+I, ಅಥವಾ Cmd+Opt+I).
- Performance ಟ್ಯಾಬ್‌ಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿ.
- ನಿಮ್ಮ ಟೈಮ್‌ಲೈನ್‌ನಲ್ಲಿ ಉಪಯುಕ್ತ ಮಾರ್ಕರ್‌ಗಳನ್ನು ಪಡೆಯಲು "Web Vitals" ಚೆಕ್‌ಬಾಕ್ಸ್ ಅನ್ನು ಟಿಕ್ ಮಾಡಲಾಗಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
- Record ಬಟನ್ (ವೃತ್ತ) ಕ್ಲಿಕ್ ಮಾಡಿ ಅಥವಾ Ctrl+E ಒತ್ತಿರಿ.
- ನೀವು ಪ್ರೊಫೈಲ್ ಮಾಡಲು ಬಯಸುವ ಕ್ರಿಯೆಯನ್ನು ನಿರ್ವಹಿಸಿ. ಇದು ಆರಂಭಿಕ ಪುಟ ಲೋಡ್, ಬ್ರೌಸರ್ ವಿಂಡೋವನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸುವುದು, ಅಥವಾ ಗ್ರಿಡ್‌ಗೆ ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ವಿಷಯವನ್ನು ಸೇರಿಸುವ ಕ್ರಿಯೆಯಾಗಿರಬಹುದು (ಫಿಲ್ಟರ್ ಅನ್ನು ಅನ್ವಯಿಸುವಂತೆ). ಇವೆಲ್ಲವೂ ಲೇಔಟ್ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಪ್ರಚೋದಿಸುವ ಕ್ರಿಯೆಗಳಾಗಿವೆ.
- Stop ಕ್ಲಿಕ್ ಮಾಡಿ ಅಥವಾ ಮತ್ತೆ Ctrl+E ಒತ್ತಿರಿ.
- DevTools ಡೇಟಾವನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ನಿಮಗೆ ವಿವರವಾದ ಟೈಮ್‌ಲೈನ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ.
ಫ್ಲೇಮ್ ಚಾರ್ಟ್ ಅನ್ನು ವಿಶ್ಲೇಷಿಸುವುದು
ಫ್ಲೇಮ್ ಚಾರ್ಟ್ ನಿಮ್ಮ ರೆಕಾರ್ಡಿಂಗ್‌ನ ಮುಖ್ಯ ದೃಶ್ಯ ನಿರೂಪಣೆಯಾಗಿದೆ. ಲೇಔಟ್ ವಿಶ್ಲೇಷಣೆಗಾಗಿ, ನೀವು "Main" ಥ್ರೆಡ್ ವಿಭಾಗದ ಮೇಲೆ ಗಮನಹರಿಸಬೇಕು.
"Rendering" ಎಂದು ಲೇಬಲ್ ಮಾಡಲಾದ ಉದ್ದವಾದ, ನೇರಳೆ ಬಾರ್‌ಗಳನ್ನು ನೋಡಿ. ಇವುಗಳೊಳಗೆ, ನೀವು "Layout" ಎಂದು ಲೇಬಲ್ ಮಾಡಲಾದ ಗಾಢ ನೇರಳೆ ಈವೆಂಟ್‌ಗಳನ್ನು ಕಾಣುವಿರಿ. ಇವುಗಳು ಬ್ರೌಸರ್ ಪುಟದ ಜ್ಯಾಮಿತಿಯನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತಿರುವ ನಿರ್ದಿಷ್ಟ ಕ್ಷಣಗಳಾಗಿವೆ.
- ದೀರ್ಘ ಲೇಔಟ್ ಕಾರ್ಯಗಳು: ಒಂದೇ, ಉದ್ದವಾದ 'ಲೇಔಟ್' ಬ್ಲಾಕ್ ಒಂದು ಕೆಂಪು ಧ್ವಜವಾಗಿದೆ. ಅದರ ಅವಧಿಯನ್ನು ನೋಡಲು ಅದರ ಮೇಲೆ ಹೋವರ್ ಮಾಡಿ. ಶಕ್ತಿಯುತ ಯಂತ್ರದಲ್ಲಿ ಕೆಲವು ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳಿಗಿಂತ ಹೆಚ್ಚು (ಉದಾ., > 10-15ms) ತೆಗೆದುಕೊಳ್ಳುವ ಯಾವುದೇ ಲೇಔಟ್ ಕಾರ್ಯವು ತನಿಖೆಗೆ ಅರ್ಹವಾಗಿದೆ, ಏಕೆಂದರೆ ಅದು ಕಡಿಮೆ ಶಕ್ತಿಯುತ ಸಾಧನಗಳಲ್ಲಿ ಹೆಚ್ಚು ನಿಧಾನವಾಗಿರುತ್ತದೆ.
- ಲೇಔಟ್ ಥ್ರ್ಯಾಶಿಂಗ್: ತ್ವರಿತ ಅನುಕ್ರಮದಲ್ಲಿ ಸಂಭವಿಸುವ ಅನೇಕ ಸಣ್ಣ 'ಲೇಔಟ್' ಈವೆಂಟ್‌ಗಳನ್ನು ನೋಡಿ, ಆಗಾಗ್ಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ('ಸ್ಕ್ರಿಪ್ಟಿಂಗ್' ಈವೆಂಟ್‌ಗಳು) ನೊಂದಿಗೆ ಹೆಣೆದುಕೊಂಡಿರುತ್ತದೆ. ಈ ಮಾದರಿಯು, ಲೇಔಟ್ ಥ್ರ್ಯಾಶಿಂಗ್ ಎಂದು ಕರೆಯಲ್ಪಡುತ್ತದೆ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪದೇ ಪದೇ ಜ್ಯಾಮಿತೀಯ ಗುಣಲಕ್ಷಣವನ್ನು (ಉದಾಹರಣೆಗೆ `offsetHeight`) ಓದಿದಾಗ ಮತ್ತು ನಂತರ ಅದನ್ನು ಅಮಾನ್ಯಗೊಳಿಸುವ ಶೈಲಿಯನ್ನು ಬರೆದಾಗ ಸಂಭವಿಸುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಬ್ರೌಸರ್ ಲೂಪ್‌ನಲ್ಲಿ ಮತ್ತೆ ಮತ್ತೆ ಲೇಔಟ್ ಅನ್ನು ಮರುಲೆಕ್ಕಾಚಾರ ಮಾಡಲು ಒತ್ತಾಯಿಸಲ್ಪಡುತ್ತದೆ.
ಸಾರಾಂಶ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ ಮಾನಿಟರ್ ಅನ್ನು ಬಳಸುವುದು
- Summary Tab: ಫ್ಲೇಮ್ ಚಾರ್ಟ್‌ನಲ್ಲಿ ಸಮಯದ ವ್ಯಾಪ್ತಿಯನ್ನು ಆಯ್ಕೆ ಮಾಡಿದ ನಂತರ, ಕೆಳಭಾಗದಲ್ಲಿರುವ Summary ಟ್ಯಾಬ್ ನಿಮಗೆ ಖರ್ಚು ಮಾಡಿದ ಸಮಯವನ್ನು ವಿಭಜಿಸುವ ಪೈ ಚಾರ್ಟ್ ಅನ್ನು ನೀಡುತ್ತದೆ. "Rendering" ಮತ್ತು ನಿರ್ದಿಷ್ಟವಾಗಿ "Layout" ಗೆ ಕಾರಣವಾದ ಶೇಕಡಾವಾರು ಪ್ರಮಾಣಕ್ಕೆ ಗಮನ ಕೊಡಿ.
- Performance Monitor: ನೈಜ-ಸಮಯದ ವಿಶ್ಲೇಷಣೆಗಾಗಿ, ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಮಾನಿಟರ್ ಅನ್ನು ತೆರೆಯಿರಿ (DevTools ಮೆನುವಿನಿಂದ: More tools > Performance monitor). ಇದು ಸಿಪಿಯು ಬಳಕೆ, ಜೆಎಸ್ ಹೀಪ್ ಗಾತ್ರ, DOM ನೋಡ್‌ಗಳು, ಮತ್ತು ನಿರ್ಣಾಯಕವಾಗಿ, Layouts/sec ಗಾಗಿ ಲೈವ್ ಗ್ರಾಫ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ನಿಮ್ಮ ಪುಟದೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸುವುದು ಮತ್ತು ಈ ಗ್ರಾಫ್ ಸ್ಪೈಕ್ ಆಗುವುದನ್ನು ನೋಡುವುದು ಯಾವ ಕ್ರಿಯೆಗಳು ದುಬಾರಿ ಲೇಔಟ್ ಮರುಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಪ್ರಚೋದಿಸುತ್ತಿವೆ ಎಂದು ತಕ್ಷಣವೇ ಹೇಳಬಹುದು.
ಪ್ರಾಯೋಗಿಕ ಪ್ರೊಫೈಲಿಂಗ್ ಸನ್ನಿವೇಶಗಳು: ಸಿದ್ಧಾಂತದಿಂದ ಅಭ್ಯಾಸಕ್ಕೆ
ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳೊಂದಿಗೆ ನಮ್ಮ ಜ್ಞಾನವನ್ನು ಪರೀಕ್ಷಿಸೋಣ. ನಾವು ವಿಭಿನ್ನ ಗ್ರಿಡ್ ಅನುಷ್ಠಾನಗಳನ್ನು ಹೋಲಿಸಿ ಅವುಗಳ ಕಾಲ್ಪನಿಕ ಕಾರ್ಯಕ್ಷಮತೆಯ ಪ್ರೊಫೈಲ್‌ಗಳನ್ನು ವಿಶ್ಲೇಷಿಸುತ್ತೇವೆ.
ಸನ್ನಿವೇಶ 1: ಸ್ಥಿರ ಮತ್ತು ನಮ್ಯ (`px` ಮತ್ತು `fr`) ವರ್ಸಸ್ ವಿಷಯ-ಆಧಾರಿತ (`auto`)
100 ಐಟಂಗಳನ್ನು ಹೊಂದಿರುವ ಉತ್ಪನ್ನ ಗ್ರಿಡ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಕಾಲಮ್‌ಗಳಿಗಾಗಿ ಎರಡು ವಿಧಾನಗಳನ್ನು ಹೋಲಿಸೋಣ.
ವಿಧಾನ A (ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳದ್ದು): ಸ್ಥಿರ ಕನಿಷ್ಠ ಮತ್ತು ನಮ್ಯ ಗರಿಷ್ಠದೊಂದಿಗೆ `minmax()` ಅನ್ನು ಬಳಸುವುದು.
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
ವಿಧಾನ B (ಸಂಭಾವ್ಯವಾಗಿ ನಿಧಾನ): ವಿಷಯವು ಕಾಲಮ್ ಗಾತ್ರವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು `auto` ಅಥವಾ `max-content` ಅನ್ನು ಬಳಸುವುದು.
grid-template-columns: repeat(auto-fill, minmax(auto, 300px));
ವಿಶ್ಲೇಷಣೆ:
- ವಿಧಾನ A ನಲ್ಲಿ, ಬ್ರೌಸರ್‌ನ ಕಾರ್ಯವು ಸರಳವಾಗಿದೆ. ಪ್ರತಿ ಐಟಂನ ಕನಿಷ್ಠ ಅಗಲ 250px ಎಂದು ಅದಕ್ಕೆ ತಿಳಿದಿದೆ. ಕಂಟೇನರ್‌ನ ಅಗಲದಲ್ಲಿ ಎಷ್ಟು ಐಟಂಗಳು ಹೊಂದಿಕೊಳ್ಳುತ್ತವೆ ಎಂಬುದನ್ನು ಅದು ತ್ವರಿತವಾಗಿ ಲೆಕ್ಕಾಚಾರ ಮಾಡಬಹುದು ಮತ್ತು ನಂತರ ಉಳಿದ ಸ್ಥಳವನ್ನು ಅವುಗಳ ನಡುವೆ ವಿತರಿಸಬಹುದು. ಇದು ವೇಗದ, ಬಾಹ್ಯ ಗಾತ್ರದ ವಿಧಾನವಾಗಿದ್ದು, ಅಲ್ಲಿ ಕಂಟೇನರ್ ನಿಯಂತ್ರಣದಲ್ಲಿರುತ್ತದೆ. ಕಾರ್ಯಕ್ಷಮತೆಯ ಪ್ರೊಫೈಲ್‌ನಲ್ಲಿನ ಲೇಔಟ್ ಕಾರ್ಯವು ತುಂಬಾ ಚಿಕ್ಕದಾಗಿರುತ್ತದೆ.
- ವಿಧಾನ B ನಲ್ಲಿ, ಬ್ರೌಸರ್‌ಗೆ ಹೆಚ್ಚು ಕಷ್ಟಕರವಾದ ಕೆಲಸವಿದೆ. `auto` ಕೀವರ್ಡ್ (ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಆಗಾಗ್ಗೆ `max-content` ಗೆ ಪರಿಹರಿಸಲ್ಪಡುತ್ತದೆ) ಎಂದರೆ ಒಂದೇ ಕಾಲಮ್‌ನ ಅಗಲವನ್ನು ನಿರ್ಧರಿಸಲು, ಬ್ರೌಸರ್ ಮೊದಲು 100 ಉತ್ಪನ್ನ ಕಾರ್ಡ್‌ಗಳಲ್ಲಿ ಪ್ರತಿಯೊಂದರ ವಿಷಯವನ್ನು ಅದರ `max-content` ಅಗಲವನ್ನು ಕಂಡುಹಿಡಿಯಲು ತಾತ್ವಿಕವಾಗಿ ರೆಂಡರ್ ಮಾಡಬೇಕು. ನಂತರ ಅದು ಈ ಮಾಪನವನ್ನು ತನ್ನ ಗ್ರಿಡ್-ಪರಿಹರಿಸುವ ಅಲ್ಗಾರಿದಮ್‌ನಲ್ಲಿ ಬಳಸುತ್ತದೆ. ಈ ಆಂತರಿಕ ಗಾತ್ರದ ವಿಧಾನಕ್ಕೆ ಅಂತಿಮ ಲೇಔಟ್ ಅನ್ನು ನಿರ್ಧರಿಸುವ ಮೊದಲು ಭಾರಿ ಪ್ರಮಾಣದ ಮುಂಗಡ ಮಾಪನ ಕಾರ್ಯದ ಅಗತ್ಯವಿದೆ. ಕಾರ್ಯಕ್ಷಮತೆಯ ಪ್ರೊಫೈಲ್‌ನಲ್ಲಿನ ಲೇಔಟ್ ಕಾರ್ಯವು ಗಮನಾರ್ಹವಾಗಿ ದೀರ್ಘವಾಗಿರುತ್ತದೆ, ಸಂಭಾವ್ಯವಾಗಿ ಒಂದು ಆರ್ಡರ್ ಆಫ್ ಮ್ಯಾಗ್ನಿಟ್ಯೂಡ್‌ನಷ್ಟು.
ಸನ್ನಿವೇಶ 2: ಆಳವಾಗಿ ನೆಸ್ಟೆಡ್ ಗ್ರಿಡ್‌ಗಳ ವೆಚ್ಚ
ಗ್ರಿಡ್‌ನೊಂದಿಗಿನ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳು ಸಂಯುಕ್ತವಾಗಬಹುದು. ಪೋಷಕ ಗ್ರಿಡ್ ವಿಷಯ-ಆಧಾರಿತ ಗಾತ್ರವನ್ನು ಬಳಸುವ ಮತ್ತು ಅದರ ಮಕ್ಕಳು ಸಹ ಸಂಕೀರ್ಣ ಗ್ರಿಡ್‌ಗಳಾಗಿರುವ ಲೇಔಟ್ ಅನ್ನು ಪರಿಗಣಿಸಿ.
ಉದಾಹರಣೆ:
ಮುಖ್ಯ ಪುಟದ ಲೇಔಟ್ ಎರಡು-ಕಾಲಮ್ ಗ್ರಿಡ್ ಆಗಿದೆ: `grid-template-columns: max-content 1fr;`. ಮೊದಲ ಕಾಲಮ್ ವಿವಿಧ ವಿಜೆಟ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಸೈಡ್‌ಬಾರ್ ಆಗಿದೆ. ಈ ವಿಜೆಟ್‌ಗಳಲ್ಲಿ ಒಂದು ಕ್ಯಾಲೆಂಡರ್, ಅದು ಸ್ವತಃ ಸಿಎಸ್‌ಎಸ್ ಗ್ರಿಡ್‌ನೊಂದಿಗೆ ನಿರ್ಮಿಸಲ್ಪಟ್ಟಿದೆ.
ವಿಶ್ಲೇಷಣೆ:
ಬ್ರೌಸರ್‌ನ ಲೇಔಟ್ ಇಂಜಿನ್ ಸವಾಲಿನ ಅವಲಂಬನೆ ಸರಪಳಿಯನ್ನು ಎದುರಿಸುತ್ತದೆ:
- ಮುಖ್ಯ ಪುಟದ `max-content` ಕಾಲಮ್ ಅನ್ನು ಪರಿಹರಿಸಲು, ಅದು ಸೈಡ್‌ಬಾರ್‌ನ `max-content` ಅಗಲವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಬೇಕು.
- ಸೈಡ್‌ಬಾರ್‌ನ ಅಗಲವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು, ಅದು ಕ್ಯಾಲೆಂಡರ್ ವಿಜೆಟ್ ಸೇರಿದಂತೆ ಅದರ ಎಲ್ಲಾ ಮಕ್ಕಳ ಅಗಲವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಬೇಕು.
- ಕ್ಯಾಲೆಂಡರ್ ವಿಜೆಟ್‌ನ ಅಗಲವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು, ಅದು ತನ್ನದೇ ಆದ ಆಂತರಿಕ ಗ್ರಿಡ್ ಲೇಔಟ್ ಅನ್ನು ಪರಿಹರಿಸಬೇಕು.
ಮಗುವಿನ ಲೇಔಟ್ ಸಂಪೂರ್ಣವಾಗಿ ಪರಿಹರಿಸಲ್ಪಡುವವರೆಗೆ ಪೋಷಕರ ಲೆಕ್ಕಾಚಾರವು ನಿರ್ಬಂಧಿಸಲ್ಪಡುತ್ತದೆ. ಈ ಆಳವಾದ ಜೋಡಣೆಯು ಆಶ್ಚರ್ಯಕರವಾಗಿ ದೀರ್ಘವಾದ ಲೇಔಟ್ ಸಮಯಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು. ಮಗುವಿನ ಗ್ರಿಡ್ ಸಹ ವಿಷಯ-ಆಧಾರಿತ ಗಾತ್ರವನ್ನು ಬಳಸಿದರೆ, ಸಮಸ್ಯೆ ಇನ್ನಷ್ಟು ಹದಗೆಡುತ್ತದೆ. ಅಂತಹ ಪುಟವನ್ನು ಪ್ರೊಫೈಲ್ ಮಾಡುವುದು ಆರಂಭಿಕ ರೆಂಡರ್ ಸಮಯದಲ್ಲಿ ಒಂದೇ, ಅತ್ಯಂತ ದೀರ್ಘವಾದ 'ಲೇಔಟ್' ಕಾರ್ಯವನ್ನು ಬಹಿರಂಗಪಡಿಸುವ ಸಾಧ್ಯತೆಯಿದೆ.
ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
ನಮ್ಮ ವಿಶ್ಲೇಷಣೆಯ ಆಧಾರದ ಮೇಲೆ, ನಾವು उच्च-ಕಾರ್ಯಕ್ಷಮತೆಯ ಗ್ರಿಡ್ ಲೇಔಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಹಲವಾರು ಕಾರ್ಯಸಾಧ್ಯವಾದ ತಂತ್ರಗಳನ್ನು ಪಡೆಯಬಹುದು.
1. ಆಂತರಿಕ ಗಾತ್ರಕ್ಕಿಂತ ಬಾಹ್ಯ ಗಾತ್ರಕ್ಕೆ ಆದ್ಯತೆ ನೀಡಿ
ಇದು ಗ್ರಿಡ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸುವರ್ಣ ನಿಯಮವಾಗಿದೆ. ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ, ಗ್ರಿಡ್ ಕಂಟೇನರ್ ತನ್ನ ಟ್ರ್ಯಾಕ್‌ಗಳ ಆಯಾಮಗಳನ್ನು `px`, `rem`, `%`, ಮತ್ತು `fr` ನಂತಹ ಯುನಿಟ್‌ಗಳನ್ನು ಬಳಸಿ ವ್ಯಾಖ್ಯಾನಿಸಲು ಬಿಡಿ. ಇದು ಬ್ರೌಸರ್‌ನ ಲೇಔಟ್ ಇಂಜಿನ್‌ಗೆ ಕೆಲಸ ಮಾಡಲು ಸ್ಪಷ್ಟ, ನಿರೀಕ್ಷಿತ ನಿರ್ಬಂಧಗಳ ಗುಂಪನ್ನು ನೀಡುತ್ತದೆ, ಇದರ ಪರಿಣಾಮವಾಗಿ ವೇಗದ ಲೆಕ್ಕಾಚಾರಗಳು ಉಂಟಾಗುತ್ತವೆ.
ಇದರ ಬದಲು (ಆಂತರಿಕ):
grid-template-columns: repeat(auto-fit, max-content);
ಇದಕ್ಕೆ ಆದ್ಯತೆ ನೀಡಿ (ಬಾಹ್ಯ):
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
2. ವಿಷಯ-ಆಧಾರಿತ ಗಾತ್ರದ ವ್ಯಾಪ್ತಿಯನ್ನು ನಿರ್ಬಂಧಿಸಿ
`min-content` ಮತ್ತು `max-content` ಗಾಗಿ ಮಾನ್ಯ ಬಳಕೆಯ ಸಂದರ್ಭಗಳಿವೆ, ಉದಾಹರಣೆಗೆ ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುಗಳು ಅಥವಾ ಫಾರ್ಮ್ ಫೀಲ್ಡ್‌ಗಳ ಪಕ್ಕದ ಲೇಬಲ್‌ಗಳಿಗಾಗಿ. ನೀವು ಅವುಗಳನ್ನು ಬಳಸಬೇಕಾದಾಗ, ಅವುಗಳ ಪ್ರಭಾವವನ್ನು ಸೀಮಿತಗೊಳಿಸಲು ಪ್ರಯತ್ನಿಸಿ:
- ಕೆಲವು ಟ್ರ್ಯಾಕ್‌ಗಳಿಗೆ ಅನ್ವಯಿಸಿ: ಅವುಗಳನ್ನು ಒಂದೇ ಕಾಲಮ್ ಅಥವಾ ಸಾಲಿನಲ್ಲಿ ಬಳಸಿ, ನೂರಾರು ಐಟಂಗಳ ಪುನರಾವರ್ತಿತ ಮಾದರಿಯಲ್ಲಿ ಅಲ್ಲ.
- ಪೋಷಕರನ್ನು ನಿರ್ಬಂಧಿಸಿ: ವಿಷಯ-ಆಧಾರಿತ ಗಾತ್ರವನ್ನು ಬಳಸುವ ಗ್ರಿಡ್ ಅನ್ನು `max-width` ಹೊಂದಿರುವ ಕಂಟೇನರ್‌ನೊಳಗೆ ಇರಿಸಿ. ಇದು ಲೇಔಟ್ ಇಂಜಿನ್‌ಗೆ ಒಂದು ಗಡಿಯನ್ನು ನೀಡುತ್ತದೆ, ಇದು ಕೆಲವೊಮ್ಮೆ ಲೆಕ್ಕಾಚಾರವನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
- `minmax()` ನೊಂದಿಗೆ ಸಂಯೋಜಿಸಿ: ವಿಷಯ-ಆಧಾರಿತ ಕೀವರ್ಡ್‌ನೊಂದಿಗೆ ಒಂದು ಸಂವೇದನಾಶೀಲ ಕನಿಷ್ಠ ಅಥವಾ ಗರಿಷ್ಠ ಮೌಲ್ಯವನ್ನು ಒದಗಿಸಿ, ಉದಾಹರಣೆಗೆ `minmax(200px, max-content)`. ಇದು ಬ್ರೌಸರ್‌ಗೆ ಅದರ ಲೆಕ್ಕಾಚಾರಗಳಲ್ಲಿ ಒಂದು ಮುನ್ನಡೆಯನ್ನು ನೀಡಬಹುದು.
3. `subgrid` ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ ಮತ್ತು ಬುದ್ಧಿವಂತಿಕೆಯಿಂದ ಬಳಸಿ
`subgrid` ಒಂದು ಶಕ್ತಿಯುತ ವೈಶಿಷ್ಟ್ಯವಾಗಿದ್ದು, ಇದು ನೆಸ್ಟೆಡ್ ಗ್ರಿಡ್‌ಗೆ ಅದರ ಪೋಷಕ ಗ್ರಿಡ್‌ನ ಟ್ರ್ಯಾಕ್ ವ್ಯಾಖ್ಯಾನವನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಇದು ಜೋಡಣೆಗಾಗಿ ಅದ್ಭುತವಾಗಿದೆ.
ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಣಾಮಗಳು: `subgrid` ಒಂದು ಎರಡು-ಅಂಚಿನ ಕತ್ತಿಯಾಗಿರಬಹುದು. ಒಂದೆಡೆ, ಇದು ಪೋಷಕ ಮತ್ತು ಮಗುವಿನ ಲೇಔಟ್ ಲೆಕ್ಕಾಚಾರಗಳ ನಡುವಿನ ಜೋಡಣೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ, ಇದು ಸೈದ್ಧಾಂತಿಕವಾಗಿ ಆರಂಭಿಕ, ಸಂಕೀರ್ಣ ಲೇಔಟ್ ಪರಿಹಾರವನ್ನು ನಿಧಾನಗೊಳಿಸಬಹುದು. ಮತ್ತೊಂದೆಡೆ, ಆರಂಭದಿಂದಲೇ ಐಟಂಗಳು ಸಂಪೂರ್ಣವಾಗಿ ಜೋಡಿಸಲ್ಪಟ್ಟಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಇತರ ವಿಧಾನಗಳೊಂದಿಗೆ ಹಸ್ತಚಾಲಿತವಾಗಿ ಜೋಡಣೆಯನ್ನು ಅನುಕರಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೆ ಸಂಭವಿಸಬಹುದಾದ ನಂತರದ ಲೇಔಟ್ ಶಿಫ್ಟ್‌ಗಳು ಮತ್ತು ರಿಫ್ಲೋಗಳನ್ನು ತಡೆಯಬಹುದು. ಉತ್ತಮ ಸಲಹೆಯೆಂದರೆ ಪ್ರೊಫೈಲ್ ಮಾಡುವುದು. ನೀವು ಸಂಕೀರ್ಣ ನೆಸ್ಟೆಡ್ ಲೇಔಟ್ ಹೊಂದಿದ್ದರೆ, ನಿಮ್ಮ ನಿರ್ದಿಷ್ಟ ಬಳಕೆಯ ಪ್ರಕರಣಕ್ಕೆ ಯಾವುದು ಉತ್ತಮ ಎಂದು ನೋಡಲು `subgrid` ನೊಂದಿಗೆ ಮತ್ತು ಇಲ್ಲದೆ ಅದರ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅಳೆಯಿರಿ.
4. ವರ್ಚುವಲೈಸೇಶನ್: ದೊಡ್ಡ ಡೇಟಾಸೆಟ್‌ಗಳಿಗೆ ಅಂತಿಮ ಪರಿಹಾರ
ನೀವು ನೂರಾರು ಅಥವಾ ಸಾವಿರಾರು ಐಟಂಗಳೊಂದಿಗೆ ಗ್ರಿಡ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತಿದ್ದರೆ (ಉದಾ., ಡೇಟಾ ಗ್ರಿಡ್, ಅನಂತ-ಸ್ಕ್ರೋಲಿಂಗ್ ಫೋಟೋ ಗ್ಯಾಲರಿ), ಯಾವುದೇ ಪ್ರಮಾಣದ ಸಿಎಸ್‌ಎಸ್ ಟ್ವೀಕಿಂಗ್ ಮೂಲಭೂತ ಸಮಸ್ಯೆಯನ್ನು ನಿವಾರಿಸುವುದಿಲ್ಲ: ಬ್ರೌಸರ್ ಇನ್ನೂ ಪ್ರತಿಯೊಂದು ಅಂಶಕ್ಕೂ ಲೇಔಟ್ ಅನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಬೇಕಾಗುತ್ತದೆ.
ಪರಿಹಾರವೆಂದರೆ ವರ್ಚುವಲೈಸೇಶನ್ (ಅಥವಾ 'ವಿಂಡೋಯಿಂಗ್'). ಇದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್-ಆಧಾರಿತ ತಂತ್ರವಾಗಿದ್ದು, ಇದರಲ್ಲಿ ನೀವು ವ್ಯೂಪೋರ್ಟ್‌ನಲ್ಲಿ ಪ್ರಸ್ತುತ ಗೋಚರಿಸುವ ಕೆಲವೇ DOM ಅಂಶಗಳನ್ನು ಮಾತ್ರ ರೆಂಡರ್ ಮಾಡುತ್ತೀರಿ. ಬಳಕೆದಾರರು ಸ್ಕ್ರಾಲ್ ಮಾಡಿದಂತೆ, ನೀವು ಈ DOM ನೋಡ್‌ಗಳನ್ನು ಮರುಬಳಕೆ ಮಾಡುತ್ತೀರಿ ಮತ್ತು ಅವುಗಳ ವಿಷಯವನ್ನು ಬದಲಾಯಿಸುತ್ತೀರಿ. ಇದು ನಿಮ್ಮ ಡೇಟಾಸೆಟ್ 100 ಅಥವಾ 100,000 ಐಟಂಗಳನ್ನು ಹೊಂದಿದ್ದರೂ, ಲೇಔಟ್ ಲೆಕ್ಕಾಚಾರದ ಸಮಯದಲ್ಲಿ ಬ್ರೌಸರ್ ನಿಭಾಯಿಸಬೇಕಾದ ಅಂಶಗಳ ಸಂಖ್ಯೆಯನ್ನು ಚಿಕ್ಕದಾಗಿ ಮತ್ತು ಸ್ಥಿರವಾಗಿರಿಸುತ್ತದೆ.
`react-window` ಮತ್ತು `tanstack-virtual` ನಂತಹ ಲೈಬ್ರರಿಗಳು ಈ ಮಾದರಿಯ ದೃಢವಾದ ಅನುಷ್ಠಾನಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ. ನಿಜವಾಗಿಯೂ ದೊಡ್ಡ-ಪ್ರಮಾಣದ ಗ್ರಿಡ್‌ಗಳಿಗೆ, ಇದು ನೀವು ಮಾಡಬಹುದಾದ ಅತ್ಯಂತ ಪರಿಣಾಮಕಾರಿ ಕಾರ್ಯಕ್ಷಮತೆಯ ಆಪ್ಟಿಮೈಸೇಶನ್ ಆಗಿದೆ.
ಕೇಸ್ ಸ್ಟಡಿ: ಉತ್ಪನ್ನ ಪಟ್ಟಿ ಗ್ರಿಡ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು
ಜಾಗತಿಕ ಇ-ಕಾಮರ್ಸ್ ವೆಬ್‌ಸೈಟ್‌ಗಾಗಿ ವಾಸ್ತವಿಕ ಆಪ್ಟಿಮೈಸೇಶನ್ ಸನ್ನಿವೇಶವನ್ನು ನೋಡೋಣ.
ಸಮಸ್ಯೆ: ಉತ್ಪನ್ನ ಪಟ್ಟಿ ಪುಟವು ನಿಧಾನವಾಗಿ ಭಾಸವಾಗುತ್ತದೆ. ಬ್ರೌಸರ್ ವಿಂಡೋವನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸಿದಾಗ ಅಥವಾ ಫಿಲ್ಟರ್‌ಗಳನ್ನು ಅನ್ವಯಿಸಿದಾಗ, ಉತ್ಪನ್ನಗಳು ತಮ್ಮ ಹೊಸ ಸ್ಥಾನಗಳಿಗೆ ರಿಫ್ಲೋ ಆಗುವ ಮೊದಲು ಗಮನಾರ್ಹವಾದ ವಿಳಂಬವಿದೆ. Interaction to Next Paint (INP) ಗಾಗಿ ಕೋರ್ ವೆಬ್ ವೈಟಲ್ಸ್ ಸ್ಕೋರ್ ಕಳಪೆಯಾಗಿದೆ.
ಆರಂಭಿಕ ಕೋಡ್ ("ಮೊದಲಿನ" ಸ್ಥಿತಿ):
ಗ್ರಿಡ್ ಅನ್ನು ಅತ್ಯಂತ ನಮ್ಯವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ, ಉತ್ಪನ್ನ ಕಾರ್ಡ್‌ಗಳಿಗೆ ಅವುಗಳ ವಿಷಯದ ಆಧಾರದ ಮೇಲೆ (ಉದಾ., ದೀರ್ಘ ಉತ್ಪನ್ನದ ಹೆಸರುಗಳು) ಕಾಲಮ್ ಅಗಲಗಳನ್ನು ನಿರ್ದೇಶಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, fit-content(320px));
gap: 1rem;
}
ಕಾರ್ಯಕ್ಷಮತೆ ವಿಶ್ಲೇಷಣೆ:
- ಬ್ರೌಸರ್ ವಿಂಡೋವನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸುವಾಗ ನಾವು ಕಾರ್ಯಕ್ಷಮತೆಯ ಪ್ರೊಫೈಲ್ ಅನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡುತ್ತೇವೆ.
- ಫ್ಲೇಮ್ ಚಾರ್ಟ್ ಮರುಗಾತ್ರಗೊಳಿಸುವ ಈವೆಂಟ್ ಫೈರ್ ಆದಾಗಲೆಲ್ಲಾ ಪುನರಾವರ್ತಿತ 'ಲೇಔಟ್' ಕಾರ್ಯವನ್ನು ತೋರಿಸುತ್ತದೆ, ಇದು ಸರಾಸರಿ ಸಾಧನದಲ್ಲಿ 80ms ಗಿಂತ ಹೆಚ್ಚು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ.
- `fit-content()` ಫಂಕ್ಷನ್ `min-content` ಮತ್ತು `max-content` ಲೆಕ್ಕಾಚಾರಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದೆ. ಪ್ರೊಫೈಲರ್ ಪ್ರತಿ ಮರುಗಾತ್ರಗೊಳಿಸುವಿಕೆಗಾಗಿ, ಬ್ರೌಸರ್ ಗ್ರಿಡ್ ರಚನೆಯನ್ನು ಮರುಲೆಕ್ಕಾಚಾರ ಮಾಡಲು ಎಲ್ಲಾ ಗೋಚರ ಉತ್ಪನ್ನ ಕಾರ್ಡ್‌ಗಳ ವಿಷಯವನ್ನು ತೀವ್ರವಾಗಿ ಮರು-ಅಳೆಯುತ್ತಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಇದು ವಿಳಂಬದ ಮೂಲವಾಗಿದೆ.
ಪರಿಹಾರ ("ನಂತರದ" ಸ್ಥಿತಿ):
ನಾವು ಆಂತರಿಕ, ವಿಷಯ-ಆಧಾರಿತ ಗಾತ್ರದ ಮಾದರಿಯಿಂದ ಬಾಹ್ಯ, ಕಂಟೇನರ್-ವ್ಯಾಖ್ಯಾನಿತ ಮಾದರಿಗೆ ಬದಲಾಯಿಸುತ್ತೇವೆ. ನಾವು ಕಾರ್ಡ್‌ಗಳಿಗೆ ಒಂದು ದೃಢವಾದ ಕನಿಷ್ಠ ಗಾತ್ರವನ್ನು ನಿಗದಿಪಡಿಸುತ್ತೇವೆ ಮತ್ತು ಲಭ್ಯವಿರುವ ಸ್ಥಳದ ಒಂದು ಭಾಗದವರೆಗೆ ಅವುಗಳನ್ನು ಫ್ಲೆಕ್ಸ್ ಮಾಡಲು ಬಿಡುತ್ತೇವೆ.
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
}
ಉತ್ಪನ್ನ ಕಾರ್ಡ್‌ನ ಸಿಎಸ್‌ಎಸ್ ಒಳಗೆ, ಈ ಹೊಸ, ಹೆಚ್ಚು ಕಟ್ಟುನಿಟ್ಟಾದ ಕಂಟೇನರ್‌ನೊಳಗೆ ಸಂಭಾವ್ಯವಾಗಿ ದೀರ್ಘವಾದ ವಿಷಯವನ್ನು ಸುಲಲಿತವಾಗಿ ನಿರ್ವಹಿಸಲು ನಾವು ನಿಯಮಗಳನ್ನು ಸೇರಿಸುತ್ತೇವೆ:
.product-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
ಫಲಿತಾಂಶ:
- ಮರುಗಾತ್ರಗೊಳಿಸುವಾಗ ನಾವು ಹೊಸ ಕಾರ್ಯಕ್ಷಮತೆಯ ಪ್ರೊಫೈಲ್ ಅನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡುತ್ತೇವೆ.
- ಫ್ಲೇಮ್ ಚಾರ್ಟ್ ಈಗ 'ಲೇಔಟ್' ಕಾರ್ಯವು ನಂಬಲಾಗದಷ್ಟು ಚಿಕ್ಕದಾಗಿದೆ, ಸ್ಥಿರವಾಗಿ 5ms ಗಿಂತ ಕಡಿಮೆ ಇರುವುದನ್ನು ತೋರಿಸುತ್ತದೆ.
- ಬ್ರೌಸರ್‌ಗೆ ಇನ್ನು ಮುಂದೆ ವಿಷಯವನ್ನು ಅಳೆಯುವ ಅಗತ್ಯವಿಲ್ಲ. ಇದು ಕಂಟೇನರ್‌ನ ಅಗಲ ಮತ್ತು `280px` ಕನಿಷ್ಠದ ಆಧಾರದ ಮೇಲೆ ಸರಳ ಗಣಿತದ ಲೆಕ್ಕಾಚಾರವನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ.
- ಬಳಕೆದಾರರ ಅನುಭವವು ರೂಪಾಂತರಗೊಂಡಿದೆ. ಮರುಗಾತ್ರಗೊಳಿಸುವಿಕೆಯು ಸುಗಮ ಮತ್ತು ತತ್‌ಕ್ಷಣವಾಗಿದೆ. ಫಿಲ್ಟರ್‌ಗಳನ್ನು ಅನ್ವಯಿಸುವುದು ವೇಗವಾಗಿ ಭಾಸವಾಗುತ್ತದೆ ಏಕೆಂದರೆ ಬ್ರೌಸರ್ ಹೊಸ ಲೇಔಟ್ ಅನ್ನು ಬಹುತೇಕ ತಕ್ಷಣವೇ ಗಣනය ಮಾಡಬಹುದು.
ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಪರಿಕರಗಳ ಬಗ್ಗೆ ಒಂದು ಟಿಪ್ಪಣಿ
ಈ ಮಾರ್ಗದರ್ಶಿಯು Chrome DevTools ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸಿದ್ದರೂ, ಬಳಕೆದಾರರು ವೈವಿಧ್ಯಮಯ ಬ್ರೌಸರ್ ಆದ್ಯತೆಗಳನ್ನು ಹೊಂದಿದ್ದಾರೆ ಎಂಬುದನ್ನು ನೆನಪಿಟ್ಟುಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ. ಫೈರ್‌ಫಾಕ್ಸ್‌ನ ಡೆವಲಪರ್ ಪರಿಕರಗಳು ಅತ್ಯುತ್ತಮವಾದ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಪ್ಯಾನೆಲ್ ಅನ್ನು ('ಪ್ರೊಫೈಲರ್' ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ) ಹೊಂದಿದ್ದು, ಅದು ಇದೇ ರೀತಿಯ ಫ್ಲೇಮ್ ಚಾರ್ಟ್‌ಗಳು ಮತ್ತು ವಿಶ್ಲೇಷಣಾ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಸಫಾರಿಯ ವೆಬ್ ಇನ್ಸ್‌ಪೆಕ್ಟರ್ ಸಹ ರೆಂಡರಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪ್ರೊಫೈಲ್ ಮಾಡಲು ಪ್ರಬಲವಾದ 'ಟೈಮ್‌ಲೈನ್ಸ್' ಟ್ಯಾಬ್ ಅನ್ನು ಒಳಗೊಂಡಿದೆ. ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ಸ್ಥಿರವಾದ, ಉತ್ತಮ-ಗುಣಮಟ್ಟದ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಯಾವಾಗಲೂ ಪ್ರಮುಖ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ನಿಮ್ಮ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ.
ತೀರ್ಮಾನ: ವಿನ್ಯಾಸದ ಮೂಲಕ ಕಾರ್ಯಕ್ಷಮತೆಯ ಗ್ರಿಡ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವುದು
ಸಿಎಸ್‌ಎಸ್ ಗ್ರಿಡ್ ಅಸಾಧಾರಣವಾಗಿ ಶಕ್ತಿಯುತ ಸಾಧನವಾಗಿದೆ, ಆದರೆ ಅದರ ಅತ್ಯಾಧುನಿಕ ವೈಶಿಷ್ಟ್ಯಗಳು ಗಣನಾತ್ಮಕ ವೆಚ್ಚದಿಂದ ಮುಕ್ತವಾಗಿಲ್ಲ. ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಸಾಧನಗಳು ಮತ್ತು ನೆಟ್‌ವರ್ಕ್ ಪರಿಸ್ಥಿತಿಗಳೊಂದಿಗೆ ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಅಭಿವೃದ್ಧಿಪಡಿಸುತ್ತಿರುವ ವೆಬ್ ವೃತ್ತಿಪರರಾಗಿ, ನಾವು ಅಭಿವೃದ್ಧಿ ಪ್ರಕ್ರಿಯೆಯ ಆರಂಭದಿಂದಲೇ ಕಾರ್ಯಕ್ಷಮತೆ-ಪ್ರಜ್ಞೆಯನ್ನು ಹೊಂದಿರಬೇಕು.
ಪ್ರಮುಖ ಅಂಶಗಳು ಸ್ಪಷ್ಟವಾಗಿವೆ:
- ಲೇಔಟ್ ಒಂದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಯಾಗಿದೆ: ರೆಂಡರಿಂಗ್‌ನ 'ಲೇಔಟ್' ಹಂತವು ದುಬಾರಿಯಾಗಿರಬಹುದು, ವಿಶೇಷವಾಗಿ ಸಿಎಸ್‌ಎಸ್ ಗ್ರಿಡ್‌ನಂತಹ ಸಂಕೀರ್ಣ, ನಿರ್ಬಂಧ-ಆಧಾರಿತ ವ್ಯವಸ್ಥೆಗಳೊಂದಿಗೆ.
- ಗಾತ್ರದ ತಂತ್ರವು ಮುಖ್ಯವಾಗಿದೆ: ಬಾಹ್ಯ, ಕಂಟೇನರ್-ವ್ಯಾಖ್ಯಾನಿತ ಗಾತ್ರ (`px`, `fr`, `%`) ಯಾವಾಗಲೂ ಆಂತರಿಕ, ವಿಷಯ-ಆಧಾರಿತ ಗಾತ್ರಕ್ಕಿಂತ (`min-content`, `max-content`, `auto`) ಹೆಚ್ಚು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಹೊಂದಿರುತ್ತದೆ.
- ಅಳೆಯಿರಿ, ಊಹಿಸಬೇಡಿ: ಬ್ರೌಸರ್ ಕಾರ್ಯಕ್ಷಮತೆ ಪ್ರೊಫೈಲರ್‌ಗಳು ಕೇವಲ ಡೀಬಗ್ ಮಾಡಲಿಕ್ಕಾಗಿ ಅಲ್ಲ. ನಿಮ್ಮ ಲೇಔಟ್ ಆಯ್ಕೆಗಳನ್ನು ವಿಶ್ಲೇಷಿಸಲು ಮತ್ತು ನಿಮ್ಮ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಳನ್ನು ಮೌಲ್ಯೀಕರಿಸಲು ಅವುಗಳನ್ನು ಪೂರ್ವಭಾವಿಯಾಗಿ ಬಳಸಿ.
- ಸಾಮಾನ್ಯ ಪ್ರಕರಣಕ್ಕಾಗಿ ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ: ದೊಡ್ಡ ಐಟಂಗಳ ಸಂಗ್ರಹಕ್ಕಾಗಿ, ಸಂಕೀರ್ಣ, ವಿಷಯ-ಅರಿವಿನ ವ್ಯಾಖ್ಯಾನಕ್ಕಿಂತ ಸರಳ, ಬಾಹ್ಯ ಗ್ರಿಡ್ ವ್ಯಾಖ್ಯಾನವು ಉತ್ತಮ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತದೆ.
ನಿಮ್ಮ ನಿಯಮಿತ ಕಾರ್ಯಪ್ರবাহದಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆ ಪ್ರೊಫೈಲಿಂಗ್ ಅನ್ನು ಸಂಯೋಜಿಸುವ ಮೂಲಕ, ನೀವು ಸಿಎಸ್‌ಎಸ್ ಗ್ರಿಡ್‌ನೊಂದಿಗೆ ಅತ್ಯಾಧುನಿಕ, ಸ್ಪಂದನಾಶೀಲ, ಮತ್ತು ದೃಢವಾದ ಲೇಔಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು, ಅವು ಕೇವಲ ದೃಷ್ಟಿಗೆ ಬೆರಗುಗೊಳಿಸುವುದಲ್ಲದೆ, ಎಲ್ಲೆಡೆಯ ಬಳಕೆದಾರರಿಗೆ ನಂಬಲಾಗದಷ್ಟು ವೇಗವಾಗಿ ಮತ್ತು ಪ್ರವೇಶಿಸಬಹುದಾಗಿದೆ ಎಂಬ ವಿಶ್ವಾಸದೊಂದಿಗೆ.