CSS @measure: வலை உருவாக்குநர்களுக்கான செயல்திறன் பற்றிய நுண்ணியப் பார்வைகள்

இன்றைய செயல்திறன்-மைய வலை உருவாக்கச் சூழலில், உங்கள் CSS வலைத்தளத்தின் வேகம் மற்றும் பதிலளிக்கும் தன்மையை எவ்வாறு பாதிக்கிறது என்பதைப் புரிந்துகொள்வது மிக முக்கியம். CSS @measure விதியானது, உங்கள் ஸ்டைல்ஷீட்களை விவரணை செய்து மேம்படுத்துவதற்கான ஒரு தரப்படுத்தப்பட்ட, சக்திவாய்ந்த வழியை வழங்குகிறது. இந்தக் கட்டுரை @measure விதியை விரிவாக ஆராய்ந்து, அதன் திறன்களை விளக்கி, உலகெங்கிலும் உள்ள பயனர்களுக்கு வேகமான, திறமையான வலை அனுபவங்களை உருவாக்க நீங்கள் அதை எவ்வாறு பயன்படுத்தலாம் என்பதை விளக்குகிறது.

CSS @measure விதி என்றால் என்ன?

@measure விதியானது, CSS பாணிகளின் செயலாக்கம் குறித்த விரிவான செயல்திறன் அளவீடுகளை உருவாக்குநர்களுக்கு வழங்குவதற்காக வடிவமைக்கப்பட்ட ஒரு CSS at-rule ஆகும். இது உங்கள் குறியீட்டின் குறிப்பிட்ட பகுதிகளை வரையறுக்கவும், அந்தப் பகுதிகளை உலாவி ரெண்டர் செய்ய எடுக்கும் நேரத்தைக் கண்காணிக்கவும் உங்களை அனுமதிக்கிறது. இந்த நுண்ணிய அளவீடு செயல்திறன் தடைகளை அடையாளம் காணவும், மேம்படுத்தல்களைப் பரிசோதிக்கவும், அவற்றின் செயல்திறனைச் சரிபார்க்கவும் உதவுகிறது.

பாரம்பரிய உலாவி டெவலப்பர் கருவிகள் பக்க ரெண்டரிங்கின் பரந்த கண்ணோட்டத்தை வழங்கும் நிலையில், @measure குறிப்பிட்ட CSS குறியீட்டுத் தொகுதிகளைக் குறிவைக்கிறது, இது செயல்திறன் சிக்கல்களின் மூலத்தைக் கண்டறிவதை எளிதாக்குகிறது.

தொடரியல் மற்றும் அடிப்படை பயன்பாடு

@measure விதியின் அடிப்படை தொடரியல் பின்வருமாறு:

@measure அளவீட்டின்-பெயர் {
/* அளவிடப்பட வேண்டிய CSS விதிகள் */
}

• @measure: இது at-ruleக்கான முக்கியச் சொல்.
• அளவீட்டின்-பெயர்: அளவீட்டிற்கான ஒரு தனிப்பட்ட அடையாளங்காட்டி. உங்கள் உலாவியின் செயல்திறன் கருவிகளில் முடிவுகளை அடையாளம் காண இந்தப் பெயர் பயன்படுத்தப்படும். 'hero-section-render' அல்லது 'product-listing-layout' போன்ற விளக்கமான பெயரைத் தேர்வு செய்யவும்.
• { /* அளவிடப்பட வேண்டிய CSS விதிகள் */ }: நீங்கள் செயல்திறனை அளவிட விரும்பும் CSS விதிகளின் தொகுதி.

உதாரணம்:

@measure hero-image-render { .hero { background-image: url("hero.jpg"); height: 500px; } }

இந்த எடுத்துக்காட்டில், hero-image-render அளவீட்டைப் பயன்படுத்தும்போது .hero வகுப்பிற்குள் உள்ள CSS விதிகளை ரெண்டர் செய்ய எடுக்கும் நேரத்தை உலாவி அளவிடும். இதில் பட ஏற்றம் மற்றும் ஆரம்ப ரெண்டரிங் நேரம் ஆகியவை அடங்கும்.

