17 ஆகஸ்ட், 2025தமிழ்

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

CSS @benchmark: உகந்த இணைய அனுபவங்களுக்கு செயல்திறன் தரப்படுத்தலில் தேர்ச்சி பெறுதல்

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

CSS செயல்திறன் தடைகளைப் புரிந்துகொள்ளுதல்

@benchmark பற்றி ஆராய்வதற்கு முன், பொதுவான CSS செயல்திறன் தடைகளை அடையாளம் காண்போம்:

சிக்கலான செலக்டர்கள்: அதிகப்படியான குறிப்பிட்ட அல்லது ஆழமாகப் பதிக்கப்பட்ட செலக்டர்கள் ரெண்டரிங் வேகத்தை கணிசமாகக் குறைக்கலாம். எடுத்துக்காட்டாக, #container div.item:nth-child(odd) span a போன்ற ஒரு செலக்டருக்கு, உலாவி DOM மரத்தை பலமுறை கடக்க வேண்டியிருக்கும்.
லேஅவுட் த்ராஷிங்: லேஅவுட் பண்புகளை (எ.கா., offsetWidth, offsetHeight, scrollTop) படித்துவிட்டு, உடனடியாக DOM-ஐ மாற்றுவது பல ரிஃப்ளோக்கள் மற்றும் ரிபெயிண்ட்களைத் தூண்டி, செயல்திறன் சிக்கல்களுக்கு வழிவகுக்கும்.
விலையுயர்ந்த பண்புகள்: box-shadow, filter, மற்றும் transform போன்ற சில CSS பண்புகள், ரெண்டர் செய்வதற்கு கணிணி ரீதியாக அதிக செலவு பிடிப்பவையாக இருக்கலாம், குறிப்பாக அதிக எண்ணிக்கையிலான கூறுகளுக்குப் பயன்படுத்தப்படும்போது அல்லது அனிமேஷன்களில் பயன்படுத்தப்படும்போது.
பெரிய CSS கோப்புகள்: தேவையற்ற அல்லது நகல் எடுக்கப்பட்ட CSS குறியீடு கோப்பின் அளவை அதிகரித்து, நீண்ட பதிவிறக்க நேரங்களுக்கும் மெதுவான பார்சிங்கிற்கும் வழிவகுக்கிறது.
ரெண்டரை-தடுக்கும் CSS: உங்கள் HTML இன் <head> பகுதியில் ஏற்றப்படும் CSS கோப்புகள் பக்கத்தின் ஆரம்ப ரெண்டரிங்கைத் தடுக்கின்றன, இது முதல் உள்ளடக்கம் தோன்றும் நேரம் (FCP) மற்றும் மிகப்பெரிய உள்ளடக்கம் தோன்றும் நேரம் (LCP) ஆகியவற்றைத் தாமதப்படுத்துகிறது.

CSS @benchmark அறிமுகம்

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

@benchmark ஏன் பயன்படுத்த வேண்டும்?

செயல்திறன் தடைகளை அடையாளம் காணுதல்: செயல்திறன் சிக்கல்களை ஏற்படுத்தும் CSS விதிகள் அல்லது பண்புகளைக் கண்டறியவும்.
வெவ்வேறு அணுகுமுறைகளை ஒப்பிடுதல்: மிகவும் திறமையான விருப்பத்தைத் தேர்வுசெய்ய, வெவ்வேறு CSS நுட்பங்களின் (எ.கா., flexbox vs. grid) செயல்திறனை மதிப்பிடவும்.
CSS குறியீட்டை மேம்படுத்துதல்: ரெண்டரிங் வேகத்தை மேம்படுத்தவும், லேஅவுட் த்ராஷிங்கைக் குறைக்கவும் அனுபவத் தரவுகளின் அடிப்படையில் உங்கள் CSS குறியீட்டைச் செம்மைப்படுத்தவும்.
காலப்போக்கில் செயல்திறனைக் கண்காணித்தல்: உங்கள் வலைத்தளம் உருவாகும்போது உங்கள் CSS குறியீட்டின் செயல்திறனைக் கண்காணிக்கவும், புதிய அம்சங்கள் அல்லது மாற்றங்கள் பின்னடைவுகளை அறிமுகப்படுத்தவில்லை என்பதை உறுதிப்படுத்தவும்.

CSS செயல்திறன் தரப்படுத்தலுக்கான கருவிகள் மற்றும் நுட்பங்கள்

