ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅನ್ಲಾಕ್ ಮಾಡುವುದು: ಸಿಎಸ್ಎಸ್ ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜ್ ಕ್ಯಾಲ್ಕುಲೇಶನ್ ಕ್ಯಾಶ್‌ನ ಆಳವಾದ ನೋಟ

ಜಾಗತಿಕ ಡಿಜಿಟಲ್ ಆರ್ಥಿಕತೆಯಲ್ಲಿ, ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆ ಒಂದು ಐಷಾರಾಮಿ ವಿಷಯವಲ್ಲ; ಅದೊಂದು ಮೂಲಭೂತ ಅವಶ್ಯಕತೆ. ಪ್ರಪಂಚದ ಮೂಲೆ ಮೂಲೆಯಲ್ಲಿರುವ ಬಳಕೆದಾರರು ವೇಗವಾದ, ಸುಗಮವಾದ ಮತ್ತು ಸ್ಥಿರವಾದ ವೆಬ್ ಅನುಭವಗಳನ್ನು ನಿರೀಕ್ಷಿಸುತ್ತಾರೆ. ನಿಧಾನವಾಗಿ ಲೋಡ್ ಆಗುವ ಪುಟ ಅಥವಾ ಅಲುಗಾಡುವ ಲೇಔಟ್ ಶಿಫ್ಟ್, ಒಬ್ಬ ಹೊಸ ಗ್ರಾಹಕ ಮತ್ತು ಕಳೆದುಹೋದ ಅವಕಾಶದ ನಡುವಿನ ವ್ಯತ್ಯಾಸವನ್ನು ಉಂಟುಮಾಡಬಹುದು. ಡೆವಲಪರ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ನೆಟ್‌ವರ್ಕ್ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಳು ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಎಕ್ಸಿಕ್ಯೂಶನ್‌ ಮೇಲೆ ಗಮನಹರಿಸುತ್ತಾರೆ, ಆದರೆ ಬ್ರೌಸರ್‌ನ ರೆಂಡರಿಂಗ್ ಎಂಜಿನ್‌ನ ಆಳದಲ್ಲಿ ಒಂದು ಶಕ್ತಿಯುತವಾದ ಮತ್ತು ಹೆಚ್ಚಾಗಿ ಕಡೆಗಣಿಸಲ್ಪಡುವ ಆಪ್ಟಿಮೈಸೇಶನ್ ನಡೆಯುತ್ತದೆ: ಅದೇ ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜ್ ಕ್ಯಾಲ್ಕುಲೇಶನ್ ಕ್ಯಾಶ್ (Intrinsic Size Calculation Cache).

ಈ ಆಂತರಿಕ ಕಾರ್ಯವಿಧಾನವು ಕಾರ್ಯಕ್ಷಮತೆಯ ಅನ್ವೇಷಣೆಯಲ್ಲಿ ಒಬ್ಬ ಮೌನ ನಾಯಕನಾಗಿದ್ದು, ಬ್ರೌಸರ್ ಒಂದು ಪುಟವನ್ನು ಎಷ್ಟು ವೇಗವಾಗಿ ಮತ್ತು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ರೆಂಡರ್ ಮಾಡುತ್ತದೆ ಎಂಬುದರಲ್ಲಿ ನಿರ್ಣಾಯಕ ಪಾತ್ರವನ್ನು ವಹಿಸುತ್ತದೆ. ಇದು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು, ಫ್ರಂಟ್-ಎಂಡ್ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಬ್ರೌಸರ್‌ನ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳಿಗೆ ಹೊಂದುವಂತಹ CSS ಮತ್ತು HTML ಬರೆಯಲು ಅಧಿಕಾರ ನೀಡುತ್ತದೆ. ಇದು ಕೋರ್ ವೆಬ್ ವೈಟಲ್ಸ್ (CWV) ನಂತಹ ಪ್ರಮುಖ ಮೆಟ್ರಿಕ್ಸ್‌ಗಳಲ್ಲಿ ಗಮನಾರ್ಹ ಸುಧಾರಣೆಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ. ಈ ಲೇಖನವು ಈ ಕ್ಯಾಶಿಂಗ್ ಕಾರ್ಯವಿಧಾನದ ಬಗ್ಗೆ ಆಳವಾದ ನೋಟವನ್ನು ನೀಡುತ್ತದೆ, ಅದು ಏನೆಂದು, ಅದು ಏಕೆ ಮುಖ್ಯವೆಂದು ಮತ್ತು ಅದರ ಸಂಪೂರ್ಣ ಸಾಮರ್ಥ್ಯವನ್ನು ಬಳಸಿಕೊಳ್ಳುವ ಕೋಡ್ ಅನ್ನು ನೀವು ಹೇಗೆ ಬರೆಯಬಹುದು ಎಂಬುದನ್ನು ವಿವರಿಸುತ್ತದೆ.

ಬ್ರೌಸರ್ ರೆಂಡರಿಂಗ್ ಪೈಪ್‌ಲೈನ್ ಕುರಿತು ಒಂದು ಪ್ರೈಮರ್

ಕ್ಯಾಶ್ ಅನ್ನು ನಾವು ಮೆಚ್ಚುವ ಮೊದಲು, ಬ್ರೌಸರ್ ಕೋಡ್ ಅನ್ನು ಪಿಕ್ಸೆಲ್‌ಗಳಾಗಿ ಹೇಗೆ ಪರಿವರ್ತಿಸುತ್ತದೆ ಎಂಬುದರ ಬಗ್ಗೆ ನಮಗೆ ಮೂಲಭೂತ ತಿಳುವಳಿಕೆ ಬೇಕು. ಈ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಕ್ರಿಟಿಕಲ್ ರೆಂಡರಿಂಗ್ ಪಾಥ್ (Critical Rendering Path) ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ, ಇದರಲ್ಲಿ ಹಲವಾರು ಪ್ರಮುಖ ಹಂತಗಳಿವೆ. ಬ್ರೌಸರ್ ಎಂಜಿನ್‌ಗಳ (ಬ್ಲಿಂಕ್, ಗೆಕ್ಕೊ, ಮತ್ತು ವೆಬ್‌ಕಿಟ್) ನಡುವೆ ನಿಖರವಾದ ಪರಿಭಾಷೆ ಬದಲಾಗಬಹುದಾದರೂ, ಸಾಮಾನ್ಯ ಹರಿವು ಒಂದೇ ರೀತಿ ಇರುತ್ತದೆ:

• DOM (ಡಾಕ್ಯುಮೆಂಟ್ ಆಬ್ಜೆಕ್ಟ್ ಮಾಡೆಲ್) ನಿರ್ಮಾಣ: ಬ್ರೌಸರ್ HTML ಅನ್ನು ಪಾರ್ಸ್ ಮಾಡಿ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಪ್ರತಿನಿಧಿಸುವ ನೋಡ್‌ಗಳ ಟ್ರೀ-ರೀತಿಯ ರಚನೆಯಾಗಿ ಪರಿವರ್ತಿಸುತ್ತದೆ.
• CSSOM (ಸಿಎಸ್ಎಸ್ ಆಬ್ಜೆಕ್ಟ್ ಮಾಡೆಲ್) ನಿರ್ಮಾಣ: ಬ್ರೌಸರ್ ಬಾಹ್ಯ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳು ಮತ್ತು ಇನ್‌ಲೈನ್ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಒಳಗೊಂಡಂತೆ CSS ಅನ್ನು ಪಾರ್ಸ್ ಮಾಡಿ ಸ್ಟೈಲ್‌ಗಳ ಟ್ರೀ ಆಗಿ ಪರಿವರ್ತಿಸುತ್ತದೆ.
• ರೆಂಡರ್ ಟ್ರೀ ರಚನೆ: DOM ಮತ್ತು CSSOM ಅನ್ನು ಸಂಯೋಜಿಸಿ ರೆಂಡರ್ ಟ್ರೀಯನ್ನು ರಚಿಸಲಾಗುತ್ತದೆ. ಈ ಟ್ರೀ ಪುಟದಲ್ಲಿ ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಪ್ರದರ್ಶಿಸಲಾಗುವ ನೋಡ್‌ಗಳನ್ನು ಮಾತ್ರ ಹೊಂದಿರುತ್ತದೆ (ಉದಾಹರಣೆಗೆ, `display: none` ಇರುವ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಬಿಟ್ಟುಬಿಡಲಾಗುತ್ತದೆ).
• ಲೇಔಟ್ (ಅಥವಾ ರಿಫ್ಲೋ): ಇದು ನಮ್ಮ ವಿಷಯಕ್ಕೆ ನಿರ್ಣಾಯಕ ಹಂತವಾಗಿದೆ. ಬ್ರೌಸರ್ ರೆಂಡರ್ ಟ್ರೀಯಲ್ಲಿನ ಪ್ರತಿಯೊಂದು ನೋಡ್‌ನ ನಿಖರವಾದ ಗಾತ್ರ ಮತ್ತು ಸ್ಥಾನವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ. ಇದು ಪ್ರತಿಯೊಂದು ಎಲಿಮೆಂಟ್‌ನ ಜ್ಯಾಮಿತಿಯನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ - ಅದು ಎಲ್ಲಿ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ, ಎಷ್ಟು ಅಗಲವಿದೆ, ಎಷ್ಟು ಎತ್ತರವಿದೆ ಎಂದು. ಇದು ಗಣಕೀಯವಾಗಿ ತೀವ್ರವಾದ ಪ್ರಕ್ರಿಯೆಯಾಗಿದೆ, ಏಕೆಂದರೆ ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರವು ಅದರ ಪೋಷಕ, ಅದರ ಮಕ್ಕಳು ಮತ್ತು ಅದರ ಸಹೋದರರಿಂದ ಪ್ರಭಾವಿತವಾಗಬಹುದು.
• ಪೇಂಟ್: ಬ್ರೌಸರ್ ಲೆಕ್ಕಾಚಾರ ಮಾಡಿದ ಜ್ಯಾಮಿತಿ ಮತ್ತು ಶೈಲಿಗಳ ಆಧಾರದ ಮೇಲೆ ಪ್ರತಿಯೊಂದು ಎಲಿಮೆಂಟ್‌ಗೆ ಪಿಕ್ಸೆಲ್‌ಗಳನ್ನು ತುಂಬುತ್ತದೆ - ಬಣ್ಣಗಳು, ಬಾರ್ಡರ್‌ಗಳು, ನೆರಳುಗಳು, ಇತ್ಯಾದಿ. ಇದು ಡ್ರಾ ಕಾಲ್‌ಗಳ ಪಟ್ಟಿಯನ್ನು ರಚಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ.
• ಕಾಂಪೊಸಿಟಿಂಗ್: ಬ್ರೌಸರ್ ಅಂತಿಮ ಚಿತ್ರವನ್ನು ರಚಿಸಲು ವಿವಿಧ ಪೇಂಟ್ ಮಾಡಿದ ಲೇಯರ್‌ಗಳನ್ನು ಸರಿಯಾದ ಕ್ರಮದಲ್ಲಿ ಪರದೆಯ ಮೇಲೆ ಸೆಳೆಯುತ್ತದೆ.

ಲೇಔಟ್ (Layout) ಹಂತವು ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಒಂದು ಕುಖ್ಯಾತ ಅಡಚಣೆಯಾಗಿದೆ. ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ಜ್ಯಾಮಿತಿಯಲ್ಲಿನ ಒಂದು ಸಣ್ಣ ಬದಲಾವಣೆಯು ಸರಣಿ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಪ್ರಚೋದಿಸಬಹುದು, ಇದರಿಂದಾಗಿ ಬ್ರೌಸರ್ ಪುಟದ ದೊಡ್ಡ ಭಾಗಕ್ಕೆ ಅಥವಾ ಸಂಪೂರ್ಣ ಡಾಕ್ಯುಮೆಂಟ್‌ಗೆ ಲೇಔಟ್ ಅನ್ನು ಮರುಲೆಕ್ಕಾಚಾರ ಮಾಡಬೇಕಾಗುತ್ತದೆ. ಇಲ್ಲಿಯೇ ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಅತ್ಯಂತ ಮುಖ್ಯವಾಗುತ್ತದೆ.

ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜ್ ಎಂದರೇನು? ಎಲಿಮೆಂಟ್‌ನ ನೈಸರ್ಗಿಕ ಆಯಾಮಗಳನ್ನು ಸ್ಪಷ್ಟಪಡಿಸುವುದು

CSS ಜಗತ್ತಿನಲ್ಲಿ, ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರವನ್ನು ಎರಡು ಪ್ರಾಥಮಿಕ ವಿಧಾನಗಳಲ್ಲಿ ನಿರ್ಧರಿಸಬಹುದು: ಎಕ್ಸ್‌ಟ್ರಿನ್ಸಿಕ್ (extrinsic) ಅಥವಾ ಇಂಟ್ರಿನ್ಸಿಕ್ (intrinsic).

ಎಕ್ಸ್‌ಟ್ರಿನ್ಸಿಕ್ ಸೈಜಿಂಗ್

ನೀವು, ಅಂದರೆ ಡೆವಲಪರ್, CSS ಬಳಸಿ ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರವನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಿದಾಗ ಇದನ್ನು ಎಕ್ಸ್‌ಟ್ರಿನ್ಸಿಕ್ ಸೈಜಿಂಗ್ ಎನ್ನುತ್ತಾರೆ. ಗಾತ್ರವನ್ನು ಅದರ ಸಂದರ್ಭ ಅಥವಾ ನೇರ ಶೈಲಿಗಳಿಂದ ಹೊರಗಿನಿಂದ ಹೇರಲಾಗುತ್ತದೆ.

ಉದಾಹರಣೆಗಳು:

• div { width: 500px; height: 250px; } - ಒಂದು ನಿಗದಿತ ಗಾತ್ರ.
• div { width: 100%; } - ಗಾತ್ರವನ್ನು ಅದರ ಪೋಷಕ ಕಂಟೇನರ್‌ನ ಅಗಲದಿಂದ ನಿರ್ಧರಿಸಲಾಗುತ್ತದೆ.
• div { width: 50vw; } - ಗಾತ್ರವನ್ನು ವ್ಯೂಪೋರ್ಟ್‌ನ ಅಗಲದಿಂದ ನಿರ್ಧರಿಸಲಾಗುತ್ತದೆ.

ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜಿಂಗ್

ಇದು ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ನೈಸರ್ಗಿಕ, ಕಂಟೆಂಟ್-ಆಧಾರಿತ ಗಾತ್ರವಾಗಿದೆ. ಯಾವುದೇ ಬಾಹ್ಯ ನಿರ್ಬಂಧಗಳನ್ನು ಅನ್ವಯಿಸದಿದ್ದರೆ ಎಲಿಮೆಂಟ್ ತೆಗೆದುಕೊಳ್ಳುವ ಗಾತ್ರ ಇದಾಗಿದೆ. ಗಾತ್ರವು ಒಳಗಿನಿಂದ ಬರುತ್ತದೆ.

ಉದಾಹರಣೆಗಳು:

• ಒಂದು <img> ಎಲಿಮೆಂಟ್‌ನ ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜ್, ಇಮೇಜ್ ಫೈಲ್‌ನ ನಿಜವಾದ ಅಗಲ ಮತ್ತು ಎತ್ತರವಾಗಿದೆ (ಉದಾ., 1200x800 ಪಿಕ್ಸೆಲ್ ಫೋಟೋಗ್ರಾಫ್).
• ಒಂದು <span>Hello World</span> ಎಲಿಮೆಂಟ್‌ನ ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜ್, ಅದರ ಪಠ್ಯ ವಿಷಯ, `font-size`, `font-family`, `letter-spacing`, ಮತ್ತು ಇತರ ಟೈಪೋಗ್ರಾಫಿಕ್ ಗುಣಲಕ್ಷಣಗಳಿಂದ ನಿರ್ಧರಿಸಲ್ಪಡುತ್ತದೆ.
• ಒಂದು <video> ಎಲಿಮೆಂಟ್‌ನ ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜ್, ವೀಡಿಯೊ ಟ್ರ್ಯಾಕ್‌ನ ಆಯಾಮವಾಗಿದೆ.
• ಒಂದು ಬಟನ್‌ನ ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜ್ ಅದರ ಪಠ್ಯ ಲೇಬಲ್, ಪ್ಯಾಡಿಂಗ್, ಮತ್ತು ಬಾರ್ಡರ್‌ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುತ್ತದೆ.

ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜ್ ಅನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುವುದು ಆಶ್ಚರ್ಯಕರವಾಗಿ ದುಬಾರಿಯಾಗಬಹುದು. ಒಂದು ಚಿತ್ರಕ್ಕಾಗಿ, ಬ್ರೌಸರ್ ಅದರ ಮೆಟಾಡೇಟಾವನ್ನು ಓದಲು ಫೈಲ್‌ನ ಒಂದು ಭಾಗವನ್ನು ಡಿಕೋಡ್ ಮಾಡಬೇಕಾಗಬಹುದು. ಪಠ್ಯಕ್ಕಾಗಿ, ಇದು ಫಾಂಟ್ ಮೆಟ್ರಿಕ್ಸ್ ಮತ್ತು ಅಕ್ಷರಗಳ ಆಕಾರಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಸಂಕೀರ್ಣ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. ಬ್ರೌಸರ್ ಲೇಔಟ್ ಪಾಸ್ ನಿರ್ವಹಿಸುವಾಗ, ಅದರ ಪೋಷಕವನ್ನು ಸರಿಯಾಗಿ ಗಾತ್ರಗೊಳಿಸಲು ಅಥವಾ ಅದರ ಸಹೋದರರನ್ನು ಸ್ಥಾನೀಕರಿಸಲು ಅದಕ್ಕೆ ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜ್ ತಿಳಿಯಬೇಕಾಗುತ್ತದೆ. ಪ್ರತಿಯೊಂದು ಲೇಔಟ್ ಬದಲಾವಣೆಯಲ್ಲಿ ಪ್ರತಿಯೊಂದು ಎಲಿಮೆಂಟ್‌ಗೆ ಇದನ್ನು ಪದೇ ಪದೇ ಮಾಡುವುದು ನಂಬಲಾಗದಷ್ಟು ನಿಧಾನವಾಗಿರುತ್ತದೆ.

ನಮ್ಮ ಕಥೆಯ ನಾಯಕ: ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜ್ ಕ್ಯಾಲ್ಕುಲೇಶನ್ ಕ್ಯಾಶ್

ನಿರಂತರ ಮರುಲೆಕ್ಕಾಚಾರದ ಕಾರ್ಯಕ್ಷಮತೆಯ ದಂಡವನ್ನು ತಪ್ಪಿಸಲು, ಬ್ರೌಸರ್ ಎಂಜಿನ್‌ಗಳು ಒಂದು ಚತುರ ಆಪ್ಟಿಮೈಸೇಶನ್ ಅನ್ನು ಬಳಸುತ್ತವೆ: ಅದೇ ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜ್ ಕ್ಯಾಲ್ಕುಲೇಶನ್ ಕ್ಯಾಶ್. ಇದು ಸರಳವಾದರೂ ಶಕ್ತಿಯುತವಾದ ಪರಿಕಲ್ಪನೆ:

1. ಒಮ್ಮೆ ಲೆಕ್ಕ ಹಾಕಿ: ಬ್ರೌಸರ್‌ಗೆ ಮೊದಲ ಬಾರಿಗೆ ಎಲಿಮೆಂಟ್‌ನ ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜ್ ಅನ್ನು ನಿರ್ಧರಿಸಬೇಕಾದಾಗ, ಅದು ಸಂಪೂರ್ಣ, ಸಂಭಾವ್ಯವಾಗಿ ದುಬಾರಿಯಾದ ಲೆಕ್ಕಾಚಾರವನ್ನು ಮಾಡುತ್ತದೆ.
2. ಫಲಿತಾಂಶವನ್ನು ಸಂಗ್ರಹಿಸಿ: ನಂತರ ಬ್ರೌಸರ್ ಈ ಲೆಕ್ಕಾಚಾರ ಮಾಡಿದ ಗಾತ್ರವನ್ನು ಆಂತರಿಕ ಕ್ಯಾಶ್‌ನಲ್ಲಿ, ಆ ಎಲಿಮೆಂಟ್‌ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಸಂಗ್ರಹಿಸುತ್ತದೆ.
3. ಆಗಾಗ್ಗೆ ಮರುಬಳಸಿ: ನಂತರದ ಲೇಔಟ್ ಪಾಸ್‌ಗಳಲ್ಲಿ, ಬ್ರೌಸರ್‌ಗೆ ಅದೇ ಎಲಿಮೆಂಟ್‌ನ ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜ್ ಮತ್ತೆ ಬೇಕಾದರೆ, ಅದು ಮರುಲೆಕ್ಕಾಚಾರ ಮಾಡುವುದಿಲ್ಲ. ಅದು ಸರಳವಾಗಿ ಕ್ಯಾಶ್‌ನಿಂದ ಮೌಲ್ಯವನ್ನು ಹಿಂಪಡೆಯುತ್ತದೆ. ಇದು ಅನೇಕ ಪಟ್ಟು ವೇಗವಾಗಿರುತ್ತದೆ.

ಈ ಕ್ಯಾಶ್ ಒಂದು ನಿರ್ಣಾಯಕ ಆಪ್ಟಿಮೈಸೇಶನ್ ಆಗಿದ್ದು, ಇದು ಆಧುನಿಕ, ಡೈನಾಮಿಕ್ ವೆಬ್ ಪುಟಗಳನ್ನು ಕಾರ್ಯಸಾಧ್ಯವಾಗಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಯಾವುದೇ ಕ್ಯಾಶ್‌ನಂತೆ, ಇದಕ್ಕೂ ಒಂದು ಜೀವಿತಾವಧಿ ಇರುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ಅಮಾನ್ಯಗೊಳಿಸಬಹುದು. ಕ್ಯಾಶ್ ಮಾಡಿದ ಮೌಲ್ಯವು ಇನ್ನು ಮುಂದೆ ಮಾನ್ಯವಾಗಿಲ್ಲದಿದ್ದಾಗ ಬ್ರೌಸರ್‌ಗೆ ತಿಳಿಯುವಷ್ಟು ಬುದ್ಧಿವಂತಿಕೆ ಇರುತ್ತದೆ.

ಕ್ಯಾಶ್ ಅಮಾನ್ಯಗೊಳಿಸುವಿಕೆಯನ್ನು ಯಾವುದು ಪ್ರಚೋದಿಸುತ್ತದೆ?

ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ನೈಸರ್ಗಿಕ ಆಯಾಮಗಳ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದಾದ ಯಾವುದೇ ಬದಲಾವಣೆ ಸಂಭವಿಸಿದಾಗ ಬ್ರೌಸರ್ ಆ ಎಲಿಮೆಂಟ್‌ನ ಕ್ಯಾಶ್ ಮಾಡಿದ ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜ್ ಅನ್ನು ಅಮಾನ್ಯಗೊಳಿಸಬೇಕು. ಸಾಮಾನ್ಯ ಪ್ರಚೋದಕಗಳು ಹೀಗಿವೆ:

• ಕಂಟೆಂಟ್ ಬದಲಾವಣೆಗಳು: <div> ಒಳಗಿನ ಪಠ್ಯವನ್ನು ಮಾರ್ಪಡಿಸುವುದು, <img> ನ src ಗುಣಲಕ್ಷಣವನ್ನು ಬದಲಾಯಿಸುವುದು, ಅಥವಾ ಕಂಟೇನರ್‌ಗೆ ಮಕ್ಕಳನ್ನು ಸೇರಿಸುವುದು ಕ್ಯಾಶ್ ಅನ್ನು ಅಮಾನ್ಯಗೊಳಿಸುತ್ತದೆ.
• CSS ಪ್ರಾಪರ್ಟಿ ಬದಲಾವಣೆಗಳು: ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜ್ ಮೇಲೆ ನೇರವಾಗಿ ಪ್ರಭಾವ ಬೀರುವ CSS ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬದಲಾಯಿಸುವುದರಿಂದ ಮರುಲೆಕ್ಕಾಚಾರಕ್ಕೆ ಒತ್ತಾಯಿಸಲಾಗುತ್ತದೆ. ಪಠ್ಯ ಎಲಿಮೆಂಟ್‌ಗೆ, ಇದು font-size, font-weight, letter-spacing, ಅಥವಾ white-space ಆಗಿರಬಹುದು.
• ಗುಣಲಕ್ಷಣ ಬದಲಾವಣೆಗಳು: ಇನ್‌ಪುಟ್‌ನ value ಅಥವಾ <textarea> ನ cols ಮತ್ತು rows ನಂತಹ ಕಂಟೆಂಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬದಲಾಯಿಸುವುದು.

ಕ್ಯಾಶ್ ಅಮಾನ್ಯಗೊಂಡಾಗ, ಮುಂದಿನ ಲೇಔಟ್ ಪಾಸ್ ಸಮಯದಲ್ಲಿ ಬ್ರೌಸರ್ ದುಬಾರಿ ಲೆಕ್ಕಾಚಾರವನ್ನು ಮತ್ತೆ ಮಾಡಲು ಬಲವಂತಪಡಿಸುತ್ತದೆ. ಆಗಾಗ್ಗೆ ಅಮಾನ್ಯಗೊಳಿಸುವಿಕೆಗಳು ಕ್ಯಾಶ್‌ನ ಪ್ರಯೋಜನಗಳನ್ನು ಇಲ್ಲವಾಗಿಸಬಹುದು ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು.

ಪ್ರಾಯೋಗಿಕ ಪರಿಣಾಮಗಳು ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಲಾಭಗಳು

ಈ ಕ್ಯಾಶಿಂಗ್ ಕಾರ್ಯವಿಧಾನವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಕೇವಲ ಶೈಕ್ಷಣಿಕ ವ್ಯಾಯಾಮವಲ್ಲ. ಇದು ಬಳಕೆದಾರರು ಮತ್ತು ಸರ್ಚ್ ಇಂಜಿನ್‌ಗಳಿಗೆ ಹೆಚ್ಚು ಮುಖ್ಯವಾದ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೆಟ್ರಿಕ್ಸ್‌ಗಳ ಮೇಲೆ ನೇರ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ.

ಲೇಔಟ್ ಥ್ರಾಶಿಂಗ್ ಕಡಿಮೆ ಮಾಡುವುದು

ಲೇಔಟ್ ಥ್ರಾಶಿಂಗ್ (Layout thrashing) ಒಂದು ಗಂಭೀರವಾದ ಕಾರ್ಯಕ್ಷಮತೆಯ ಆಂಟಿ-ಪ್ಯಾಟರ್ನ್ ಆಗಿದೆ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ಜ್ಯಾಮಿತಿಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಪದೇ ಪದೇ ಮತ್ತು ಸಿಂಕ್ರೋನಸ್ ಆಗಿ ಓದಿದಾಗ ಮತ್ತು ಬರೆದಾಗ ಇದು ಸಂಭವಿಸುತ್ತದೆ. ಈ ಸನ್ನಿವೇಶವನ್ನು ಪರಿಗಣಿಸಿ:

            // BAD: Causes Layout Thrashing
function resizeElements(elements) {
  for (let i = 0; i < elements.length; i++) {
    // READ: This forces the browser to perform a layout to get the accurate width.
    const currentWidth = elements[i].offsetWidth;

    // WRITE: This invalidates the layout, because the width is changing.
    elements[i].style.width = (currentWidth / 2) + 'px';
  }
}
            

              
                Copy
              
            
          

ಈ ಲೂಪ್‌ನಲ್ಲಿ, ಬ್ರೌಸರ್ ಒಂದು ನೋವಿನ ಚಕ್ರದಲ್ಲಿ ಸಿಲುಕಿಕೊಳ್ಳುತ್ತದೆ: ಓದು (ಲೇಔಟ್ ಪ್ರಚೋದಿಸು) -> ಬರೆ (ಲೇಔಟ್ ಅಮಾನ್ಯಗೊಳಿಸು) -> ಓದು (ಲೇಔಟ್ ಪ್ರಚೋದಿಸು) -> ಬರೆ (ಲೇಔಟ್ ಅಮಾನ್ಯಗೊಳಿಸು). ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜ್ ಕ್ಯಾಶ್ ಕೆಲವೊಮ್ಮೆ ಓದುವ ಭಾಗಕ್ಕೆ ತ್ವರಿತ ಉತ್ತರವನ್ನು ನೀಡುವ ಮೂಲಕ ಸಹಾಯ ಮಾಡಬಹುದು, ಆದರೆ ನಿರಂತರ ಅಮಾನ್ಯಗೊಳಿಸುವಿಕೆಯು ಲೇಔಟ್ ಎಂಜಿನ್ ಅನ್ನು ಅನಗತ್ಯ ಕೆಲಸ ಮಾಡಲು ಒತ್ತಾಯಿಸುತ್ತದೆ.

ಕೋರ್ ವೆಬ್ ವೈಟಲ್ಸ್ (CWV) ಸುಧಾರಿಸುವುದು

ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜ್ ಪರಿಕಲ್ಪನೆಯು ಗೂಗಲ್‌ನ ಕೋರ್ ವೆಬ್ ವೈಟಲ್ಸ್‌ನೊಂದಿಗೆ ಆಳವಾಗಿ ಸಂಪರ್ಕ ಹೊಂದಿದೆ, ಇದು ನೈಜ-ಪ್ರಪಂಚದ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಅಳೆಯುವ ಮೆಟ್ರಿಕ್ಸ್‌ಗಳ ಒಂದು ಸೆಟ್ ಆಗಿದೆ.