உலாவிகளில் @measure-ஐ இயக்குதல்

தற்போது, @measure விதி ஒரு சோதனை அம்சமாகும், மேலும் இது பெரும்பாலான உலாவிகளில் இயல்பாக இயக்கப்படவில்லை. நீங்கள் பொதுவாக உலாவி கொடிகள் அல்லது டெவலப்பர் அமைப்புகள் மூலம் இதை இயக்க வேண்டும். சில பிரபலமான உலாவிகளில் இதை எப்படி இயக்குவது என்பது இங்கே:

Google Chrome (மற்றும் Edge, Brave, Opera போன்ற Chromium-அடிப்படையிலான உலாவிகள்)

1. Chrome-ஐத் திறந்து, முகவரிப் பட்டியில் chrome://flags என்பதற்குச் செல்லவும்.
2. "CSS Performance Measure API"-ஐத் தேடவும்.
3. அந்தக் கொடியை இயக்கவும்.
4. Chrome-ஐ மறுதொடக்கம் செய்யவும்.

Firefox

1. Firefox-ஐத் திறந்து, முகவரிப் பட்டியில் about:config என்பதற்குச் செல்லவும்.
2. layout.css.at-measure.enabled-ஐத் தேடவும்.
3. மதிப்பை true என அமைக்கவும்.
4. Firefox-ஐ மறுதொடக்கம் செய்யவும்.

முக்கிய குறிப்பு: ஒரு சோதனை அம்சமாக இருப்பதால், உங்கள் உலாவி பதிப்பைப் பொறுத்து சரியான படிகள் மற்றும் கிடைக்கும் தன்மை மாறக்கூடும்.

@measure முடிவுகளை விளக்குவது எப்படி

நீங்கள் @measure விதியை இயக்கி, அதை உங்கள் CSS-ல் சேர்த்தவுடன், உங்கள் உலாவியின் டெவலப்பர் கருவிகளில் செயல்திறன் அளவீடுகளைக் காணலாம். முடிவுகளின் சரியான இடம் உலாவியைப் பொறுத்து மாறுபடலாம், ஆனால் நீங்கள் பொதுவாக அவற்றை செயல்திறன் பேனல் அல்லது ஒரு பிரத்யேக CSS செயல்திறன் பிரிவில் காணலாம்.

முடிவுகளில் பொதுவாக இவை அடங்கும்:

• அளவீட்டின் பெயர்: நீங்கள் @measure விதிக்கு ஒதுக்கிய பெயர் (எ.கா., "hero-image-render").
• கால அளவு: @measure தொகுதிக்குள் உள்ள CSS விதிகளைச் செயல்படுத்த எடுத்த நேரம். இது பெரும்பாலும் மில்லி விநாடிகளில் (ms) அளவிடப்படுகிறது.
• பிற அளவீடுகள்: கூடுதல் அளவீடுகளில் தளவமைப்பு நேரம், பெயிண்ட் நேரம் மற்றும் பிற செயல்திறன் தொடர்பான தரவுகள் இருக்கலாம். கிடைக்கும் குறிப்பிட்ட அளவீடுகள் உலாவியின் செயலாக்கத்தைப் பொறுத்தது.

இந்த முடிவுகளைப் பகுப்பாய்வு செய்வதன் மூலம், ரெண்டர் செய்ய அதிக நேரம் எடுக்கும் CSS குறியீட்டுத் தொகுதிகளை நீங்கள் அடையாளம் கண்டு, பின்னர் அந்தப் பகுதிகளில் உங்கள் மேம்படுத்தல் முயற்சிகளை மையப்படுத்தலாம்.

நடைமுறை உதாரணங்கள் மற்றும் பயன்பாட்டு வழக்குகள்

உங்கள் வலைத்தளத்தின் செயல்திறனை மேம்படுத்த @measure விதியை எவ்வாறு பயன்படுத்தலாம் என்பதற்கான சில நடைமுறை உதாரணங்கள் இங்கே:

1. சிக்கலான செலக்டர்களை மேம்படுத்துதல்