CSS செயல்திறன் தரப்படுத்தலுக்கு பல கருவிகள் மற்றும் நுட்பங்களைப் பயன்படுத்தலாம்:

1. உலாவி டெவலப்பர் கருவிகள்

நவீன உலாவி டெவலப்பர் கருவிகள் CSS செயல்திறனைப் பகுப்பாய்வு செய்ய சக்திவாய்ந்த அம்சங்களை வழங்குகின்றன:

செயல்திறன் தாவல் (Performance Tab): நீண்ட பெயிண்ட் நேரங்கள், அதிகப்படியான ரிஃப்ளோக்கள் மற்றும் ஜாவாஸ்கிரிப்ட் மூலம் தூண்டப்பட்ட லேஅவுட் போன்ற செயல்திறன் தடைகளை அடையாளம் காண உலாவியின் ரெண்டரிங் செயல்முறையைப் பதிவுசெய்யவும்.
ரெண்டரிங் தாவல் (Rendering Tab): செயல்திறன் சிக்கல்களைக் காட்சிப்படுத்த, ரிபெயிண்ட்கள், லேஅவுட் ஷிஃப்ட்கள் மற்றும் பிற ரெண்டரிங் தொடர்பான நிகழ்வுகளை முன்னிலைப்படுத்தவும்.
கவரேஜ் தாவல் (Coverage Tab): கோப்பு அளவைக் குறைக்கவும், பதிவிறக்க நேரங்களை மேம்படுத்தவும் பயன்படுத்தப்படாத CSS குறியீட்டை அடையாளம் காணவும்.

உதாரணம்: Chrome DevTools செயல்திறன் தாவலைப் பயன்படுத்துதல்

Chrome DevTools ஐத் திறக்கவும் (Ctrl+Shift+I அல்லது Cmd+Option+I).
செயல்திறன் தாவலுக்குச் செல்லவும்.
பதிவைத் தொடங்க பதிவு (Record) பொத்தானைக் கிளிக் செய்யவும்.
நீங்கள் தரப்படுத்த விரும்பும் CSS விதிகளைத் தூண்டுவதற்கு உங்கள் வலைத்தளத்துடன் தொடர்பு கொள்ளவும்.
பதிவை முடிக்க நிறுத்து (Stop) பொத்தானைக் கிளிக் செய்யவும்.
செயல்திறன் தடைகளைக் கண்டறிய காலவரிசையைப் பகுப்பாய்வு செய்யவும். நீண்ட பெயிண்ட் நேரங்கள், அடிக்கடி நிகழும் ரிஃப்ளோக்கள் மற்றும் விலையுயர்ந்த ஜாவாஸ்கிரிப்ட் செயல்பாடுகளைக் கவனிக்கவும்.

2. லைட்ஹவுஸ் (Lighthouse)

லைட்ஹவுஸ் என்பது வலைப்பக்கங்களின் தரத்தை மேம்படுத்துவதற்கான ஒரு தானியங்கி திறந்த மூலக் கருவியாகும். இது செயல்திறன், அணுகல் தன்மை, முற்போக்கு வலை பயன்பாடுகள், SEO மற்றும் பலவற்றிற்கான தணிக்கைகளைக் கொண்டுள்ளது. நீங்கள் இதை Chrome DevTools இல், கட்டளை வரியிலிருந்து அல்லது ஒரு Node தொகுப்பாக இயக்கலாம். லைட்ஹவுஸ் ஒரு செயல்திறன் மதிப்பெண் மற்றும் CSS தொடர்பான பரிந்துரைகள் உட்பட மேம்படுத்தலுக்கான பரிந்துரைகளை வழங்குகிறது.

உதாரணம்: CSS செயல்திறன் சிக்கல்களைக் கண்டறிய லைட்ஹவுஸைப் பயன்படுத்துதல்

Chrome DevTools ஐத் திறக்கவும் (Ctrl+Shift+I அல்லது Cmd+Option+I).
லைட்ஹவுஸ் தாவலுக்குச் செல்லவும்.
செயல்திறன் வகையைத் தேர்ந்தெடுக்கவும்.
அறிக்கையை உருவாக்கு (Generate Report) பொத்தானைக் கிளிக் செய்யவும்.
ரெண்டரைத் தடுக்கும் ஆதாரங்கள், பயன்படுத்தப்படாத CSS மற்றும் திறமையற்ற CSS விதிகள் போன்ற CSS தொடர்பான செயல்திறன் சிக்கல்களை அடையாளம் காண அறிக்கையை மதிப்பாய்வு செய்யவும்.