• ಕ್ಯುಮುಲೇಟಿವ್ ಲೇಔಟ್ ಶಿಫ್ಟ್ (CLS): ಇದು ಅತ್ಯಂತ ನೇರವಾದ ಸಂಪರ್ಕ. CLS ದೃಶ್ಯ ಸ್ಥಿರತೆಯನ್ನು ಅಳೆಯುತ್ತದೆ. ಬ್ರೌಸರ್‌ಗೆ ಒಂದು ಎಲಿಮೆಂಟ್ ರೆಂಡರ್ ಆಗುವ ಮೊದಲು ಅದರ ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜ್ ತಿಳಿಯದಿದ್ದಾಗ ಹೆಚ್ಚಿನ CLS ಸ್ಕೋರ್ ಸಂಭವಿಸುತ್ತದೆ. ಆಯಾಮಗಳಿಲ್ಲದ ಚಿತ್ರ ಇದಕ್ಕೆ ಒಂದು ಶ್ರೇಷ್ಠ ಉದಾಹರಣೆ. ಬ್ರೌಸರ್ ಅದಕ್ಕೆ ಶೂನ್ಯ ಜಾಗವನ್ನು ಕಾಯ್ದಿರಿಸುತ್ತದೆ. ಇಮೇಜ್ ಫೈಲ್ ಅಂತಿಮವಾಗಿ ಡೌನ್‌ಲೋಡ್ ಆದಾಗ ಮತ್ತು ಬ್ರೌಸರ್ ಅದರ ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜ್ ಅನ್ನು ಕಂಡುಕೊಂಡಾಗ, ಅದು ಇದ್ದಕ್ಕಿದ್ದಂತೆ ಕಾಣಿಸಿಕೊಂಡು, ಸುತ್ತಮುತ್ತಲಿನ ಎಲ್ಲಾ ಕಂಟೆಂಟ್ ಅನ್ನು ಸ್ಥಳಾಂತರಿಸುತ್ತದೆ. ಗಾತ್ರದ ಮಾಹಿತಿಯನ್ನು ಮುಂಚಿತವಾಗಿ ಒದಗಿಸುವ ಮೂಲಕ, ನಾವು ಈ ಶಿಫ್ಟ್ ಅನ್ನು ತಪ್ಪಿಸಲು ಬ್ರೌಸರ್‌ಗೆ ಸಹಾಯ ಮಾಡುತ್ತೇವೆ.
• ಲಾರ್ಜೆಸ್ಟ್ ಕಂಟೆಂಟ್‌ಫುಲ್ ಪೇಂಟ್ (LCP): ಇದು ಲೋಡಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅಳೆಯುತ್ತದೆ. ಬ್ರೌಸರ್ ನಿರಂತರವಾಗಿ ಗಾತ್ರಗಳನ್ನು ಮರುಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತಿರುವುದರಿಂದ ಲೇಔಟ್ ಹಂತದಲ್ಲಿ ಹೆಚ್ಚು ಸಮಯ ಕಳೆದರೆ, ಪರದೆಯ ಮೇಲಿನ ಅತಿದೊಡ್ಡ ಎಲಿಮೆಂಟ್‌ನ ಪೇಂಟಿಂಗ್ ವಿಳಂಬವಾಗಬಹುದು, ಇದರಿಂದ LCP ಸ್ಕೋರ್ ಕೆಟ್ಟದಾಗುತ್ತದೆ.
• ಇಂಟರಾಕ್ಷನ್ ಟು ನೆಕ್ಸ್ಟ್ ಪೇಂಟ್ (INP): ಇದು ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕತೆಯನ್ನು ಅಳೆಯುತ್ತದೆ. ದೀರ್ಘವಾದ ಲೇಔಟ್ ಕಾರ್ಯಗಳು ಬ್ರೌಸರ್‌ನ ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುತ್ತವೆ. ಬ್ರೌಸರ್ ಒಂದು ಭಾರವಾದ ಲೇಔಟ್ ಲೆಕ್ಕಾಚಾರದಲ್ಲಿ ನಿರತವಾಗಿರುವಾಗ ಬಳಕೆದಾರರು ಪುಟದೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಲು ಪ್ರಯತ್ನಿಸಿದರೆ (ಉದಾಹರಣೆಗೆ, ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡುವುದು), ಪ್ರತಿಕ್ರಿಯೆ ವಿಳಂಬವಾಗುತ್ತದೆ, ಇದು ಕಳಪೆ INP ಸ್ಕೋರ್‌ಗೆ ಕಾರಣವಾಗುತ್ತದೆ. ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜ್ ಕ್ಯಾಶ್ ಅನ್ನು ಸಮರ್ಥವಾಗಿ ಬಳಸಿಕೊಳ್ಳುವುದು ಮುಖ್ಯ-ಥ್ರೆಡ್ ಕೆಲಸವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.

ಡೆವಲಪರ್‌ಗಳು ಕ್ಯಾಶ್ ಅನ್ನು ಹೇಗೆ ಬಳಸಿಕೊಳ್ಳಬಹುದು (ಅಥವಾ ಅಡ್ಡಿಪಡಿಸಬಹುದು)

ಒಬ್ಬ ಡೆವಲಪರ್ ಆಗಿ, ನೀವು ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜ್ ಕ್ಯಾಶ್ ಅನ್ನು ನೇರವಾಗಿ ನಿಯಂತ್ರಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ. ಆದಾಗ್ಯೂ, ನೀವು ಈ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗೆ ವಿರುದ್ಧವಾಗಿ ಕೆಲಸ ಮಾಡುವ ಬದಲು ಅದರೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವ HTML ಮತ್ತು CSS ಅನ್ನು ಬರೆಯಬಹುದು. ಇದು ಸಾಧ್ಯವಾದಷ್ಟು ಬೇಗ, ಸಾಧ್ಯವಾದಷ್ಟು ಹೆಚ್ಚು ಮಾಹಿತಿಯನ್ನು ಬ್ರೌಸರ್‌ಗೆ ಒದಗಿಸುವುದು ಮತ್ತು ಅನಗತ್ಯ ಕ್ಯಾಶ್ ಅಮಾನ್ಯಗೊಳಿಸುವಿಕೆಯನ್ನು ಉಂಟುಮಾಡುವ ಪ್ಯಾಟರ್ನ್‌ಗಳನ್ನು ತಪ್ಪಿಸುವುದರ ಬಗ್ಗೆ.

"ಮಾಡಬೇಕಾದವುಗಳು": ಆರೋಗ್ಯಕರ ಕ್ಯಾಶ್‌ಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

1. ಮೀಡಿಯಾಗಳಿಗೆ ಸ್ಪಷ್ಟ ಆಯಾಮಗಳನ್ನು ಒದಗಿಸಿ

CLS ಅನ್ನು ತಡೆಗಟ್ಟಲು ಮತ್ತು ಬ್ರೌಸರ್‌ನ ಲೇಔಟ್ ಎಂಜಿನ್‌ಗೆ ಸಹಾಯ ಮಾಡಲು ಇದು ಅತ್ಯಂತ ನಿರ್ಣಾಯಕ ಅಭ್ಯಾಸವಾಗಿದೆ. ನಿಮ್ಮ <img> ಮತ್ತು <video> ಎಲಿಮೆಂಟ್‌ಗಳಲ್ಲಿ ಯಾವಾಗಲೂ width ಮತ್ತು height ಗುಣಲಕ್ಷಣಗಳನ್ನು ಒದಗಿಸಿ.

            <!-- GOOD -->
<img src="path/to/image.jpg" width="1200" height="800" alt="...">
            

              
                Copy
              
            
          

ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳು ಬುದ್ಧಿವಂತವಾಗಿವೆ. ಇಮೇಜ್ ಲೋಡ್ ಆಗುವ ಮೊದಲೇ ಅವು ಈ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿ ಇಂಟ್ರಿನ್ಸಿಕ್ ಆಸ್ಪೆಕ್ಟ್ ರೇಶಿಯೋವನ್ನು (1200 / 800 = 1.5) ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತವೆ. ನಿಮ್ಮ CSS ನಲ್ಲಿ `height: auto;` ನೊಂದಿಗೆ ಸಂಯೋಜಿಸಿದಾಗ, ಇದು ಬ್ರೌಸರ್‌ಗೆ ಸರಿಯಾದ ಪ್ರಮಾಣದ ಲಂಬ ಜಾಗವನ್ನು ಕಾಯ್ದಿರಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಚಿತ್ರ ಕಾಣಿಸಿಕೊಂಡಾಗ ಲೇಔಟ್ ಶಿಫ್ಟ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ನಿವಾರಿಸುತ್ತದೆ.

2. `aspect-ratio` CSS ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಿ

ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ಇಂಟ್ರಿನ್ಸಿಕ್ ರೇಶಿಯೋವನ್ನು ಬ್ರೌಸರ್‌ಗೆ ಸ್ಪಷ್ಟವಾಗಿ ಹೇಳಲು `aspect-ratio` ಪ್ರಾಪರ್ಟಿಯು ಒಂದು ಆಧುನಿಕ ಮತ್ತು ಶಕ್ತಿಯುತ ಸಾಧನವಾಗಿದೆ. ಇದು ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸಕ್ಕೆ ಅದ್ಭುತವಾಗಿದೆ ಮತ್ತು ಕೇವಲ ಚಿತ್ರಗಳಿಗಿಂತ ಹೆಚ್ಚಿನದರ ಮೇಲೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.

            .responsive-iframe-container {
  width: 100%;
  aspect-ratio: 16 / 9; /* Tells the browser the intrinsic ratio */
}

