CSS ಕಂಟೇನರ್ ಕ್ವೆರಿ ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್ ಎಂಜಿನ್: ಕ್ವೆರಿ ಪ್ರೊಸೆಸಿಂಗ್ ವರ್ಧನೆ

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

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳ ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಣಾಮಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳನ್ನು ಪರಿಶೀಲಿಸುವ ಮೊದಲು, ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಉಂಟುಮಾಡಬಹುದಾದ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸವಾಲುಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ. ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳಿಗಿಂತ ಭಿನ್ನವಾಗಿ, ವ್ಯೂಪೋರ್ಟ್ ಬದಲಾದಾಗ ಮಾತ್ರ ಮೌಲ್ಯಮಾಪನ ಮಾಡಲಾಗುತ್ತದೆ, ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಕಂಟೇನರ್ ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರ ಬದಲಾದಾಗಲೆಲ್ಲಾ ಮರು-ಮೌಲ್ಯಮಾಪನ ಮಾಡಬಹುದು. ಇದು ಈ ಕಾರಣಗಳಿಂದ ಸಂಭವಿಸಬಹುದು:

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

ಪ್ರತಿ ಮರು-ಮೌಲ್ಯಮಾಪನವು ಶೈಲಿಗಳ ಮರುಲೆಕ್ಕಾಚಾರವನ್ನು ಮತ್ತು ಪುಟದ ಸಂಭಾವ್ಯ ರಿಫ್ಲೋವನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ, ಇದು ವಿಶೇಷವಾಗಿ ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳಿಗೆ ಗಣನೀಯವಾಗಿ ದುಬಾರಿಯಾಗಬಹುದು. ಅತಿಯಾದ ರಿಫ್ಲೋಗಳು ಇದಕ್ಕೆ ಕಾರಣವಾಗಬಹುದು:

• ಹೆಚ್ಚಿದ ಸಿಪಿಯು ಬಳಕೆ.
• ಜರ್ಕಿ ಸ್ಕ್ರೋಲಿಂಗ್.
• ನಿಧಾನವಾದ ಪುಟ ಲೋಡ್ ಸಮಯಗಳು.
• ಕಳಪೆ ಬಳಕೆದಾರ ಅನುಭವ.

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

ಕ್ವೆರಿ ಪ್ರೊಸೆಸಿಂಗ್ ವರ್ಧನೆಗಾಗಿ ತಂತ್ರಗಳು

1. ಕ್ವೆರಿ ಸಂಕೀರ್ಣತೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುವುದು

ನಿಮ್ಮ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳ ಸಂಕೀರ್ಣತೆಯು ಬ್ರೌಸರ್‌ಗೆ ಅವುಗಳನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡಲು ತೆಗೆದುಕೊಳ್ಳುವ ಸಮಯದ ಮೇಲೆ ನೇರವಾಗಿ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ. ಸರಳವಾದ ಕ್ವೆರಿಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲು ವೇಗವಾಗಿರುತ್ತವೆ. ಕ್ವೆರಿ ಸಂಕೀರ್ಣತೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಕೆಲವು ತಂತ್ರಗಳು ಇಲ್ಲಿವೆ:

• ಅತಿಯಾದ ನಿರ್ದಿಷ್ಟ ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ತಪ್ಪಿಸಿ: ನಿಮ್ಮ ಕಂಟೇನರ್ ಕ್ವೆರಿಯೊಳಗೆ ಆಳವಾಗಿ ನೆಸ್ಟೆಡ್ ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಬಳಸುವ ಬದಲು, ಕ್ಲಾಸ್‌ಗಳು ಅಥವಾ ಐಡಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನೇರವಾಗಿ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಗುರಿಯಾಗಿಸಿ.
• ಸಾಧ್ಯವಾದಷ್ಟು ಸರಳವಾದ ಷರತ್ತುಗಳನ್ನು ಬಳಸಿ: ಸಂಕೀರ್ಣ ಅಭಿವ್ಯಕ್ತಿಗಳಿಗಿಂತ ಸರಳ `min-width` ಅಥವಾ `max-width` ಷರತ್ತುಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡಿ. ಉದಾಹರಣೆಗೆ, `(min-width: 300px and max-width: 600px)` ಬದಲು, ಸಾಧ್ಯವಾದರೆ `min-width: 300px` ಮತ್ತು `max-width: 600px` ನೊಂದಿಗೆ ಪ್ರತ್ಯೇಕ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ, ಮತ್ತು ನಿಮ್ಮ CSS ಅನ್ನು ಅದಕ್ಕೆ ತಕ್ಕಂತೆ ರಚಿಸಿ. ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನೀಡುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ.
• ಪುನರಾವರ್ತಿತ ಕ್ವೆರಿಗಳನ್ನು ಕ್ರೋಢೀಕರಿಸಿ: ನಕಲಿ ಅಥವಾ ಅತಿಕ್ರಮಿಸುವ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಗುರುತಿಸಿ ಮತ್ತು ತೆಗೆದುಹಾಕಿ. ಅನೇಕ ಡೆವಲಪರ್‌ಗಳು ಒಂದೇ ಪ್ರಾಜೆಕ್ಟ್‌ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುವಾಗ ಇದು ಒಂದು ಸಾಮಾನ್ಯ ಸಮಸ್ಯೆಯಾಗಿದೆ. ಕೋಡ್ ವಿಮರ್ಶೆ ಪ್ರಕ್ರಿಯೆಗಳು ಪುನರಾವರ್ತಿತ ಅಥವಾ ಸಂಘರ್ಷದ ಕಂಟೇನರ್ ಕ್ವೆರಿ ಘೋಷಣೆಗಳನ್ನು ನಿರ್ದಿಷ್ಟವಾಗಿ ನೋಡಬೇಕು.