3. வெப்பேஜ்டெஸ்ட் (WebPageTest)

வெப்பேஜ்டெஸ்ட் என்பது வெவ்வேறு இடங்கள் மற்றும் உலாவிகளில் இருந்து வலைத்தளத்தின் செயல்திறனைச் சோதிக்க ஒரு சக்திவாய்ந்த ஆன்லைன் கருவியாகும். இது முதல் உள்ளடக்கம் தோன்றும் நேரம் (FCP), மிகப்பெரிய உள்ளடக்கம் தோன்றும் நேரம் (LCP), மற்றும் ஊடாடும் நேரம் (TTI) உள்ளிட்ட விரிவான செயல்திறன் அளவீடுகளை வழங்குகிறது. வெப்பேஜ்டெஸ்ட் ரெண்டரைத் தடுக்கும் ஆதாரங்கள் மற்றும் திறமையற்ற CSS விதிகள் போன்ற CSS தொடர்பான செயல்திறன் சிக்கல்களையும் அடையாளம் காட்டுகிறது.

உதாரணம்: CSS செயல்திறனைப் பகுப்பாய்வு செய்ய வெப்பேஜ்டெஸ்டைப் பயன்படுத்துதல்

WebPageTest.org க்குச் செல்லவும்.
உங்கள் வலைத்தளத்தின் URL ஐ உள்ளிடவும்.
நீங்கள் சோதிக்க விரும்பும் உலாவி மற்றும் இருப்பிடத்தைத் தேர்ந்தெடுக்கவும்.
சோதனையைத் தொடங்கு (Start Test) பொத்தானைக் கிளிக் செய்யவும்.
CSS தொடர்பான செயல்திறன் சிக்கல்களை அடையாளம் காண முடிவுகளை மதிப்பாய்வு செய்யவும். நீர்வீழ்ச்சி விளக்கப்படத்தில் (waterfall chart) கவனம் செலுத்துங்கள், இது ஆதாரங்களின் ஏற்றுதல் வரிசையைக் காட்டுகிறது மற்றும் ரெண்டரைத் தடுக்கும் CSS கோப்புகளை அடையாளம் காட்டுகிறது.

4. CSS ஸ்பெசிஃபிசிட்டி வரைபட ஜெனரேட்டர்கள்

அதிக CSS ஸ்பெசிஃபிசிட்டி செயல்திறனைப் பாதிக்கலாம். ஸ்பெசிஃபிசிட்டி வரைபட ஜெனரேட்டர்கள் போன்ற கருவிகள் உங்கள் CSS செலக்டர்களின் ஸ்பெசிஃபிசிட்டியை பார்வைக்குரிய வகையில் பிரதிபலிக்கின்றன, இது அதிகப்படியான சிக்கலான அல்லது திறமையற்ற செலக்டர்களை அடையாளம் காண உதவுகிறது. ஸ்பெசிஃபிசிட்டியை குறைப்பது ரெண்டரிங் செயல்திறனை மேம்படுத்தும்.

5. ஜாவாஸ்கிரிப்ட் தரப்படுத்தல் நூலகங்கள் (உதாரணமாக, Benchmark.js)

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

உதாரணம்: ஜாவாஸ்கிரிப்ட் பயன்படுத்தி வெவ்வேறு CSS பண்புகளை தரப்படுத்துதல்

            
// Example using Benchmark.js
var Benchmark = require('benchmark');
var suite = new Benchmark.Suite;

// add tests
suite.add('box-shadow', function() {
  document.getElementById('test-element').style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
})
.add('filter: drop-shadow', function() {
  document.getElementById('test-element').style.filter = 'drop-shadow(0 0 10px rgba(0, 0, 0, 0.5))';
})
// add listeners
.on('cycle', function(event) {
  console.log(String(event.target));
})
.on('complete', function() {
  console.log('Fastest is ' + this.filter('fastest').map('name'));
})
// run async
.run({ 'async': true });

இந்த உதாரணம் box-shadow மற்றும் filter: drop-shadow பண்புகளின் செயல்திறனை ஒப்பிடுகிறது. முடிவுகள் ஒரு குறிப்பிட்ட சூழலில் எந்தப் பண்பு மிகவும் திறமையானது என்பதை வெளிப்படுத்தலாம்.