.responsive-iframe-container iframe {
  width: 100%;
  height: 100%;
}
            

              
                Copy
              
            
          

ಈ ಕೋಡ್ ಕಂಟೇನರ್‌ಗಾಗಿ 16:9 ಬ್ಲಾಕ್ ಜಾಗವನ್ನು ಕಾಯ್ದಿರಿಸುತ್ತದೆ, iframe ನ ಕಂಟೆಂಟ್ ಲೋಡ್ ಆದಾಗ ಪುಟದ ಲೇಔಟ್ ಸ್ಥಿರವಾಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

3. `contain` CSS ಪ್ರಾಪರ್ಟಿ ಬಳಸಿ ಸಬ್‌ಟ್ರೀಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸಿ

`contain` ಪ್ರಾಪರ್ಟಿಯು ಬ್ರೌಸರ್‌ಗೆ ಒಂದು ಉನ್ನತ-ಕಾರ್ಯಕ್ಷಮತೆಯ ಸುಳಿವು. ಇದು ಒಂದು ಎಲಿಮೆಂಟ್ ಮತ್ತು ಅದರ ವಿಷಯಗಳು, ಸಾಧ್ಯವಾದಷ್ಟು, ಉಳಿದ ಡಾಕ್ಯುಮೆಂಟ್ ಟ್ರೀಯಿಂದ ಸ್ವತಂತ್ರವಾಗಿವೆ ಎಂದು ಘೋಷಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ನಮಗೆ ಅತ್ಯಂತ ಪ್ರಸ್ತುತವಾದ ಮೌಲ್ಯವೆಂದರೆ `size`.

contain: size; ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರವು ಅದರ ಮಕ್ಕಳ ಗಾತ್ರದ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿಲ್ಲ ಎಂದು ಬ್ರೌಸರ್‌ಗೆ ಹೇಳುತ್ತದೆ. ಇದು ಬ್ರೌಸರ್‌ಗೆ ಕೇವಲ ಕಂಟೇನರ್‌ನ ಗಾತ್ರವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಬೇಕಾದಲ್ಲಿ ಮಕ್ಕಳ ಲೇಔಟ್ ಅನ್ನು ಬಿಟ್ಟುಬಿಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ ಬಳಿ ಸಂಕೀರ್ಣ, ಸ್ವಯಂ-ಒಳಗೊಂಡಿರುವ ವಿಜೆಟ್ ಇದ್ದರೆ, ನೀವು `contain: size;` (ಅಥವಾ ಹೆಚ್ಚು ಸಾಮಾನ್ಯವಾಗಿ `contain: content;` ಇದು `layout` ಮತ್ತು `paint` ಕಂಟೈನ್‌ಮೆಂಟ್ ಅನ್ನು ಸಹ ಒಳಗೊಂಡಿರುತ್ತದೆ) ಅನ್ನು ಅನ್ವಯಿಸಬಹುದು, ಇದರಿಂದ ಅದು ಮುಖ್ಯ ಡಾಕ್ಯುಮೆಂಟ್ ಲೇಔಟ್‌ನಲ್ಲಿ ದುಬಾರಿ ಮರುಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಉಂಟುಮಾಡುವುದನ್ನು ತಡೆಯುತ್ತದೆ.

            .complex-widget {
  contain: content;
  /* You must provide an explicit size for contain:size to work */
  width: 300px;
  height: 500px;
}
            

              
                Copy
              
            
          

4. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ DOM ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಬ್ಯಾಚ್ ಮಾಡಿ

ಲೇಔಟ್ ಥ್ರಾಶಿಂಗ್ ಅನ್ನು ತಪ್ಪಿಸಲು, ನಿಮ್ಮ ಓದುವಿಕೆ ಮತ್ತು ಬರೆಯುವಿಕೆಗಳನ್ನು ಗುಂಪು ಮಾಡಿ. ಮೊದಲು, ನಿಮಗೆ ಬೇಕಾದ ಎಲ್ಲಾ ಮೌಲ್ಯಗಳನ್ನು DOM ನಿಂದ ಓದಿ. ನಂತರ, ನಿಮ್ಮ ಎಲ್ಲಾ ಬರವಣಿಗೆಗಳನ್ನು ನಿರ್ವಹಿಸಿ.

            // GOOD: Batched reads and writes
function resizeElements(elements) {
  // 1. READ phase
  const newWidths = [];
  for (let i = 0; i < elements.length; i++) {
    newWidths.push(elements[i].offsetWidth / 2);
  }

  // 2. WRITE phase
  for (let i = 0; i < elements.length; i++) {
    elements[i].style.width = newWidths[i] + 'px';
  }
}
            

              
                Copy
              
            
          

ಈ ಪ್ಯಾಟರ್ನ್ ಬ್ರೌಸರ್‌ಗೆ ಎಲ್ಲಾ ಅಗಲಗಳನ್ನು ಪಡೆಯಲು ಒಂದು ಲೇಔಟ್ ಲೆಕ್ಕಾಚಾರವನ್ನು ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ, ಮತ್ತು ನಂತರ ಎಲ್ಲಾ ಶೈಲಿಯ ಬದಲಾವಣೆಗಳನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುತ್ತದೆ, ಇದು ಕಾರ್ಯಾಚರಣೆಯ ಕೊನೆಯಲ್ಲಿ ಕೇವಲ ಒಂದು ಅಂತಿಮ ರಿಫ್ಲೋವನ್ನು ಪ್ರಚೋದಿಸಬಹುದು.

"ಮಾಡಬಾರದವುಗಳು": ಕ್ಯಾಶ್ ಅನ್ನು ಅಮಾನ್ಯಗೊಳಿಸುವ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಹಾನಿ ಮಾಡುವ ಅಭ್ಯಾಸಗಳು

1. ಲೇಔಟ್-ಪ್ರಚೋದಿಸುವ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವುದು

ಅತ್ಯಂತ ಸಾಮಾನ್ಯವಾದ ಕಾರ್ಯಕ್ಷಮತೆಯ ತಪ್ಪುಗಳಲ್ಲಿ ಒಂದು ಎಂದರೆ ಎಲಿಮೆಂಟ್‌ನ ಜ್ಯಾಮಿತಿಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವುದು. `width`, `height`, `margin`, `padding`, `top`, ಮತ್ತು `left` ನಂತಹ ಪ್ರಾಪರ್ಟಿಗಳೆಲ್ಲವೂ ರೆಂಡರಿಂಗ್ ಪೈಪ್‌ಲೈನ್‌ನ ಲೇಔಟ್ ಹಂತವನ್ನು ಪ್ರಚೋದಿಸುತ್ತವೆ. ಅವುಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವುದರಿಂದ ಬ್ರೌಸರ್ ಪ್ರತಿಯೊಂದು ಫ್ರೇಮ್‌ನಲ್ಲೂ ಲೇಔಟ್ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ನಡೆಸುವಂತೆ ಒತ್ತಾಯಿಸುತ್ತದೆ.

ಬದಲಾಗಿ, ಕಾಂಪೊಸಿಟರ್‌ನಿಂದ ನಿರ್ವಹಿಸಬಹುದಾದ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಿ: `transform` ಮತ್ತು `opacity`. ಈ ಪ್ರಾಪರ್ಟಿಗಳು ಲೇಔಟ್ ಅನ್ನು ಪ್ರಚೋದಿಸುವುದಿಲ್ಲ. ಬ್ರೌಸರ್ ಸಾಮಾನ್ಯವಾಗಿ ಅನಿಮೇಶನ್ ಅನ್ನು GPU ಗೆ ಆಫ್‌ಲೋಡ್ ಮಾಡಬಹುದು, ಇದರ ಪರಿಣಾಮವಾಗಿ ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸದ ರೇಷ್ಮೆಯಂತಹ ನಯವಾದ 60fps ಅನಿಮೇಶನ್‌ಗಳು ದೊರೆಯುತ್ತವೆ.

            /* BAD: Animates layout */