சிக்கலான CSS செலக்டர்களை உலாவி செயலாக்க அதிக கணக்கீட்டுச் செலவு ஆகலாம். @measure விதி மெதுவான செலக்டர்களை அடையாளம் கண்டு சிறந்த செயல்திறனுக்காக அவற்றை மறுசீரமைக்க உதவும்.

உதாரணம்:

@measure complex-selector { .container > div:nth-child(odd) .item a:hover { color: red; } }

complex-selector அளவீடு அதிக கால அளவைக் காட்டினால், கூறுகளுக்கு ஒரு குறிப்பிட்ட வகுப்பைச் சேர்ப்பதன் மூலம் அல்லது வேறு CSS கட்டமைப்பைப் பயன்படுத்துவதன் மூலம் செலக்டரை எளிதாக்க நீங்கள் பரிசீலிக்கலாம்.

2. CSS அனிமேஷன்கள் மற்றும் மாற்றங்களின் தாக்கத்தை அளவிடுதல்

CSS அனிமேஷன்கள் மற்றும் மாற்றங்கள் உங்கள் வலைத்தளத்திற்கு காட்சி முறையீட்டை சேர்க்கலாம், ஆனால் அவை திறமையாக செயல்படுத்தப்படாவிட்டால் செயல்திறனை பாதிக்கலாம். @measure விதி இந்த விளைவுகளின் செயல்திறன் செலவை அளவிட உதவும்.

உதாரணம்:

@measure fade-in-animation { .fade-in { opacity: 0; transition: opacity 0.5s ease-in-out; } .fade-in.visible { opacity: 1; } }

fade-in-animation அளவீடு அதிக கால அளவைக் காட்டினால் அல்லது குறிப்பிடத்தக்க திணறலை (jank) ஏற்படுத்தினால், நீங்கள் வெவ்வேறு மாற்றப் பண்புகளைப் பரிசோதிக்கலாம் (எ.கா., opacity க்கு பதிலாக transform: opacity() ஐப் பயன்படுத்துதல்) அல்லது வன்பொருள்-துரிதப்படுத்தப்பட்ட அனிமேஷன்களைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளலாம்.

3. வெவ்வேறு தளவமைப்பு நுட்பங்களின் செயல்திறனை மதிப்பிடுதல்

வெவ்வேறு CSS தளவமைப்பு நுட்பங்கள் (எ.கா., Flexbox, Grid, float-அடிப்படையிலான தளவமைப்புகள்) தளவமைப்பின் சிக்கலைப் பொறுத்து மாறுபட்ட செயல்திறன் பண்புகளைக் கொண்டிருக்கலாம். @measure விதி வெவ்வேறு தளவமைப்பு அணுகுமுறைகளின் செயல்திறனை ஒப்பிட்டு, உங்கள் குறிப்பிட்ட பயன்பாட்டு வழக்கிற்கு மிகவும் திறமையான ஒன்றைத் தேர்வுசெய்ய உதவும்.

உதாரணம்:

@measure flexbox-layout { .container { display: flex; /* Flexbox தளவமைப்பு விதிகள் */ } } @measure grid-layout { .container { display: grid; /* Grid தளவமைப்பு விதிகள் */ } }

flexbox-layout மற்றும் grid-layout அளவீடுகளின் கால அளவுகளை ஒப்பிடுவதன் மூலம், உங்கள் குறிப்பிட்ட தளவமைப்பு அமைப்புக்கு எந்த தளவமைப்பு நுட்பம் சிறப்பாக செயல்படுகிறது என்பதை நீங்கள் தீர்மானிக்கலாம்.

4. சிக்கலான கூறுகளின் மெதுவான ரெண்டரிங்கை அடையாளம் காணுதல்

வலைத்தளங்கள் மற்றும் பயன்பாடுகள் பெரும்பாலும் ஊடாடும் வரைபடங்கள், தரவு அட்டவணைகள் மற்றும் ரிச் டெக்ஸ்ட் எடிட்டர்கள் போன்ற சிக்கலான கூறுகளைப் பயன்படுத்துகின்றன. இந்த கூறுகளின் ரெண்டரிங் அதிக வளம் தேவைப்படும். ரெண்டரிங் செயல்திறன் சிக்கல்கள் உள்ள கூறுகளை அடையாளம் காண @measure ஐப் பயன்படுத்தவும்.