CSS செயல்திறன் மேம்படுத்தலுக்கான சிறந்த நடைமுறைகள்

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

CSS செலக்டர்களைக் குறைத்தல்: எளிய மற்றும் திறமையான செலக்டர்களைப் பயன்படுத்தவும். அதிகப்படியான குறிப்பிட்ட அல்லது ஆழமாகப் பதிக்கப்பட்ட செலக்டர்களைத் தவிர்க்கவும். கூறு வகைகளையோ அல்லது ஐடிகளையோ மட்டும் சார்ந்து இருக்காமல், கிளாஸ் பெயர்களைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளவும்.
ஸ்பெசிஃபிசிட்டியை குறைத்தல்: உலாவியின் பணிச்சுமையைக் குறைக்க உங்கள் CSS விதிகளின் ஸ்பெசிஃபிசிட்டியை குறைக்கவும். அதிகப்படியான குறிப்பிட்ட செலக்டர்களை அடையாளம் காண ஸ்பெசிஃபிசிட்டி வரைபட ஜெனரேட்டர்கள் போன்ற கருவிகளைப் பயன்படுத்தவும்.
லேஅவுட் த்ராஷிங்கைத் தவிர்த்தல்: ஒரே பிரேமில் லேஅவுட் பண்புகளைப் படிப்பதையும் எழுதுவதையும் குறைக்கவும். ரிஃப்ளோக்கள் மற்றும் ரிபெயிண்ட்களின் எண்ணிக்கையைக் குறைக்க DOM புதுப்பிப்புகளைத் தொகுப்பாகச் செய்யவும். அனிமேஷன்களுக்கு requestAnimationFrame போன்ற நுட்பங்களைப் பயன்படுத்தவும்.
விலையுயர்ந்த பண்புகளை மேம்படுத்துதல்: விலையுயர்ந்த CSS பண்புகளை (எ.கா., box-shadow, filter, transform) குறைவாகப் பயன்படுத்தவும். கணிணி ரீதியாக செலவு குறைவான மாற்று நுட்பங்களைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளவும். எடுத்துக்காட்டாக, சிக்கலான CSS வடிவங்களை நம்புவதற்குப் பதிலாக எளிய ஐகான்களுக்கு SVG களைப் பயன்படுத்தவும்.
CSS கோப்புகளைச் சிறிதாக்குதல் மற்றும் சுருக்குதல்: உங்கள் CSS கோப்புகளில் இருந்து தேவையற்ற எழுத்துக்களை (எ.கா., வெற்று இடம், கருத்துரைகள்) அகற்றி, கோப்பு அளவைக் குறைக்க Gzip அல்லது Brotli ஐப் பயன்படுத்தி அவற்றைச் சுருக்கவும். CSSNano மற்றும் PurgeCSS போன்ற கருவிகள் இந்த செயல்முறையைத் தானியக்கமாக்கலாம்.
முக்கியமான CSS (Critical CSS): ஃபோல்டிற்கு மேலே உள்ள உள்ளடக்கத்தை ரெண்டர் செய்யத் தேவையான CSS விதிகளை அடையாளம் கண்டு, அவற்றை உங்கள் HTML இன் <head> பகுதியில் இன்லைன் செய்யவும். இது வெளிப்புற CSS கோப்புகள் ஏற்றப்படும் வரை காத்திருக்காமல் ஆரம்ப உள்ளடக்கத்தை ரெண்டர் செய்ய உலாவியை அனுமதிக்கிறது. CriticalCSS போன்ற கருவிகள் முக்கியமான CSS ஐப் பிரித்தெடுத்து இன்லைன் செய்யும் செயல்முறையைத் தானியக்கமாக்கலாம்.
முக்கியமற்ற CSSஐ தாமதப்படுத்துதல்: <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'"> போன்ற நுட்பங்களைப் பயன்படுத்தி முக்கியமற்ற CSS கோப்புகளை ஒத்திசைவற்ற முறையில் ஏற்றவும். இது முக்கியமற்ற CSS பக்கத்தின் ஆரம்ப ரெண்டரிங்கைத் தடுப்பதைத் தடுக்கிறது.
CSS ஸ்ப்ரைட்கள் அல்லது ஐகான் எழுத்துருக்களைப் பயன்படுத்துதல் (தந்திரமாக): பல படங்களை ஒரே படக் கோப்பாக (CSS ஸ்ப்ரைட்) இணைக்கவும் அல்லது HTTP கோரிக்கைகளின் எண்ணிக்கையைக் குறைக்க ஐகான் எழுத்துருக்களைப் பயன்படுத்தவும். இருப்பினும், CSS ஸ்ப்ரைட்களின் (எ.கா., அதிகரித்த கோப்பு அளவு) மற்றும் ஐகான் எழுத்துருக்களின் (எ.கா., அணுகல் தன்மை சிக்கல்கள்) சாத்தியமான குறைபாடுகளை மனதில் கொள்ளுங்கள். ஐகான்களுக்கு SVG களைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளவும், ஏனெனில் அவை பொதுவாக மிகவும் திறமையானவை மற்றும் அளவிடக்கூடியவை.
கேச்சிங்கை மேம்படுத்துதல்: உங்கள் CSS கோப்புகளுக்கு பொருத்தமான கேச் ஹெடர்களை அமைக்கவும், அவற்றை நீண்ட காலத்திற்கு கேச் செய்ய உலாவிக்கு அறிவுறுத்தவும். இது அடுத்தடுத்த பக்கப் பார்வைகளுக்கான HTTP கோரிக்கைகளின் எண்ணிக்கையைக் குறைக்கிறது. உங்கள் CSS கோப்புகளை புவியியல் ரீதியாக விநியோகிக்கப்பட்ட சேவையகங்களிலிருந்து வழங்க ஒரு உள்ளடக்க விநியோக வலையமைப்பை (CDN) பயன்படுத்தவும், இது உலகெங்கிலும் உள்ள பயனர்களுக்கான தாமதத்தைக் குறைக்கிறது.
`will-change` பண்பைப் பயன்படுத்துதல்: will-change CSS பண்பு ஒரு கூறில் எந்தப் பண்புகள் மாறும் என்பதைப் பற்றி உலாவிக்கு ஒரு குறிப்பை அளிக்கிறது. இது அந்த மாற்றங்களுக்கு முன்கூட்டியே மேம்படுத்த உலாவியை அனுமதிக்கிறது, இது ரெண்டரிங் செயல்திறனை மேம்படுத்தக்கூடும். இந்த பண்பை எச்சரிக்கையுடன் பயன்படுத்தவும், ஏனெனில் அதிகப்படியான பயன்பாடு செயல்திறன் சீரழிவுக்கு வழிவகுக்கும். நீங்கள் மாறும் என்று அறிந்த பண்புகளுக்கு மட்டுமே இதைப் பயன்படுத்தவும்.
@importஐத் தவிர்த்தல்: @import விதி CSS கோப்புகளை ஏற்றுவதில் ஒரு நீர்வீழ்ச்சி விளைவை உருவாக்குவதன் மூலம் செயல்திறன் சிக்கல்களை அறிமுகப்படுத்தலாம். CSS கோப்புகளை இணையாக ஏற்றுவதற்குப் பதிலாக <link> குறிச்சொற்களைப் பயன்படுத்தவும்.