ಉದಾಹರಣೆ:

ಅದಕ್ಷ:

            .container:has(> .article) {
  container-type: inline-size;
}

.container:has(> .article) .article__title {
  \@container (min-width: 500px) {
    font-size: 1.2em;
  }
}

            

              
                Copy
              
            
          

ದಕ್ಷ:

            .container {
  container-type: inline-size;
}

.article__title {
  \@container (min-width: 500px) {
    font-size: 1.2em;
  }
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಎರಡನೇ ಸೆಲೆಕ್ಟರ್ `:has(> .article)` ಭಾಗವನ್ನು ಪುನರಾವರ್ತಿಸುವ ಅಗತ್ಯವಿಲ್ಲ ಏಕೆಂದರೆ ಕಂಟೇನರ್-ಟೈಪ್ ಘೋಷಣೆಯು ಈಗಾಗಲೇ ಅದನ್ನು ಆರ್ಟಿಕಲ್ ಚೈಲ್ಡ್ ಹೊಂದಿರುವ ಕಂಟೇನರ್‌ಗೆ ಮಾತ್ರ ಅನ್ವಯಿಸುತ್ತದೆ. `:has(> .article)` ಭಾಗವನ್ನು ತೆಗೆದುಹಾಕುವ ಮೂಲಕ ನಾವು ಕಂಟೇನರ್ ಕ್ವೆರಿ ನಿಯಮದ ನಿರ್ದಿಷ್ಟತೆ ಮತ್ತು ಸಂಕೀರ್ಣತೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಿದ್ದೇವೆ.

2. ಕಂಟೇನರ್ ಕ್ವೆರಿ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಡಿಬೌನ್ಸಿಂಗ್ ಮತ್ತು ಥ್ರಾಟ್ಲಿಂಗ್ ಮಾಡುವುದು

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

• ಡಿಬೌನ್ಸಿಂಗ್: ಫಂಕ್ಷನ್ ಅನ್ನು ಕೊನೆಯ ಬಾರಿ ಆಹ್ವಾನಿಸಿದ ನಂತರ ನಿರ್ದಿಷ್ಟ ಸಮಯದವರೆಗೆ ಅದರ ಕಾರ್ಯಗತಗೊಳಿಸುವಿಕೆಯನ್ನು ವಿಳಂಬಗೊಳಿಸುತ್ತದೆ. ವೇಗದ ಘಟನೆಗಳ ಸರಣಿಯ ನಂತರ ನೀವು ಒಮ್ಮೆ ಮಾತ್ರ ಫಂಕ್ಷನ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಬಯಸಿದಾಗ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ. Lodash ನಂತಹ ಲೈಬ್ರರಿಗಳು ಬಳಸಲು ಸುಲಭವಾದ ಡಿಬೌನ್ಸಿಂಗ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ.
• ಥ್ರಾಟ್ಲಿಂಗ್: ಒಂದು ಫಂಕ್ಷನ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಬಹುದಾದ ದರವನ್ನು ಸೀಮಿತಗೊಳಿಸುತ್ತದೆ. ನೀವು ಫಂಕ್ಷನ್ ಅನ್ನು ನಿಯಮಿತ ಅಂತರದಲ್ಲಿ ಕಾರ್ಯಗತಗೊಳಿಸಲು ಬಯಸಿದಾಗ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ, ಅದು ಹೆಚ್ಚು ಆಗಾಗ್ಗೆ ಆಹ್ವಾನಿಸಲ್ಪಟ್ಟರೂ ಸಹ. ಮತ್ತೆ, Lodash ಅನುಕೂಲಕರ ಥ್ರಾಟ್ಲಿಂಗ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ನೀಡುತ್ತದೆ.

ಈ ತಂತ್ರಗಳನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಅಳವಡಿಸಲಾಗುತ್ತದೆ. ಕಂಟೇನರ್ ಕ್ವೆರಿಯನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುವ ಫಂಕ್ಷನ್ ಅನ್ನು ಡಿಬೌನ್ಸ್ ಮಾಡಲು Lodash ಬಳಸುವ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:

            import { debounce } from 'lodash';

const updateContainerQueries = () => {
  // Code to update container queries (e.g., by manually triggering a style recalculation)
  // This might involve adding/removing classes based on container size.
  // This part is framework-dependent and can vary greatly. For instance:
  const container = document.querySelector('.my-container');
  if (!container) return;
  const width = container.offsetWidth;
  if (width < 500) {
    container.classList.add('small');
    container.classList.remove('large');
  } else {
    container.classList.remove('small');
    container.classList.add('large');
  }
};

const debouncedUpdateContainerQueries = debounce(updateContainerQueries, 250); // Delay of 250ms

window.addEventListener('resize', debouncedUpdateContainerQueries);

            

              
                Copy
              
            
          

ಪ್ರಮುಖ ಸೂಚನೆ: ಕಂಟೇನರ್ ಕ್ವೆರಿ ಬದಲಾವಣೆಯ ನಂತರ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ನೇರವಾಗಿ ಶೈಲಿಗಳನ್ನು ಮಾರ್ಪಡಿಸುವುದು ಪ್ರತಿಕೂಲವಾಗಬಹುದು ಮತ್ತು ಇನ್ನೂ ಕೆಟ್ಟ ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಕಾರಣವಾಗಬಹುದು. ಮೇಲಿನ ಉದಾಹರಣೆಯು ಡಿಬೌನ್ಸಿಂಗ್ ಅನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದರ *ಸರಳೀಕೃತ ವಿವರಣೆ*ಯಾಗಿದೆ. ಒತ್ತಾಯದ ರಿಫ್ಲೋಗಳನ್ನು ತಪ್ಪಿಸಲು ಸಾಧ್ಯವಿರುವಲ್ಲಿ CSS ಟ್ರಾನ್ಸಿಶನ್‌ಗಳು ಮತ್ತು ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಅವಲಂಬಿಸುವುದು ಉತ್ತಮ ವಿಧಾನವಾಗಿದೆ. ನೀವು ಕಂಟೇನರ್ ಕ್ವೆರಿ ಫಲಿತಾಂಶಗಳ ಆಧಾರದ ಮೇಲೆ ಶೈಲಿಗಳನ್ನು ಚಾಲನೆ ಮಾಡಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸುತ್ತಿದ್ದರೆ ಈ ತಂತ್ರವು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.

3. ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಸೈಜಿಂಗ್‌ಗಾಗಿ `contain-intrinsic-size` ಅನ್ನು ಬಳಸುವುದು

ಒಂದು ಕಂಟೇನರ್‌ನ ಗಾತ್ರವು ಅದರ ವಿಷಯದ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದ್ದಾಗ ಮತ್ತು ವಿಷಯದ ಗಾತ್ರವು ಕಂಟೇನರ್ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದ್ದಾಗ (ಒಂದು ವೃತ್ತಾಕಾರದ ಅವಲಂಬನೆ), ಅಂತಿಮ ಗಾತ್ರವನ್ನು ನಿರ್ಧರಿಸಲು ಬ್ರೌಸರ್‌ಗೆ ಅನೇಕ ಲೇಔಟ್ ಪಾಸ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಬೇಕಾಗಬಹುದು. ಇದು ಗಮನಾರ್ಹ ಕಾರ್ಯಕ್ಷಮತೆಯ ಓವರ್‌ಹೆಡ್‌ಗೆ ಕಾರಣವಾಗಬಹುದು. `contain-intrinsic-size` ಪ್ರಾಪರ್ಟಿಯು ಅದರ ವಿಷಯವನ್ನು ಲೋಡ್ ಮಾಡುವ ಅಥವಾ ಲೇಔಟ್ ಮಾಡುವ ಮೊದಲು ಕಂಟೇನರ್‌ಗೆ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಗಾತ್ರವನ್ನು ಒದಗಿಸುವ ಮೂಲಕ ಈ ಚಕ್ರವನ್ನು ಮುರಿಯಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

`contain-intrinsic-size` ಪ್ರಾಪರ್ಟಿಯು ಎಲಿಮೆಂಟ್‌ಗೆ ಯಾವುದೇ ವಿಷಯವಿಲ್ಲದಿದ್ದಾಗ ಅದರ "ಆಂತರಿಕ" ಗಾತ್ರವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ, ವಿಷಯವು ವಾಸ್ತವವಾಗಿ ರೆಂಡರ್ ಆಗುವ ಮೊದಲು ಅದರ ಗಾತ್ರವನ್ನು ಅಂದಾಜು ಮಾಡಲು ಬ್ರೌಸರ್‌ಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. `contain: content` ಅಥವಾ `contain: size` ಹೊಂದಿರುವ ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.

ಉದಾಹರಣೆ:

            .container {
  container-type: inline-size;
  contain: content; /* Or contain: size */
  contain-intrinsic-size: 300px; /* Provide a placeholder width */
}

            

              
                Copy
              
            
          

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

ಪರಿಗಣನೆಗಳು:

• `contain-intrinsic-size` ಮೌಲ್ಯವು ಕಂಟೇನರ್‌ನ ನಿರೀಕ್ಷಿತ ಗಾತ್ರದ ಸಮಂಜಸವಾದ ಅಂದಾಜು ಆಗಿರಬೇಕು. ನಿಜವಾದ ವಿಷಯವು ಗಮನಾರ್ಹವಾಗಿ ದೊಡ್ಡದಾಗಿದ್ದರೆ ಅಥವಾ ಚಿಕ್ಕದಾಗಿದ್ದರೆ, ಅದು ಇನ್ನೂ ಲೇಔಟ್ ಶಿಫ್ಟ್‌ಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು.
• ಈ ಪ್ರಾಪರ್ಟಿಯು `contain: content` ಅಥವಾ `contain: size` ನೊಂದಿಗೆ ಬಳಸಿದಾಗ ಅತ್ಯಂತ ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ, ಇದು ಕಂಟೇನರ್ ಅನ್ನು ಅದರ ಸುತ್ತಮುತ್ತಲಿನಿಂದ ಪ್ರತ್ಯೇಕಿಸುತ್ತದೆ ಮತ್ತು ಇತರ ಎಲಿಮೆಂಟ್‌ಗಳ ಲೇಔಟ್ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರದಂತೆ ತಡೆಯುತ್ತದೆ.

4. ಫೀಚರ್ ಡಿಟೆಕ್ಷನ್ ಮತ್ತು ಪಾಲಿಫಿಲ್‌ಗಳು

ಎಲ್ಲಾ ಬ್ರೌಸರ್‌ಗಳು ಇನ್ನೂ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ. ಫೀಚರ್ ಡಿಟೆಕ್ಷನ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು ಮತ್ತು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಸೂಕ್ತವಾದ ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಒದಗಿಸುವುದು ಮುಖ್ಯವಾಗಿದೆ. ಕಂಟೇನರ್ ಕ್ವೆರಿ ಬೆಂಬಲವನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಮತ್ತು ಅಗತ್ಯವಿದ್ದರೆ ಪಾಲಿಫಿಲ್ ಅನ್ನು ಷರತ್ತುಬದ್ಧವಾಗಿ ಲೋಡ್ ಮಾಡಲು ನೀವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸಬಹುದು.

ಉದಾಹರಣೆ:

            if (!('container' in document.documentElement.style)) {
  // Container queries are not supported, load a polyfill
  const script = document.createElement('script');
  script.src = 'path/to/container-query-polyfill.js';
  document.head.appendChild(script);
}

            

              
                Copy
              
            
          

ಪರ್ಯಾಯವಾಗಿ, ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಪರ್ಯಾಯ ಶೈಲಿಗಳನ್ನು ಒದಗಿಸಲು ನೀವು CSS ಫೀಚರ್ ಕ್ವೆರಿಗಳನ್ನು (`\@supports`) ಬಳಸಬಹುದು. ಇದು ವಿಭಿನ್ನ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಸ್ಥಿರವಾದ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

            \@supports not (container-type: inline-size) {
  /* Styles for browsers that don't support container queries */
  .container .element {
    font-size: 16px; /* Fallback style */
  }
}

\@supports (container-type: inline-size) {
  .container {
    container-type: inline-size;
  }
  .container .element {
    \@container (min-width: 500px) {
      font-size: 20px; /* Container query style */
    }
  }
}

            

              
                Copy
              
            
          

ಈ ವಿಧಾನವು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಕಾರ್ಯನಿರ್ವಹಣೆಯನ್ನು ಮತ್ತು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಸ್ಥಳೀಯ ಕಂಟೇನರ್ ಕ್ವೆರಿ ಬೆಂಬಲವಿಲ್ಲದ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿಯೂ ಸಹ.

ದಕ್ಷ CSS ಸೆಲೆಕ್ಟರ್ ಬಳಕೆ

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

1. ಸೆಲೆಕ್ಟರ್ ನಿರ್ದಿಷ್ಟತೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುವುದು

ಸೆಲೆಕ್ಟರ್ ನಿರ್ದಿಷ್ಟತೆಯು ಒಂದೇ ಎಲಿಮೆಂಟ್‌ಗೆ ಅನೇಕ ನಿಯಮಗಳು ಅನ್ವಯವಾದಾಗ ಯಾವ CSS ನಿಯಮವು ಆದ್ಯತೆ ಪಡೆಯುತ್ತದೆ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟವಾದ ಸೆಲೆಕ್ಟರ್‌ಗಳು ಕಡಿಮೆ ನಿರ್ದಿಷ್ಟವಾದ ಸೆಲೆಕ್ಟರ್‌ಗಳಿಗಿಂತ ಮೌಲ್ಯಮಾಪನ ಮಾಡಲು ಹೆಚ್ಚು ಗಣನೀಯವಾಗಿ ದುಬಾರಿಯಾಗಿರುತ್ತವೆ. ನಿಮ್ಮ ಕಂಟೇನರ್ ಕ್ವೆರಿ ಸೆಲೆಕ್ಟರ್‌ಗಳಲ್ಲಿ ಅನಗತ್ಯ ನಿರ್ದಿಷ್ಟತೆಯನ್ನು ತಪ್ಪಿಸಿ.

ಉದಾಹರಣೆ:

ಅದಕ್ಷ:

            .container div.article p.article__text {
  \@container (min-width: 500px) {
    font-size: 1.1em;
  }
}

            

              
                Copy
              
            
          

ದಕ್ಷ:

            .article__text {
  \@container (min-width: 500px) {
    font-size: 1.1em;
  }
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಎರಡನೇ ಸೆಲೆಕ್ಟರ್ ಮೊದಲನೆಯದಕ್ಕಿಂತ ಹೆಚ್ಚು ಸರಳ ಮತ್ತು ಕಡಿಮೆ ನಿರ್ದಿಷ್ಟವಾಗಿದೆ, ಇದು ಮೌಲ್ಯಮಾಪನ ಮಾಡಲು ವೇಗವಾಗಿರುತ್ತದೆ. ಎಲಿಮೆಂಟ್‌ಗಳ ಇಂತಹ ಸಂಕ್ಷಿಪ್ತ ಗುರಿಯನ್ನು ಅನುಮತಿಸಲು ನೀವು ಅನನ್ಯವಾಗಿ ಹೆಸರಿಸಲಾದ ಕ್ಲಾಸ್‌ಗಳನ್ನು ಹೊಂದಿರುವಿರಾ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

2. ಯೂನಿವರ್ಸಲ್ ಸೆಲೆಕ್ಟರ್ (*) ಅನ್ನು ತಪ್ಪಿಸುವುದು

ಯೂನಿವರ್ಸಲ್ ಸೆಲೆಕ್ಟರ್ (`*`) ಪುಟದಲ್ಲಿನ ಎಲ್ಲಾ ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ. ಇದನ್ನು ಕಂಟೇನರ್ ಕ್ವೆರಿಯೊಳಗೆ ಬಳಸುವುದು ಅತ್ಯಂತ ಅದಕ್ಷವಾಗಬಹುದು, ಏಕೆಂದರೆ ಇದು ಪ್ರತಿ ಎಲಿಮೆಂಟ್‌ಗೆ ಕ್ವೆರಿಯನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡಲು ಬ್ರೌಸರ್ ಅನ್ನು ಒತ್ತಾಯಿಸುತ್ತದೆ. ನಿಮ್ಮ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳಲ್ಲಿ ಯೂನಿವರ್ಸಲ್ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಿ.

ಉದಾಹರಣೆ:

ಅದಕ್ಷ:

            .container * {
  \@container (min-width: 500px) {
    margin: 0;
  }
}

            

              
                Copy
              
            
          

ಬದಲಾಗಿ, ಕಂಟೇನರ್ ಕ್ವೆರಿಯೊಳಗೆ ಶೈಲಿ ನೀಡಬೇಕಾದ ನಿರ್ದಿಷ್ಟ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಗುರಿಯಾಗಿಸಿ.

ದಕ್ಷ:

            .container .article, .container .sidebar {
  \@container (min-width: 500px) {
    margin: 0;
  }
}

            

              
                Copy
              
            
          

3. `content-visibility` ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸುವುದು

`content-visibility` ಪ್ರಾಪರ್ಟಿಯು ಎಲಿಮೆಂಟ್‌ನ ವಿಷಯವು ರೆಂಡರ್ ಆಗಬೇಕೆ ಅಥವಾ ಬೇಡವೇ ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. `auto` ಗೆ ಹೊಂದಿಸಿದಾಗ, ಎಲಿಮೆಂಟ್ ಆಫ್‌ಸ್ಕ್ರೀನ್‌ನಲ್ಲಿದ್ದರೆ ಬ್ರೌಸರ್ ಅದರ ವಿಷಯವನ್ನು ರೆಂಡರ್ ಮಾಡುವುದನ್ನು ಬಿಟ್ಟುಬಿಡುತ್ತದೆ. ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸಬಹುದು, ವಿಶೇಷವಾಗಿ ಅನೇಕ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳಿರುವ ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳಿಗೆ.

ಉದಾಹರಣೆ:

            .offscreen-content {
  content-visibility: auto;
}

            

              
                Copy
              
            
          

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

ಬ್ರೌಸರ್ ರಿಫ್ಲೋಗಳನ್ನು ಕಡಿಮೆ ಮಾಡುವುದು

ಬ್ರೌಸರ್ ರಿಫ್ಲೋಗಳು ಪುಟದ ಲೇಔಟ್ ಬದಲಾದಾಗ ಸಂಭವಿಸುವ ಗಣನೀಯವಾಗಿ ದುಬಾರಿ ಕಾರ್ಯಾಚರಣೆಗಳಾಗಿವೆ. ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಎಲಿಮೆಂಟ್‌ಗಳ ಗಾತ್ರ ಅಥವಾ ಸ್ಥಾನದಲ್ಲಿ ಬದಲಾವಣೆಗಳನ್ನು ಉಂಟುಮಾಡಿದರೆ ರಿಫ್ಲೋಗಳನ್ನು ಪ್ರಚೋದಿಸಬಹುದು. ಕಂಟೇನರ್ ಕ್ವೆರಿ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ರಿಫ್ಲೋಗಳನ್ನು ಕಡಿಮೆ ಮಾಡುವುದು ಬಹಳ ಮುಖ್ಯ.

1. `width` ಮತ್ತು `height` ಬದಲು `transform` ಬಳಸುವುದು

ಒಂದು ಎಲಿಮೆಂಟ್‌ನ `width` ಅಥವಾ `height` ಅನ್ನು ಬದಲಾಯಿಸುವುದು ರಿಫ್ಲೋವನ್ನು ಪ್ರಚೋದಿಸಬಹುದು, ಏಕೆಂದರೆ ಇದು ಸುತ್ತಮುತ್ತಲಿನ ಎಲಿಮೆಂಟ್‌ಗಳ ಲೇಔಟ್ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ. ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸಲು ಅಥವಾ ಮರುಸ್ಥಾನಗೊಳಿಸಲು `transform` ಪ್ರಾಪರ್ಟಿಯನ್ನು (ಉದಾಹರಣೆಗೆ, `scale()`, `translate()`) ಬಳಸುವುದು ಸಾಮಾನ್ಯವಾಗಿ ಹೆಚ್ಚು ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳದ್ದಾಗಿದೆ, ಏಕೆಂದರೆ ಇದು ಇತರ ಎಲಿಮೆಂಟ್‌ಗಳ ಲೇಔಟ್ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ.

ಉದಾಹರಣೆ:

ಅದಕ್ಷ:

            .element {
  \@container (min-width: 500px) {
    width: 200px;
  }
}

            

              
                Copy
              
            
          

ದಕ್ಷ:

            .element {
  \@container (min-width: 500px) {
    transform: scaleX(1.2); /* Equivalent to increasing width by 20% */
  }
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `transform: scaleX()` ಬಳಸುವುದು ರಿಫ್ಲೋವನ್ನು ಪ್ರಚೋದಿಸುವುದನ್ನು ತಪ್ಪಿಸುತ್ತದೆ, ಏಕೆಂದರೆ ಇದು ಸುತ್ತಮುತ್ತಲಿನ ಎಲಿಮೆಂಟ್‌ಗಳ ಲೇಔಟ್ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ.

2. ಒತ್ತಾಯದ ಸಿಂಕ್ರೊನಸ್ ಲೇಔಟ್‌ಗಳನ್ನು ತಪ್ಪಿಸುವುದು

ಒತ್ತಾಯದ ಸಿಂಕ್ರೊನಸ್ ಲೇಔಟ್ ಸಂಭವಿಸುವುದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೇಔಟ್-ಬದಲಾಯಿಸುವ ಕಾರ್ಯಾಚರಣೆಯ ನಂತರ ಲೇಔಟ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು (ಉದಾಹರಣೆಗೆ, `offsetWidth`, `offsetHeight`) ಓದಿದಾಗ. ಇದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮುಂದುವರಿಯುವ ಮೊದಲು ಬ್ರೌಸರ್ ಅನ್ನು ಲೇಔಟ್ ಲೆಕ್ಕಾಚಾರವನ್ನು ನಿರ್ವಹಿಸಲು ಒತ್ತಾಯಿಸುತ್ತದೆ, ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಯಾಗಬಹುದು.

ಕಂಟೇನರ್ ಕ್ವೆರಿಯೊಳಗೆ ಶೈಲಿಗಳನ್ನು ಬದಲಾಯಿಸಿದ ತಕ್ಷಣ ಲೇಔಟ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಓದುವುದನ್ನು ತಪ್ಪಿಸಿ. ಬದಲಾಗಿ, ಒತ್ತಾಯದ ಸಿಂಕ್ರೊನಸ್ ಲೇಔಟ್‌ಗಳ ಸಂಖ್ಯೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಲು ನಿಮ್ಮ ಲೇಔಟ್ ಓದುವಿಕೆ ಮತ್ತು ಬರವಣಿಗೆಗಳನ್ನು ಬ್ಯಾಚ್ ಮಾಡಿ.

ಉದಾಹರಣೆ:

ತಪ್ಪಿಸಿ:

            .element {
  \@container (min-width: 500px) {
    width: 200px;
    // Immediately read the width, forcing a synchronous layout
    const elementWidth = element.offsetWidth;
    console.log('Width:', elementWidth);
  }
}

            

              
                Copy
              
            
          

ಬದಲಾಗಿ, ಕಂಟೇನರ್ ಕ್ವೆರಿಯನ್ನು ಅನ್ವಯಿಸುವ ಮೊದಲು ಅಥವಾ ನಂತರ ಲೇಔಟ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಓದಿ, ಅಥವಾ ಮುಂದಿನ ಫ್ರೇಮ್‌ವರೆಗೆ ಓದುವಿಕೆಯನ್ನು ಮುಂದೂಡಲು requestAnimationFrame ಅನ್ನು ಬಳಸಿ.

3. CSS ಕಂಟೈನ್‌ಮೆಂಟ್ ಅನ್ನು ಬಳಸುವುದು

`contain` ಪ್ರಾಪರ್ಟಿಯು ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಅವುಗಳ ಸುತ್ತಮುತ್ತಲಿನಿಂದ ಪ್ರತ್ಯೇಕಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಅವುಗಳು ಇತರ ಎಲಿಮೆಂಟ್‌ಗಳ ಲೇಔಟ್ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರದಂತೆ ತಡೆಯುತ್ತದೆ. ಇದು ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳಿಂದ ಪ್ರಚೋದಿಸಲ್ಪಟ್ಟ ರಿಫ್ಲೋಗಳ ವ್ಯಾಪ್ತಿಯನ್ನು ಕಡಿಮೆ ಮಾಡಬಹುದು.

`contain` ಪ್ರಾಪರ್ಟಿಯು ಹಲವಾರು ಮೌಲ್ಯಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ, ಅವುಗಳೆಂದರೆ:

• `contain: none;` (ಡೀಫಾಲ್ಟ್): ಯಾವುದೇ ಕಂಟೈನ್‌ಮೆಂಟ್ ಅನ್ವಯಿಸುವುದಿಲ್ಲ.
• `contain: strict;`: ಎಲ್ಲಾ ಕಂಟೈನ್‌ಮೆಂಟ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು (size, layout, style, paint) ಅನ್ವಯಿಸುತ್ತದೆ.
• `contain: content;`: layout, style, ಮತ್ತು paint ಕಂಟೈನ್‌ಮೆಂಟ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ.
• `contain: size;`: size ಕಂಟೈನ್‌ಮೆಂಟ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ, ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರವು ಅದರ ಪೋಷಕರ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರದಂತೆ ಖಚಿತಪಡಿಸುತ್ತದೆ.
• `contain: layout;`: layout ಕಂಟೈನ್‌ಮೆಂಟ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ, ಎಲಿಮೆಂಟ್‌ನ ಲೇಔಟ್ ಅದರ ಸಹೋದರರು ಅಥವಾ ಪೋಷಕರ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರದಂತೆ ಖಚಿತಪಡಿಸುತ್ತದೆ.
• `contain: style;`: style ಕಂಟೈನ್‌ಮೆಂಟ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ, ಎಲಿಮೆಂಟ್‌ನ ಶೈಲಿಗಳು ಇತರ ಎಲಿಮೆಂಟ್‌ಗಳ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರದಂತೆ ಖಚಿತಪಡಿಸುತ್ತದೆ.
• `contain: paint;`: paint ಕಂಟೈನ್‌ಮೆಂಟ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ, ಎಲಿಮೆಂಟ್‌ನ ಪೇಂಟಿಂಗ್ ಇತರ ಎಲಿಮೆಂಟ್‌ಗಳ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರದಂತೆ ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ:

            .container {
  container-type: inline-size;
  contain: layout; /* Or contain: content, contain: strict */
}

            

              
                Copy
              
            
          

`contain: layout` ಅನ್ನು ಅನ್ವಯಿಸುವ ಮೂಲಕ, ನೀವು ಕಂಟೇನರ್‌ನ ಲೇಔಟ್‌ನಲ್ಲಿನ ಬದಲಾವಣೆಗಳು ಅದರ ಸಹೋದರರು ಅಥವಾ ಪೋಷಕರ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರದಂತೆ ತಡೆಯಬಹುದು, ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳಿಂದ ಪ್ರಚೋದಿಸಲ್ಪಟ್ಟ ರಿಫ್ಲೋಗಳ ವ್ಯಾಪ್ತಿಯನ್ನು ಕಡಿಮೆ ಮಾಡಬಹುದು. ನಿಮ್ಮ ನಿರ್ದಿಷ್ಟ ಅಗತ್ಯಗಳಿಗೆ ಅನುಗುಣವಾಗಿ ಸೂಕ್ತವಾದ ಕಂಟೈನ್‌ಮೆಂಟ್ ಮೌಲ್ಯವನ್ನು ಆಯ್ಕೆಮಾಡಿ.

ಕಾರ್ಯಕ್ಷಮತೆ ವಿಶ್ಲೇಷಣೆಗಾಗಿ ಪರಿಕರಗಳು ಮತ್ತು ತಂತ್ರಗಳು

ಪರಿಣಾಮಕಾರಿ ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗೆ ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸುವ ಮತ್ತು ಅಳೆಯುವ ಸಾಮರ್ಥ್ಯದ ಅಗತ್ಯವಿದೆ. ಕಂಟೇನರ್ ಕ್ವೆರಿ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ವಿಶ್ಲೇಷಿಸಲು ಹಲವಾರು ಪರಿಕರಗಳು ಮತ್ತು ತಂತ್ರಗಳು ನಿಮಗೆ ಸಹಾಯ ಮಾಡಬಹುದು:

• ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳು: ಹೆಚ್ಚಿನ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳು (Chrome, Firefox, Safari) CSS ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪ್ರೊಫೈಲ್ ಮಾಡಲು, ರಿಫ್ಲೋಗಳನ್ನು ಗುರುತಿಸಲು, ಮತ್ತು ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡಲು ಕಳೆದ ಸಮಯವನ್ನು ಅಳೆಯಲು ಬಳಸಬಹುದಾದ ಶಕ್ತಿಯುತ ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ. ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಚಟುವಟಿಕೆಯ ಟೈಮ್‌ಲೈನ್ ಅನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡಲು ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಬಹುದಾದ ಪ್ರದೇಶಗಳನ್ನು ಗುರುತಿಸಲು "Performance" ಟ್ಯಾಬ್ ಬಳಸಿ.
• ಲೈಟ್‌ಹೌಸ್: ಲೈಟ್‌ಹೌಸ್ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಕಾರ್ಯಕ್ಷಮತೆ, ಪ್ರವೇಶಸಾಧ್ಯತೆ ಮತ್ತು ಇತರ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳಿಗಾಗಿ ಆಡಿಟ್ ಮಾಡುವ ಸ್ವಯಂಚಾಲಿತ ಸಾಧನವಾಗಿದೆ. ಇದು ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳಿಗೆ ಸಂಬಂಧಿಸಿದ ಸಂಭಾವ್ಯ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಬಹುದು ಮತ್ತು ಸುಧಾರಣೆಗೆ ಶಿಫಾರಸುಗಳನ್ನು ಒದಗಿಸಬಹುದು. ಇದು ಈಗ ಕ್ರೋಮ್ ಡೆವ್ ಟೂಲ್ಸ್‌ನಲ್ಲಿ ನಿರ್ಮಿತವಾಗಿದೆ.
• ವೆಬ್‌ಪೇಜ್‌ಟೆಸ್ಟ್: ವೆಬ್‌ಪೇಜ್‌ಟೆಸ್ಟ್ ಒಂದು ಉಚಿತ ಆನ್‌ಲೈನ್ ಸಾಧನವಾಗಿದ್ದು, ವಿಭಿನ್ನ ಸ್ಥಳಗಳು ಮತ್ತು ನೆಟ್‌ವರ್ಕ್ ಪರಿಸ್ಥಿತಿಗಳಿಂದ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರೀಕ್ಷಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಪ್ರಪಂಚದಾದ್ಯಂತದ ಬಳಕೆದಾರರಿಗೆ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದರ ಕುರಿತು ಇದು ಅಮೂಲ್ಯವಾದ ಒಳನೋಟಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.
• ಸಿಎಸ್ಎಸ್ ಸ್ಟಾಟ್ಸ್: ಸಿಎಸ್ಎಸ್ ಫೈಲ್‌ಗಳನ್ನು ವಿಶ್ಲೇಷಿಸಲು ಬಳಸುವ ಸಾಧನ. ಇದು ಸೆಲೆಕ್ಟರ್ ನಿರ್ದಿಷ್ಟತೆ, ಅನನ್ಯ ಬಣ್ಣಗಳ ಸಂಖ್ಯೆ ಮತ್ತು ಇನ್ನೂ ಹೆಚ್ಚಿನ ಅಂಕಿಅಂಶಗಳನ್ನು ವರದಿ ಮಾಡುತ್ತದೆ.

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

ನೈಜ-ಪ್ರಪಂಚದ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಕೇಸ್ ಸ್ಟಡೀಸ್

ಕಂಟೇನರ್ ಕ್ವೆರಿ ಆಪ್ಟಿಮೈಸೇಶನ್‌ನ ಪ್ರಾಯೋಗಿಕ ಪ್ರಯೋಜನಗಳನ್ನು ವಿವರಿಸಲು, ಕೆಲವು ನೈಜ-ಪ್ರಪಂಚದ ಉದಾಹರಣೆಗಳನ್ನು ಪರಿಗಣಿಸೋಣ:

1. ಇ-ಕಾಮರ್ಸ್ ಪ್ರಾಡಕ್ಟ್ ಗ್ರಿಡ್

ಒಂದು ಇ-ಕಾಮರ್ಸ್ ವೆಬ್‌ಸೈಟ್ ಉತ್ಪನ್ನ ಪಟ್ಟಿಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ಪ್ರಾಡಕ್ಟ್ ಗ್ರಿಡ್ ಅನ್ನು ಬಳಸುತ್ತದೆ. ಪ್ರತಿ ಉತ್ಪನ್ನ ಐಟಂ ಒಂದು ಚಿತ್ರ, ಶೀರ್ಷಿಕೆ, ಬೆಲೆ, ಮತ್ತು "ಕಾರ್ಟ್‌ಗೆ ಸೇರಿಸಿ" ಬಟನ್ ಅನ್ನು ಹೊಂದಿರುತ್ತದೆ. ಪ್ರಾಡಕ್ಟ್ ಗ್ರಿಡ್‌ನ ಅಗಲವನ್ನು ಆಧರಿಸಿ ಉತ್ಪನ್ನ ಐಟಂಗಳ ಲೇಔಟ್ ಮತ್ತು ಫಾಂಟ್ ಗಾತ್ರಗಳನ್ನು ಸರಿಹೊಂದಿಸಲು ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.

ಸವಾಲು: ಪ್ರಾಡಕ್ಟ್ ಗ್ರಿಡ್‌ನಲ್ಲಿ ನೂರಾರು ಉತ್ಪನ್ನ ಐಟಂಗಳಿವೆ, ಮತ್ತು ಬಳಕೆದಾರರು ಬ್ರೌಸರ್ ವಿಂಡೋವನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸಿದಾಗ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಆಗಾಗ್ಗೆ ಪ್ರಚೋದಿಸಲ್ಪಡುತ್ತವೆ. ಇದು ನಿಧಾನವಾದ ಪುಟ ಲೋಡ್ ಸಮಯಗಳಿಗೆ ಮತ್ತು ಜರ್ಕಿ ಸ್ಕ್ರೋಲಿಂಗ್‌ಗೆ ಕಾರಣವಾಗುತ್ತದೆ.

ಪರಿಹಾರ:

• ಆಪ್ಟಿಮೈಸ್ಡ್ ಸೆಲೆಕ್ಟರ್‌ಗಳು: ನಿರ್ದಿಷ್ಟತೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಕಂಟೇನರ್ ಕ್ವೆರಿ ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಸರಳೀಕರಿಸಲಾಗಿದೆ.
• ಡಿಬೌನ್ಸ್ಡ್ ಅಪ್‌ಡೇಟ್‌ಗಳು: ವಿಂಡೋ ಮರುಗಾತ್ರಗೊಳಿಸುವಾಗ ಅತಿಯಾದ ಮರುಲೆಕ್ಕಾಚಾರಗಳನ್ನು ತಪ್ಪಿಸಲು ಕಂಟೇನರ್ ಕ್ವೆರಿ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಡಿಬೌನ್ಸ್ ಮಾಡಲಾಗಿದೆ.
• ಮರುಗಾತ್ರಗೊಳಿಸಲು `transform` ಬಳಕೆ: ರಿಫ್ಲೋಗಳನ್ನು ತಪ್ಪಿಸಲು `width` ಮತ್ತು `height` ಅನ್ನು `transform: scale()` ನೊಂದಿಗೆ ಬದಲಾಯಿಸಲಾಗಿದೆ.
• `content-visibility`: ಆಫ್‌ಸ್ಕ್ರೀನ್ ಉತ್ಪನ್ನ ಐಟಂಗಳನ್ನು ರೆಂಡರ್ ಮಾಡುವುದನ್ನು ತಪ್ಪಿಸಲು `content-visibility: auto` ಅನ್ನು ಬಳಸಲಾಗಿದೆ.

ಫಲಿತಾಂಶ: ಪುಟ ಲೋಡ್ ಸಮಯವನ್ನು 30% ರಷ್ಟು ಸುಧಾರಿಸಲಾಗಿದೆ ಮತ್ತು ಸ್ಕ್ರೋಲಿಂಗ್ ಜರ್ಕ್ ಅನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಕಡಿಮೆ ಮಾಡಲಾಗಿದೆ.

2. ಸುದ್ದಿ ವೆಬ್‌ಸೈಟ್ ಲೇಖನ ಲೇಔಟ್

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

ಸವಾಲು: ಲೇಖನದ ವಿಷಯವು ಪಠ್ಯ, ಚಿತ್ರಗಳು, ವೀಡಿಯೊಗಳು ಮತ್ತು ಎಂಬೆಡೆಡ್ ವಿಜೆಟ್‌ಗಳನ್ನು ಒಳಗೊಂಡಂತೆ ಹೆಚ್ಚಿನ ಸಂಖ್ಯೆಯ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಹೊಂದಿದೆ. ಬಳಕೆದಾರರು ಲೇಖನದ ಮೂಲಕ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಆಗಾಗ್ಗೆ ಪ್ರಚೋದಿಸಲ್ಪಡುತ್ತವೆ, ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.

ಪರಿಹಾರ:

• CSS ಕಂಟೈನ್‌ಮೆಂಟ್ ಬಳಕೆ: ಲೇಔಟ್ ಬದಲಾವಣೆಗಳು ಇತರ ಎಲಿಮೆಂಟ್‌ಗಳ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರದಂತೆ ತಡೆಯಲು ಲೇಖನ ಕಂಟೇನರ್‌ಗೆ `contain: layout` ಅನ್ನು ಅನ್ವಯಿಸಲಾಗಿದೆ.
• `contain-intrinsic-size` ಬಳಕೆ: ಚಿತ್ರಗಳನ್ನು ರೆಂಡರ್ ಮಾಡುವಾಗ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಸೈಜಿಂಗ್‌ಗಾಗಿ `contain-intrinsic-size` ಅನ್ನು ಬಳಸಲಾಗಿದೆ.
• ಮಿನಿಫೈಡ್ CSS: ಅದರ ಗಾತ್ರವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಮತ್ತು ಲೋಡಿಂಗ್ ವೇಗವನ್ನು ಸುಧಾರಿಸಲು CSS ಫೈಲ್ ಅನ್ನು ಮಿನಿಫೈ ಮಾಡಲಾಗಿದೆ.
• ಲೇಜಿ-ಲೋಡೆಡ್ ಚಿತ್ರಗಳು: ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಎಲ್ಲಾ ಚಿತ್ರಗಳ ಮೇಲೆ ಲೇಜಿ ಲೋಡಿಂಗ್ ಅನ್ನು ಅಳವಡಿಸಲಾಗಿದೆ.

ಫಲಿತಾಂಶ: ರಿಫ್ಲೋಗಳನ್ನು 50% ರಷ್ಟು ಕಡಿಮೆ ಮಾಡಲಾಗಿದೆ ಮತ್ತು ಸ್ಕ್ರೋಲಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಲಾಗಿದೆ.

ತೀರ್ಮಾನ

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