.box.animate {
  animation: move-bad 2s infinite;
}
@keyframes move-bad {
  from { left: 0; }
  to { left: 200px; }
}

/* GOOD: Animates on the compositor */
.box.animate {
  animation: move-good 2s infinite;
}
@keyframes move-good {
  from { transform: translateX(0); }
  to { transform: translateX(200px); }
}
            

              
                Copy
              
            
          

2. ಆಗಾಗ್ಗೆ ಮತ್ತು ಅನಗತ್ಯವಾದ ಕಂಟೆಂಟ್ ಬದಲಾವಣೆಗಳು

ನೀವು ಆಗಾಗ್ಗೆ ಅಪ್‌ಡೇಟ್ ಆಗುವ ಕಾಂಪೊನೆಂಟ್ ಹೊಂದಿದ್ದರೆ (ಉದಾಹರಣೆಗೆ, ಕೌಂಟ್‌ಡೌನ್ ಟೈಮರ್, ಸ್ಟಾಕ್ ಟಿಕ್ಕರ್), ಆ ಅಪ್‌ಡೇಟ್‌ಗಳು ಲೇಔಟ್ ಮೇಲೆ ಹೇಗೆ ಪರಿಣಾಮ ಬೀರುತ್ತವೆ ಎಂಬುದರ ಬಗ್ಗೆ ಜಾಗರೂಕರಾಗಿರಿ. ಸಂಖ್ಯೆಯನ್ನು "10" ರಿಂದ "9" ಕ್ಕೆ ಬದಲಾಯಿಸುವುದರಿಂದ ಕಂಟೇನರ್‌ನ ಗಾತ್ರ ಬದಲಾದರೆ, ನೀವು ಪದೇ ಪದೇ ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜ್ ಕ್ಯಾಶ್ ಅನ್ನು ಅಮಾನ್ಯಗೊಳಿಸುತ್ತಿದ್ದೀರಿ ಮತ್ತು ಲೇಔಟ್ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಪ್ರಚೋದಿಸುತ್ತಿದ್ದೀರಿ. ಸಾಧ್ಯವಾದಲ್ಲಿ, ಈ ಅಪ್‌ಡೇಟ್‌ಗಳ ಸಮಯದಲ್ಲಿ ಕಂಟೇನರ್‌ನ ಗಾತ್ರ ಸ್ಥಿರವಾಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಪ್ರಯತ್ನಿಸಿ, ಉದಾಹರಣೆಗೆ, ಮೊನೊಸ್ಪೇಸ್ ಫಾಂಟ್ ಬಳಸಿ ಅಥವಾ ಕನಿಷ್ಠ ಅಗಲವನ್ನು ಹೊಂದಿಸಿ.

ತೆರೆಯ ಹಿಂದಿನ ನೋಟ: ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳು

ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನ ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಈ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಳ (ಮತ್ತು ಆಂಟಿ-ಪ್ಯಾಟರ್ನ್‌ಗಳ) ಪರಿಣಾಮಗಳನ್ನು ನೋಡಬಹುದು.

ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಪ್ಯಾನೆಲ್ ಬಳಸುವುದು

ಕ್ರೋಮ್ ಡೆವ್‌ಟೂಲ್ಸ್‌ನಲ್ಲಿ, ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಪ್ಯಾನೆಲ್ ನಿಮ್ಮ ಉತ್ತಮ ಸ್ನೇಹಿತ. ನಿಮ್ಮ ಅನಿಮೇಶನ್ ಅಥವಾ ಸ್ಕ್ರಿಪ್ಟ್ ಚಾಲನೆಯಲ್ಲಿರುವಾಗ ನೀವು ಕಾರ್ಯಕ್ಷಮತೆಯ ಪ್ರೊಫೈಲ್ ಅನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡಬಹುದು.

• ಲೇಔಟ್ ಥ್ರಾಶಿಂಗ್: "Layout" ಎಂದು ಲೇಬಲ್ ಮಾಡಲಾದ ದೀರ್ಘ, ಪುನರಾವರ್ತಿತ ನೇರಳೆ ಬಾರ್‌ಗಳನ್ನು ನೋಡಿ. ನೀವು ಫೋರ್ಸ್ಡ್ ರಿಫ್ಲೋ ಎಚ್ಚರಿಕೆಯನ್ನು (ಒಂದು ಸಣ್ಣ ಕೆಂಪು ತ್ರಿಕೋನ) ನೋಡಿದರೆ, ಅದು ಲೇಔಟ್ ಥ್ರಾಶಿಂಗ್‌ನ ಸ್ಪಷ್ಟ ಸಂಕೇತವಾಗಿದೆ.
• ಅನಿಮೇಶನ್ ಕಾರ್ಯಕ್ಷಮತೆ: "ಕೆಟ್ಟ" `left` ಅನಿಮೇಶನ್ ಮತ್ತು "ಉತ್ತಮ" `transform` ಅನಿಮೇಶನ್ ಅನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡಿ. `left` ಅನಿಮೇಶನ್‌ನ ಪ್ರೊಫೈಲ್‌ನಲ್ಲಿ, ನೀವು ಪ್ರತಿ ಫ್ರೇಮ್‌ನಲ್ಲಿ ಲೇಔಟ್ ಮತ್ತು ಪೇಂಟ್ ಕಾರ್ಯಗಳ ಸರಣಿಯನ್ನು ನೋಡುತ್ತೀರಿ. `transform` ಅನಿಮೇಶನ್‌ನ ಪ್ರೊಫೈಲ್‌ನಲ್ಲಿ, ಮುಖ್ಯ ಥ್ರೆಡ್ ಹೆಚ್ಚಾಗಿ ನಿಷ್ಕ್ರಿಯವಾಗಿರುತ್ತದೆ, ಮತ್ತು ಕೆಲಸವು "Compositor" ಥ್ರೆಡ್‌ನಲ್ಲಿ ನಡೆಯುತ್ತದೆ.

ಲೇಔಟ್ ಶಿಫ್ಟ್‌ಗಳನ್ನು ದೃಶ್ಯೀಕರಿಸುವುದು

ಡೆವ್‌ಟೂಲ್ಸ್ ರೆಂಡರಿಂಗ್ ಟ್ಯಾಬ್‌ನಲ್ಲಿ (ನೀವು ಅದನ್ನು ಮೂರು-ಡಾಟ್ ಮೆನು > More tools > Rendering ನಿಂದ ಸಕ್ರಿಯಗೊಳಿಸಬೇಕಾಗಬಹುದು), ನೀವು "Layout Shift Regions" ಬಾಕ್ಸ್ ಅನ್ನು ಪರಿಶೀಲಿಸಬಹುದು. ಇದು ಲೇಔಟ್ ಶಿಫ್ಟ್ ಸಂಭವಿಸಿದಾಗಲೆಲ್ಲಾ ಪರದೆಯ ಪ್ರದೇಶಗಳನ್ನು ನೀಲಿ ಬಣ್ಣದಲ್ಲಿ ಹೈಲೈಟ್ ಮಾಡುತ್ತದೆ. CLS ಸಮಸ್ಯೆಗಳನ್ನು ಡೀಬಗ್ ಮಾಡಲು ಇದು ಒಂದು ಅಮೂಲ್ಯವಾದ ಸಾಧನವಾಗಿದೆ, ಇವುಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಬ್ರೌಸರ್‌ಗೆ ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜ್ ಮುಂಚಿತವಾಗಿ ತಿಳಿಯದ ಕಾರಣ ಉಂಟಾಗುತ್ತವೆ.

ಭವಿಷ್ಯ: ವಿಕಸಿಸುತ್ತಿರುವ ಬ್ರೌಸರ್ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಳು

ಬ್ರೌಸರ್ ತಯಾರಕರು ರೆಂಡರಿಂಗ್ ಅನ್ನು ವೇಗವಾಗಿ ಮತ್ತು ಹೆಚ್ಚು ಬುದ್ಧಿವಂತಿಕೆಯಿಂದ ಮಾಡಲು ನಿರಂತರವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತಿದ್ದಾರೆ. ಕ್ರೋಮಿಯಂನ ರೆಂಡರಿಂಗ್‌ಎನ್‌ಜಿ (ನೆಕ್ಸ್ಟ್ ಜನರೇಷನ್) ನಂತಹ ಯೋಜನೆಗಳು ರೆಂಡರಿಂಗ್ ಎಂಜಿನ್‌ನ ಮೂಲಭೂತ ಮರು-ವಾಸ್ತುಶಿಲ್ಪವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತವೆ, ಇದು ಹೆಚ್ಚು ವಿಶ್ವಾಸಾರ್ಹ, ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ನಿರೀಕ್ಷಿತವಾಗಿಸಲು. `contain` ಪ್ರಾಪರ್ಟಿಯಂತಹ ವೈಶಿಷ್ಟ್ಯಗಳು, ಡೆವಲಪರ್‌ಗಳಿಗೆ ತಮ್ಮ ಉದ್ದೇಶವನ್ನು ಬ್ರೌಸರ್ ಎಂಜಿನ್‌ಗೆ ಸಂವಹನ ಮಾಡಲು ಹೆಚ್ಚು ಸ್ಪಷ್ಟವಾದ ಸಾಧನಗಳನ್ನು ನೀಡುವ ವಿಶಾಲ ಪ್ರವೃತ್ತಿಯ ಭಾಗವಾಗಿದೆ.

ವೆಬ್ ಡೆವಲಪರ್‌ಗಳಾಗಿ, ನಾವು ಈ ಆಧಾರವಾಗಿರುವ ಕಾರ್ಯವಿಧಾನಗಳನ್ನು ಹೆಚ್ಚು ಅರ್ಥಮಾಡಿಕೊಂಡಷ್ಟೂ, ಕೇವಲ ಕ್ರಿಯಾತ್ಮಕವಲ್ಲದ, ಆದರೆ ಜಾಗತಿಕ ಮಟ್ಟದಲ್ಲಿ ನಿಜವಾಗಿಯೂ ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ನಾವು ಉತ್ತಮವಾಗಿ ಸಿದ್ಧರಾಗುತ್ತೇವೆ, ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ ಅವರ ಸಾಧನ ಅಥವಾ ನೆಟ್‌ವರ್ಕ್ ಪರಿಸ್ಥಿತಿಗಳನ್ನು ಲೆಕ್ಕಿಸದೆ ಉತ್ತಮ ಅನುಭವವನ್ನು ನೀಡುತ್ತೇವೆ.

ತೀರ್ಮಾನ

ಸಿಎಸ್ಎಸ್ ಇಂಟ್ರಿನ್ಸಿಕ್ ಸೈಜ್ ಕ್ಯಾಲ್ಕುಲೇಶನ್ ಕ್ಯಾಶ್ ಒಂದು ಶಕ್ತಿಯುತ, ತೆರೆಮರೆಯ ಆಪ್ಟಿಮೈಸೇಶನ್ ಆಗಿದ್ದು, ಇದು ಆಧುನಿಕ ವೆಬ್ ಅನ್ನು ಸಾಧ್ಯವಾಗಿಸುತ್ತದೆ. ಇದು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆಯಾದರೂ, ನಮ್ಮ ಕೋಡಿಂಗ್ ಅಭ್ಯಾಸಗಳು ಅದರ ಪರಿಣಾಮಕಾರಿತ್ವಕ್ಕೆ ಸಹಾಯ ಮಾಡಬಹುದು ಅಥವಾ ಅಡ್ಡಿಯಾಗಬಹುದು.

ಈ ಪ್ರಮುಖ ಅಂಶಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಹೆಚ್ಚು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮತ್ತು ವೃತ್ತಿಪರ ಫ್ರಂಟ್-ಎಂಡ್ ಕೋಡ್ ಅನ್ನು ಬರೆಯಬಹುದು:

• ಲೇಔಟ್ ದುಬಾರಿಯಾಗಿದೆ: ಲೇಔಟ್ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಪ್ರಚೋದಿಸುವ ಕಾರ್ಯಾಚರಣೆಗಳ ಬಗ್ಗೆ ಯಾವಾಗಲೂ ಜಾಗರೂಕರಾಗಿರಿ.
• ಗಾತ್ರದ ಮಾಹಿತಿಯನ್ನು ಮುಂಚಿತವಾಗಿ ಒದಗಿಸಿ: ಲೇಔಟ್ ಶಿಫ್ಟ್‌ಗಳನ್ನು ತಡೆಗಟ್ಟಲು ಮತ್ತು ಬ್ರೌಸರ್‌ಗೆ ಅದರ ಲೇಔಟ್ ಅನ್ನು ಸಮರ್ಥವಾಗಿ ಯೋಜಿಸಲು ಸಹಾಯ ಮಾಡಲು ಮೀಡಿಯಾದ ಮೇಲೆ `width`/`height` ಗುಣಲಕ್ಷಣಗಳನ್ನು ಮತ್ತು `aspect-ratio` ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಿ.
• ಬುದ್ಧಿವಂತಿಕೆಯಿಂದ ಅನಿಮೇಟ್ ಮಾಡಿ: ಪ್ರತಿ-ಫ್ರೇಮ್ ಲೇಔಟ್ ಮತ್ತು ಪೇಂಟ್ ಕೆಲಸವನ್ನು ತಪ್ಪಿಸಲು ಜ್ಯಾಮಿತಿಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವ ಪ್ರಾಪರ್ಟಿಗಳಿಗಿಂತ `transform` ಮತ್ತು `opacity` ಅನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು ಆದ್ಯತೆ ನೀಡಿ.
• ಸಂಕೀರ್ಣತೆಯನ್ನು ಪ್ರತ್ಯೇಕಿಸಿ: ನಿಮ್ಮ ಲೇಔಟ್‌ನ ಯಾವ ಭಾಗಗಳು ಸ್ವಯಂ-ಒಳಗೊಂಡಿವೆ ಎಂಬುದರ ಬಗ್ಗೆ ಬ್ರೌಸರ್‌ಗೆ ಸುಳಿವುಗಳನ್ನು ನೀಡಲು CSS `contain` ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಿ, ಇದು ಹೆಚ್ಚು ಉದ್ದೇಶಿತ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಳಿಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
• ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಪರಿಶೀಲಿಸಿ: ಫೋರ್ಸ್ಡ್ ರಿಫ್ಲೋಗಳು, ಲೇಔಟ್ ಥ್ರಾಶಿಂಗ್ ಮತ್ತು ಅನಗತ್ಯ ಲೇಔಟ್ ಶಿಫ್ಟ್‌ಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ಬಳಸಿ.

ಬ್ರೌಸರ್ ಗಾತ್ರ ಮತ್ತು ಲೇಔಟ್ ಅನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದರ ಮಾನಸಿಕ ಮಾದರಿಯನ್ನು ನಿರ್ಮಿಸುವ ಮೂಲಕ, ನೀವು ಕೇವಲ ಕೆಲಸ ಮಾಡುವ CSS ಬರೆಯುವುದರಿಂದ ಮುಂದೆ ಸಾಗಿ, ವಿಶ್ವಾದ್ಯಂತ ಪ್ರೇಕ್ಷಕರಿಗೆ ವೇಗವಾದ, ಸ್ಥಿರವಾದ ಮತ್ತು ಆನಂದದಾಯಕ ವೆಬ್ ಅನುಭವಗಳನ್ನು ಎಂಜಿನಿಯರಿಂಗ್ ಮಾಡುವತ್ತ ಸಾಗುತ್ತೀರಿ.