CSS செயல்திறனுக்கான சர்வதேசமயமாக்கல் (i18n) பரிசீலனைகள்

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

எழுத்துரு ஏற்றுதல்: வெவ்வேறு மொழிகளுக்கு வெவ்வேறு எழுத்துத் தொகுப்புகள் தேவைப்படுகின்றன, இது எழுத்துரு கோப்பு அளவுகளைப் பாதிக்கலாம். பதிவிறக்க நேரங்களைக் குறைக்கவும், லேஅவுட் ஷிஃப்ட்களைத் தடுக்கவும் எழுத்துரு துணைக்குழுக்கள், மாறி எழுத்துருக்கள் மற்றும் எழுத்துரு காட்சி உத்திகளைப் பயன்படுத்தி எழுத்துரு ஏற்றுதலை மேம்படுத்தவும். மேம்படுத்தப்பட்ட எழுத்துரு கோப்புகளை உருவாக்க Google Fonts Helper போன்ற கருவிகளைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளவும்.
உரை திசை (RTL): வலமிருந்து இடமாக (RTL) உள்ள மொழிகளுக்கு லேஅவுட் மற்றும் சீரமைப்பிற்கு வெவ்வேறு CSS விதிகள் தேவைப்படுகின்றன. வெவ்வேறு உரை திசைகளுக்கு தானாகவே மாற்றியமைக்கும் ஸ்டைல்களை உருவாக்க லாஜிக்கல் பண்புகள் மற்றும் மதிப்புகளை (எ.கா., margin-inline-start, float: inline-start) பயன்படுத்தவும். இடமிருந்து வலமாக (LTR) உள்ள மொழிகளுக்கு குறிப்பிட்ட பிஸிக்கல் பண்புகள் மற்றும் மதிப்புகளை (எ.கா., margin-left, float: left) பயன்படுத்துவதைத் தவிர்க்கவும்.
மொழி சார்ந்த ஸ்டைல்கள்: சில மொழிகளுக்கு அச்சுக்கலை, இடைவெளி அல்லது காட்சி விளக்கக்காட்சிக்கான குறிப்பிட்ட ஸ்டைல்கள் தேவைப்படலாம். இந்த ஸ்டைல்களை நிபந்தனையுடன் பயன்படுத்த CSS மீடியா வினவல்கள் அல்லது மொழி சார்ந்த கிளாஸ்களைப் பயன்படுத்தவும். எடுத்துக்காட்டாக, குறிப்பிட்ட மொழிகளைக் குறிவைக்க நீங்கள் :lang() சூடோ-கிளாஸைப் பயன்படுத்தலாம்: p:lang(ar) { font-size: 1.2em; }.
யூனிகோட் எழுத்துக்கள்: உங்கள் CSS இல் அதிக எண்ணிக்கையிலான யூனிகோட் எழுத்துக்களைப் பயன்படுத்துவதால் ஏற்படும் செயல்திறன் தாக்கத்தை மனதில் கொள்ளுங்கள். எழுத்துரு குறியாக்கத்தை கவனமாகப் பயன்படுத்தவும் மற்றும் தேவையற்ற யூனிகோட் எழுத்துக்களைத் தவிர்க்கவும்.