உதாரணம்:

@measure interactive-map-render { #map { height: 500px; /* வரைபடத் துவக்கம் மற்றும் ரெண்டரிங் குறியீடு */ } }

interactive-map-render அளவீட்டில் அதிக கால அளவு மதிப்புகள் வரைபட ரெண்டரிங் செயல்பாட்டில் உள்ள செயல்திறன் தடைகளைக் குறிக்கின்றன. இது வரைபடத்தின் ரெண்டரிங் அல்காரிதம்கள், தரவு ஏற்றம் அல்லது செயலாக்கத்தின் பிற அம்சங்களை மேம்படுத்துவதில் கவனம் செலுத்த உங்களை அனுமதிக்கிறது.

5. மூன்றாம் தரப்பு CSS-ன் செலவை அளவிடுதல்

பல வலைத்தளங்கள் மூன்றாம் தரப்பு CSS நூலகங்கள் அல்லது கட்டமைப்புகளை (எ.கா., Bootstrap, Tailwind CSS, Materialize) பயன்படுத்துகின்றன. இந்த நூலகங்கள் வசதியான ஸ்டைலிங் மற்றும் தளவமைப்பு அம்சங்களை வழங்கினாலும், அவை செயல்திறன் சுமையையும் அறிமுகப்படுத்தலாம். @measure விதி இந்த நூலகங்களின் செயல்திறன் தாக்கத்தை மதிப்பிட உதவும்.

உதாரணம்:

@measure bootstrap-styles { /* Bootstrap CSS கோப்பின் இறக்குமதி */ @import url("https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"); /* Bootstrap வகுப்புகளின் பயன்பாடு */ .btn { /* ... */ } }

bootstrap-styles கால அளவை அளவிடுவதன் மூலம், Bootstrap ஐப் பயன்படுத்துவதன் செயல்திறன் செலவை நீங்கள் மதிப்பீடு செய்யலாம். கால அளவு அதிகமாக இருந்தால், உங்களுக்குத் தேவையான பாணிகளை மட்டும் சேர்க்க Bootstrap-ஐத் தனிப்பயனாக்குவதைக் கருத்தில் கொள்ளலாம் அல்லது மாற்று, இலகுவான CSS நூலகங்களை ஆராயலாம்.

@measure பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

@measure விதியிலிருந்து ಹೆಚ್ಚಿನ ಪ್ರಯೋಜನವನ್ನು ಪಡೆಯಲು, ಈ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಪರಿಗಣಿಸಿ:

• விளக்கமான பெயர்களைப் பயன்படுத்தவும்: உங்கள் அளவீடுகளுக்கு நீங்கள் எதை அளவிடுகிறீர்கள் என்பதைத் தெளிவாகக் குறிக்கும் அர்த்தமுள்ள பெயர்களைத் தேர்வு செய்யவும். இது முடிவுகளை விளக்குவதையும் செயல்திறன் மேம்பாடுகளைக் கண்காணிப்பதையும் எளிதாக்கும்.
• அளவீடுகளைத் தனிமைப்படுத்தவும்: மிகவும் துல்லியமான முடிவுகளைப் பெற உங்கள் அளவீடுகளைக் குறிப்பிட்ட குறியீட்டுத் தொகுதிகளுக்குத் தனிமைப்படுத்த முயற்சிக்கவும். தொடர்பில்லாத CSS விதிகளைக் கொண்ட பெரிய குறியீட்டுப் பகுதிகளை அளவிடுவதைத் தவிர்க்கவும்.
• பல அளவீடுகளை இயக்கவும்: மிகவும் துல்லியமான சராசரி கால அளவைப் பெற பல அளவீடுகளை இயக்கவும். உலாவி சுமை மற்றும் நெட்வொர்க் நிலைமைகள் போன்ற காரணிகளைப் பொறுத்து செயல்திறன் மாறுபடலாம்.
• வெவ்வேறு சாதனங்கள் மற்றும் உலாவிகளில் சோதிக்கவும்: செயல்திறன் வெவ்வேறு சாதனங்கள் மற்றும் உலாவிகளில் கணிசமாக மாறுபடலாம். உங்கள் மேம்படுத்தல்கள் அனைத்துப் பயனர்களுக்கும் பயனுள்ளதாக இருப்பதை உறுதிசெய்ய பல்வேறு சாதனங்கள் மற்றும் உலாவிகளில் உங்கள் அளவீடுகளைச் சோதிக்கவும்.
• பிற செயல்திறன் கருவிகளுடன் இணைக்கவும்: @measure விதி ஒரு மதிப்புமிக்க கருவி, ஆனால் இது உலாவி டெவலப்பர் கருவிகள், Lighthouse, மற்றும் WebPageTest போன்ற பிற செயல்திறன் கருவிகளுடன் இணைந்து பயன்படுத்தப்பட வேண்டும்.
• உங்கள் கண்டுபிடிப்புகளை ஆவணப்படுத்தவும்: உங்கள் அளவீடுகள், மேம்படுத்தல்கள் மற்றும் செயல்திறனில் அவற்றின் தாக்கம் ஆகியவற்றின் பதிவை வைத்திருங்கள். இது உங்கள் முன்னேற்றத்தைக் கண்காணிக்கவும் மேலும் முன்னேற்றத்திற்கான பகுதிகளை அடையாளம் காணவும் உதவும்.

உலகளாவிய பரிசீலனைகள்

உலகளாவிய பார்வையாளர்களுக்காக CSS செயல்திறனை மேம்படுத்தும்போது, பின்வருவனவற்றைக் கருத்தில் கொள்ளுங்கள்:

• நெட்வொர்க் தாமதம்: வெவ்வேறு புவியியல் இடங்களில் உள்ள பயனர்கள் மாறுபட்ட நெட்வொர்க் தாமதத்தை அனுபவிக்கலாம். HTTP கோரிக்கைகளின் எண்ணிக்கையைக் குறைக்கவும், மெதுவான நெட்வொர்க் இணைப்புகளைக் கொண்ட பயனர்களுக்கு ஏற்றுதல் நேரத்தை மேம்படுத்த உங்கள் ஸ்டைல்ஷீட்களின் அளவைக் குறைக்கவும் உங்கள் CSS-ஐ மேம்படுத்தவும்.
• சாதனத் திறன்கள்: பயனர்கள் மாறுபட்ட செயலாக்க சக்தி மற்றும் நினைவகத்துடன் கூடிய பரந்த அளவிலான சாதனங்களில் உங்கள் வலைத்தளத்தை அணுகலாம். உங்கள் வலைத்தளம் குறைந்த-நிலை சாதனங்களில் சிறப்பாகச் செயல்படுவதை உறுதிசெய்ய உங்கள் CSS-ஐ மேம்படுத்தவும்.
• உள்ளூர்மயமாக்கல்: CSS உள்ளூர்மயமாக்கலால் பாதிக்கப்படலாம். உரை திசை (RTL vs LTR), எழுத்துரு தேர்வுகள் மற்றும் பிற உரை அடிப்படையிலான ஸ்டைலிங்குகள் செயல்திறன் தாக்கங்களைக் கொண்டிருக்கலாம். உங்கள் தளத்தின் உள்ளூர்மயமாக்கப்பட்ட பதிப்புகளைப் பயன்படுத்தி அளவீடுகளைச் சோதிக்கவும்.
• எழுத்துரு ஏற்றம்: தனிப்பயன் எழுத்துருக்கள் பக்க ஏற்றுதல் நேரத்தை கணிசமாக பாதிக்கலாம். font-display: swap, எழுத்துருக்களை முன்கூட்டியே ஏற்றுதல் மற்றும் அதிகபட்ச சுருக்கத்திற்காக வலை எழுத்துரு வடிவங்களைப் (WOFF2) பயன்படுத்துவதன் மூலம் எழுத்துரு ஏற்றத்தை மேம்படுத்தவும்.

வரம்புகள் மற்றும் எதிர்கால திசைகள்

@measure விதி இன்னும் ஒரு சோதனை அம்சமாக உள்ளது மற்றும் சில வரம்புகளைக் கொண்டுள்ளது:

• வரையறுக்கப்பட்ட உலாவி ஆதரவு: முன்னரே குறிப்பிட்டபடி, @measure விதி இன்னும் அனைத்து உலாவிகளாலும் ஆதரிக்கப்படவில்லை.
• நுண்ணிய அளவீடுகள் இல்லை: தற்போதைய செயலாக்கம் கால அளவைத் தாண்டி வரையறுக்கப்பட்ட அளவீடுகளை வழங்குகிறது. எதிர்கால பதிப்புகளில் தளவமைப்பு நேரம், பெயிண்ட் நேரம் மற்றும் நினைவகப் பயன்பாடு போன்ற நுண்ணிய அளவீடுகள் இருக்கலாம்.
• சாத்தியமான செயல்திறன் சுமை: @measure விதியே சில செயல்திறன் சுமைகளை அறிமுகப்படுத்தலாம். உற்பத்திச் சூழல்களில் அதை முடக்குவது முக்கியம்.

இந்த வரம்புகள் இருந்தபோதிலும், @measure விதி CSS செயல்திறன் மேம்படுத்தலுக்கான ஒரு நம்பிக்கைக்குரிய கருவியாகும். உலாவி ஆதரவு மேம்பட்டு மேலும் அம்சங்கள் சேர்க்கப்படுவதால், இது வலை உருவாக்குநரின் கருவிப்பெட்டியின் ஒரு முக்கிய பகுதியாக மாறும் வாய்ப்புள்ளது.

முடிவுரை

CSS @measure விதியானது, தங்கள் CSS பாணிகளின் செயல்திறனைப் புரிந்துகொண்டு மேம்படுத்த விரும்பும் வலை உருவாக்குநர்களுக்கு ஒரு மதிப்புமிக்க கருவியாகும். நுண்ணிய செயல்திறன் பார்வைகளை வழங்குவதன் மூலம், இது செயல்திறன் தடைகளை அடையாளம் காணவும், மேம்படுத்தல்களைப் பரிசோதிக்கவும், உலகெங்கிலும் உள்ள பயனர்களுக்கு வேகமான, திறமையான வலை அனுபவங்களை உருவாக்கவும் உங்களை அனுமதிக்கிறது. இது இன்னும் ஒரு சோதனை அம்சமாக இருந்தாலும், @measure விதி வலை உருவாக்கப் பணிப்பாய்வின் ஒரு முக்கிய பகுதியாக மாறும் ஆற்றலைக் கொண்டுள்ளது.

உங்கள் உலாவியில் @measure விதியை இயக்கவும், அதை உங்கள் CSS குறியீட்டில் சேர்க்கவும், உங்கள் டெவலப்பர் கருவிகளில் முடிவுகளைப் பகுப்பாய்வு செய்யவும், மேலும் அதிலிருந்து ಹೆಚ್ಚಿನ ಪ್ರಯೋಜನವನ್ನು ಪಡೆಯಲು பிற செயல்திறன் கருவிகளுடன் இணைக்கவும் நினைவில் கொள்ளுங்கள். இந்தக் கட்டுரையில் கோடிட்டுக் காட்டப்பட்டுள்ள சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், உங்கள் வலைத்தளத்தின் செயல்திறனை மேம்படுத்தவும், உங்கள் உலகளாவிய பார்வையாளர்களுக்கு சிறந்த பயனர் அனுபவத்தை வழங்கவும் @measure விதியின் சக்தியை நீங்கள் பயன்படுத்தலாம்.

வலை தொடர்ந்து বিকশিত হতে থাকায়, செயல்திறன் மேம்படுத்தல் பெருகிய முறையில் முக்கியமானதாக மாறும். @measure விதி போன்ற கருவிகளை ஏற்றுக்கொள்வதன் மூலம், நீங்கள் வளைவுக்கு முன்னால் இருக்க முடியும் மற்றும் அனைவருக்கும் வேகமான, பதிலளிக்கக்கூடிய மற்றும் பயன்படுத்த மகிழ்ச்சியான வலைத்தளங்களை உருவாக்க முடியும்.