கேஸ் ஸ்டடீஸ்

@benchmark கொள்கைகளின் பயன்பாட்டை விளக்கும் சில கற்பனையான கேஸ் ஸ்டடீஸ்களைப் பார்ப்போம்:

கேஸ் ஸ்டடி 1: ஒரு சிக்கலான அனிமேஷனை மேம்படுத்துதல்

சிக்கல்: ஒரு வலைத்தளத்தில் பல கூறுகள் மற்றும் CSS பண்புகளை உள்ளடக்கிய ஒரு சிக்கலான அனிமேஷன் உள்ளது. இந்த அனிமேஷன் செயல்திறன் சிக்கல்களை ஏற்படுத்துகிறது, இதன் விளைவாக தடுமாற்றமான அனிமேஷன்கள் மற்றும் ஒரு மோசமான பயனர் அனுபவம் ஏற்படுகிறது.

தீர்வு:

தடைகளைக் கண்டறிதல்: அனிமேஷனைப் பகுப்பாய்வு செய்து, செயல்திறன் சிக்கல்களை ஏற்படுத்தும் CSS பண்புகளை அடையாளம் காண உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்தவும்.
CSS பண்புகளை மேம்படுத்துதல்: விலையுயர்ந்த CSS பண்புகளை (எ.கா., box-shadow, filter) கணிணி ரீதியாக செலவு குறைவான மாற்று நுட்பங்களுடன் மாற்றவும். எடுத்துக்காட்டாக, top மற்றும் left பண்புகளை அனிமேட் செய்வதற்கு பதிலாக CSS டிரான்ஸ்ஃபார்ம்களைப் பயன்படுத்தவும்.
`will-change`ஐப் பயன்படுத்துதல்: வரவிருக்கும் மாற்றங்களைப் பற்றி உலாவிக்கு குறிப்பளிக்க, அனிமேட் செய்யப்படும் கூறுகள் மற்றும் பண்புகளுக்கு will-change பண்பைப் பயன்படுத்தவும்.
அனிமேஷனை எளிதாக்குதல்: சம்பந்தப்பட்ட கூறுகள் மற்றும் CSS பண்புகளின் எண்ணிக்கையைக் குறைப்பதன் மூலம் அனிமேஷனின் சிக்கலைக் குறைக்கவும்.
சோதித்து மீண்டும் செய்யவும்: செயல்திறன் சிக்கல்கள் தீர்க்கப்படும் வரை அனிமேஷனைத் தொடர்ந்து சோதித்து மேம்படுத்தல்களில் மீண்டும் செய்யவும்.

கேஸ் ஸ்டடி 2: CSS கோப்பு அளவைக் குறைத்தல்

சிக்கல்: ஒரு வலைத்தளத்தில் ஒரு பெரிய CSS கோப்பு உள்ளது, அது பக்க ஏற்றுதல் நேரங்களை மெதுவாக்குகிறது.

தீர்வு:

பயன்படுத்தப்படாத CSS ஐக் கண்டறிதல்: பயன்படுத்தப்படாத CSS குறியீட்டை அடையாளம் காண Chrome DevTools இல் உள்ள கவரேஜ் தாவலைப் பயன்படுத்தவும்.
பயன்படுத்தப்படாத CSS ஐ அகற்றுதல்: CSS கோப்பிலிருந்து பயன்படுத்தப்படாத CSS குறியீட்டை அகற்றவும். PurgeCSS போன்ற கருவிகள் இந்த செயல்முறையைத் தானியக்கமாக்கலாம்.
CSS ஐச் சிறிதாக்கி சுருக்குதல்: கோப்பு அளவைக் குறைக்க CSSNano மற்றும் Gzip அல்லது Brotli ஐப் பயன்படுத்தி CSS கோப்பைச் சிறிதாக்கி சுருக்கவும்.
முக்கியமான CSS: முக்கியமான CSS ஐப் பிரித்தெடுத்து அதை <head> இல் இன்லைன் செய்யவும்.
முக்கியமற்ற CSSஐ தாமதப்படுத்துதல்: முக்கியமற்ற CSS கோப்புகளின் ஏற்றுதலைத் தாமதப்படுத்தவும்.
சோதித்து மீண்டும் செய்யவும்: CSS கோப்பின் அளவு ஏற்றுக்கொள்ளக்கூடிய நிலைக்குக் குறைக்கப்படும் வரை வலைத்தளத்தைத் தொடர்ந்து சோதித்து மேம்படுத்தல்களில் மீண்டும் செய்யவும்.

CSS செயல்திறன் மற்றும் @benchmarkஇன் எதிர்காலம்

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

மேலும் திறமையான CSS இன்ஜின்கள்: உலாவி விற்பனையாளர்கள் தங்கள் CSS இன்ஜின்களின் செயல்திறனை மேம்படுத்தத் தொடர்ந்து பணியாற்றி வருகின்றனர். புதிய ரெண்டரிங் நுட்பங்கள் மற்றும் மேம்படுத்தல்கள் வேகமான மற்றும் திறமையான CSS செயலாக்கத்திற்கு வழிவகுக்கும்.
வெப்அசெம்பிளி (Wasm): வெப்அசெம்பிளி டெவலப்பர்களை C++ மற்றும் Rust போன்ற மொழிகளில் உயர்-செயல்திறன் குறியீட்டை எழுதவும், அதை உலாவியில் இயக்கவும் அனுமதிக்கிறது. தனிப்பயன் CSS ரெண்டரிங் இன்ஜின்களைச் செயல்படுத்த அல்லது கணிணி ரீதியாக விலையுயர்ந்த CSS பண்புகளை மேம்படுத்த Wasm பயன்படுத்தப்படலாம்.
வன்பொருள் முடுக்கம்: CSS ரெண்டரிங்கிற்கு வன்பொருள் முடுக்கத்தை (எ.கா., GPU) மேம்படுத்துவது செயல்திறனை கணிசமாக மேம்படுத்தும், குறிப்பாக அனிமேஷன்கள் மற்றும் சிக்கலான காட்சி விளைவுகளுக்கு.
புதிய CSS அம்சங்கள்: கொள்கலன் வினவல்கள் (container queries) மற்றும் அடுக்கடுக்கான அடுக்குகள் (cascade layers) போன்ற புதிய CSS அம்சங்கள் CSS குறியீட்டை கட்டமைக்கவும் ஒழுங்கமைக்கவும் புதிய வழிகளை வழங்குகின்றன, இது செயல்திறனை மேம்படுத்தக்கூடும்.
மேம்பட்ட செயல்திறன் கண்காணிப்பு கருவிகள்: மேலும் அதிநவீன செயல்திறன் கண்காணிப்பு கருவிகள் டெவலப்பர்களுக்கு CSS செயல்திறன் குறித்த ஆழமான நுண்ணறிவுகளை வழங்கும் மற்றும் செயல்திறன் தடைகளை மிகவும் திறம்பட அடையாளம் கண்டு தீர்க்க உதவும்.

முடிவுரை

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