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

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

CSS ஆங்கர் அளவிடுதலைப் புரிந்துகொள்ளுதல்

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

எடுத்துக்காட்டாக, அதன் கண்டெய்னரின் அகலத்தின் அடிப்படையில் அதன் லேஅவுட்டை சரிசெய்ய வேண்டிய ஒரு கார்டு கூறுகளைக் கவனியுங்கள். கண்டெய்னர் வினவல்களைப் பயன்படுத்தி, கண்டெய்னர் அகலம் ஒரு குறிப்பிட்ட வரம்பை மீறும் போது கார்டுக்கு வெவ்வேறு ஸ்டைல்களை வரையறுக்கலாம்.

செயல்திறன் தாக்கங்கள்

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

செயல்திறன் சிக்கல்களைக் கண்டறிதல்

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

உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்துதல்

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

• செயல்திறன் தளம் (Performance Tab): உங்கள் வலைத்தளத்தின் செயல்பாட்டின் காலவரிசையைப் பதிவு செய்ய செயல்திறன் தளத்தைப் (அல்லது உங்கள் உலாவியில் சமமான) பயன்படுத்தவும். "Layout" அல்லது "Recalculate Style" என்று பெயரிடப்பட்ட பிரிவுகளைத் தேடுங்கள், இது லேஅவுட்டை மறு கணக்கீடு செய்ய செலவழித்த நேரத்தைக் குறிக்கிறது. இந்த நிகழ்வுகளின் அதிர்வெண் மற்றும் கால அளவைக் கவனியுங்கள்.
• ரெண்டரிங் தளம் (Rendering Tab): ரெண்டரிங் தளம் (பொதுவாக டெவலப்பர் கருவிகளின் மேலும் கருவிகள் பிரிவில் காணப்படுகிறது) லேஅவுட் மாற்றங்களை முன்னிலைப்படுத்த உங்களை அனுமதிக்கிறது, இது ஆங்கர் அளவிடுதல் அதிகப்படியான மறுஓட்டங்களை ஏற்படுத்தும் பகுதிகளைக் குறிக்கலாம்.
• பெயிண்ட் சுயவிவரம் (Paint Profiling): ரெண்டர் செய்ய விலை உயர்ந்த தனிமங்களைக் கண்டறிய பெயிண்ட் நேரங்களை பகுப்பாய்வு செய்யுங்கள். இது ஆங்கர் செய்யப்பட்ட தனிமங்களின் ஸ்டைலிங்கை மேம்படுத்த உதவும்.
• ஜாவாஸ்கிரிப்ட் சுயவிவரம் (JavaScript Profiler): ஆங்கர் பரிமாணங்களின் அடிப்படையில் CSS மாறிகளை டைனமிக்காக புதுப்பிக்க ஜாவாஸ்கிரிப்டைப் பயன்படுத்துகிறீர்கள் என்றால், உங்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டில் ஏதேனும் செயல்திறன் சிக்கல்களைக் கண்டறிய ஜாவாஸ்கிரிப்ட் சுயவிவரத்தைப் பயன்படுத்தவும்.

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

மேம்படுத்தல் நுட்பங்கள்

செயல்திறன் சிக்கல்களை நீங்கள் கண்டறிந்தவுடன், ஆங்கர் அளவிடுதல் செயல்திறனை மேம்படுத்த பல்வேறு மேம்படுத்தல் நுட்பங்களைப் பயன்படுத்தலாம்.

1. ஆங்கர் தனிம மறு கணக்கீட்டைக் குறைத்தல்

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

• அடிக்கடி ஆங்கர் பரிமாண மாற்றங்களைத் தவிர்க்கவும்: முடிந்தால், ஆங்கர் தனிமத்தின் பரிமாணங்களை அடிக்கடி மாற்றுவதைத் தவிர்க்கவும். ஆங்கர் தனிமத்தில் ஏற்படும் மாற்றங்கள் ஆங்கர் செய்யப்பட்ட தனிமத்தின் லேஅவுட்டின் மறு கணக்கீட்டைத் தூண்டுகின்றன, இது செலவுமிக்கதாக இருக்கலாம்.
• பரிமாண புதுப்பிப்புகளை டிபவுன்ஸ் அல்லது த்ராட்டில் செய்யவும்: ஆங்கர் பரிமாணங்களின் அடிப்படையில் CSS மாறிகளை டைனமிக்காக புதுப்பிக்க வேண்டும் என்றால், புதுப்பிப்புகளின் அதிர்வெண்ணைக் கட்டுப்படுத்த டிபவுன்சிங் அல்லது த்ராட்லிங் போன்ற நுட்பங்களைப் பயன்படுத்தவும். இது ஒரு குறிப்பிட்ட தாமதத்திற்குப் பிறகு அல்லது அதிகபட்ச விகிதத்தில் மட்டுமே புதுப்பிப்புகள் பயன்படுத்தப்படுவதை உறுதி செய்கிறது, இது மறு கணக்கீடுகளின் எண்ணிக்கையைக் குறைக்கிறது.
• `ResizeObserver`-ஐ கவனமாகப் பயன்படுத்தவும்: ResizeObserver API ஒரு தனிமத்தின் அளவில் ஏற்படும் மாற்றங்களைக் கண்காணிக்க உங்களை அனுமதிக்கிறது. இருப்பினும், அதை விவேகத்துடன் பயன்படுத்துவது முக்கியம். அதிக ResizeObserver நிகழ்வுகளை உருவாக்குவதைத் தவிர்க்கவும், ஏனெனில் ஒவ்வொரு நிகழ்வும் மேல்நிலையைச் சேர்க்கலாம். மேலும், தேவையற்ற கணக்கீடுகளைத் தவிர்க்க அதன் திரும்ப அழைக்கும் செயல்பாடு மேம்படுத்தப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும். ரெண்டரிங்கை மேலும் மேம்படுத்த, திரும்ப அழைப்பின் உள்ளே `requestAnimationFrame` ஐப் பயன்படுத்துவதைக் கவனியுங்கள்.

2. CSS தேர்வாளர்களை மேம்படுத்துதல்

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

• தேர்வாளர்களை எளிமையாக வைத்திருங்கள்: பல உள்ளமைக்கப்பட்ட தனிமங்கள் அல்லது பண்புக்கூறு தேர்வாளர்களுடன் கூடிய அதிகப்படியான சிக்கலான தேர்வாளர்களைத் தவிர்க்கவும். எளிமையான தேர்வாளர்கள் மதிப்பீடு செய்ய வேகமானவை.
• தனிம தேர்வாளர்களுக்குப் பதிலாக வகுப்புகளைப் பயன்படுத்தவும்: வகுப்புகள் பொதுவாக தனிம தேர்வாளர்களை விட வேகமானவை. தனிமப் பெயர்கள் அல்லது கட்டமைப்பு தேர்வாளர்களைச் சார்ந்து இருப்பதற்குப் பதிலாக குறிப்பிட்ட தனிமங்களைக் குறிவைக்க வகுப்புகளைப் பயன்படுத்தவும்.
• உலகளாவிய தேர்வாளர்களைத் தவிர்க்கவும்: உலகளாவிய தேர்வாளர் (*) மிகவும் செலவுமிக்கதாக இருக்கலாம், குறிப்பாக சிக்கலான லேஅவுட்களில் பயன்படுத்தும்போது. முற்றிலும் தேவைப்படாவிட்டால் அதைப் பயன்படுத்துவதைத் தவிர்க்கவும்.
• `contain` பண்பைப் பயன்படுத்தவும்: CSS `contain` பண்பு DOM மரத்தின் பகுதிகளைத் தனிமைப்படுத்த உங்களை அனுமதிக்கிறது, லேஅவுட் மற்றும் பெயிண்ட் செயல்பாடுகளின் நோக்கத்தைக் கட்டுப்படுத்துகிறது. `contain: layout;`, `contain: paint;`, அல்லது `contain: content;` ஐப் பயன்படுத்துவதன் மூலம், பக்கத்தின் ஒரு பகுதியில் ஏற்படும் மாற்றங்கள் மற்ற பகுதிகளில் மறு கணக்கீடுகளைத் தூண்டுவதைத் தடுக்கலாம்.

3. ரெண்டரிங் செயல்திறனை மேம்படுத்துதல்

நீங்கள் ஆங்கர் தனிம மறு கணக்கீட்டைக் குறைத்தாலும், ஆங்கர் செய்யப்பட்ட தனிமத்தின் ரெண்டரிங் இன்னும் ஒரு செயல்திறன் சிக்கலாக இருக்கலாம். ரெண்டரிங் செயல்திறனை மேம்படுத்துவதற்கான சில நுட்பங்கள் இங்கே:

• `will-change`-ஐ பொருத்தமாகப் பயன்படுத்தவும்: `will-change` பண்பு ஒரு தனிமத்தில் வரவிருக்கும் மாற்றங்கள் குறித்து உலாவிக்குத் தெரிவிக்கிறது, இது ரெண்டரிங்கை முன்கூட்டியே மேம்படுத்த அனுமதிக்கிறது. இருப்பினும், அதை குறைவாகப் பயன்படுத்துவது முக்கியம், ஏனெனில் அதிகப்படியான பயன்பாடு உண்மையில் செயல்திறனைக் குறைக்கலாம். மாறவிருக்கும் தனிமங்களுக்கு மட்டுமே `will-change`-ஐப் பயன்படுத்தவும், மாற்றங்கள் முடிந்ததும் அதை அகற்றவும்.
• செலவுமிக்க CSS பண்புகளைத் தவிர்க்கவும்: `box-shadow`, `filter`, மற்றும் `opacity` போன்ற சில CSS பண்புகள் ரெண்டர் செய்ய செலவுமிக்கதாக இருக்கலாம். இந்த பண்புகளை விவேகத்துடன் பயன்படுத்தவும், முடிந்தால் மாற்று அணுகுமுறைகளைக் கவனியுங்கள். எடுத்துக்காட்டாக, `box-shadow`-ஐப் பயன்படுத்துவதற்குப் பதிலாக, பின்னணி படத்தைப் பயன்படுத்தி இதே போன்ற விளைவை நீங்கள் அடையலாம்.
• வன்பொருள் முடுக்கத்தைப் பயன்படுத்தவும்: `transform` மற்றும் `opacity` போன்ற சில CSS பண்புகள் வன்பொருள்-முடுக்கப்படலாம், அதாவது உலாவி அவற்றை ரெண்டர் செய்ய GPU-வைப் பயன்படுத்தலாம். இது செயல்திறனை கணிசமாக மேம்படுத்தும். இந்த பண்புகளை வன்பொருள் முடுக்கத்தை இயக்கும் வகையில் பயன்படுத்துவதை உறுதிப்படுத்திக் கொள்ளுங்கள்.
• DOM அளவைக் குறைத்தல்: ஒரு சிறிய DOM மரம் பொதுவாக ரெண்டர் செய்ய வேகமானது. உங்கள் HTML குறியீட்டிலிருந்து தேவையற்ற தனிமங்களை அகற்றவும், மேலும் ஒரு பெரிய பட்டியலின் தெரியும் பகுதிகளை மட்டுமே ரெண்டர் செய்ய மெய்நிகராக்கம் போன்ற நுட்பங்களைப் பயன்படுத்துவதைக் கவனியுங்கள்.
• படங்களை மேம்படுத்துதல்: படங்களை அழுத்துவதன் மூலமும் பொருத்தமான கோப்பு வடிவங்களைப் பயன்படுத்துவதன் மூலமும் வலைக்காக மேம்படுத்துங்கள். பெரிய படங்கள் ரெண்டரிங்கை கணிசமாக மெதுவாக்கும்.

4. CSS மாறிகள் மற்றும் தனிப்பயன் பண்புகளைப் பயன்படுத்துதல்

CSS மாறிகள் (தனிப்பயன் பண்புகள் என்றும் அழைக்கப்படுகின்றன) ஆங்கர் பரிமாணங்களின் அடிப்படையில் ஸ்டைல்களை டைனமிக்காக புதுப்பிக்க ஒரு சக்திவாய்ந்த வழியை வழங்குகின்றன. இருப்பினும், செயல்திறன் சிக்கல்களைத் தவிர்க்க அவற்றை திறமையாகப் பயன்படுத்துவது முக்கியம்.

• தீமிங்கிற்காக CSS மாறிகளைப் பயன்படுத்தவும்: CSS மாறிகள் தீமிங் மற்றும் பிற டைனமிக் ஸ்டைலிங் சூழ்நிலைகளுக்கு ஏற்றவை. அவை HTML குறியீட்டை மாற்றாமல் உங்கள் வலைத்தளத்தின் தோற்றத்தை மாற்ற உங்களை அனுமதிக்கின்றன.
• முடிந்தவரை ஜாவாஸ்கிரிப்ட் அடிப்படையிலான CSS மாறி புதுப்பிப்புகளைத் தவிர்க்கவும்: ஜாவாஸ்கிரிப்டை CSS மாறிகளைப் புதுப்பிக்கப் பயன்படுத்தலாம் என்றாலும், அது ஒரு செயல்திறன் சிக்கலாக இருக்கலாம், குறிப்பாக புதுப்பிப்புகள் அடிக்கடி இருந்தால். முடிந்தால், ஜாவாஸ்கிரிப்ட் அடிப்படையிலான புதுப்பிப்புகளைத் தவிர்க்கவும், கண்டெய்னர் வினவல்கள் அல்லது மீடியா வினவல்கள் போன்ற CSS-அடிப்படையிலான வழிமுறைகளைச் சார்ந்து இருக்கவும்.
• CSS `calc()` செயல்பாட்டைப் பயன்படுத்தவும்: CSS `calc()` செயல்பாடு CSS மதிப்புகளுக்குள் கணக்கீடுகளைச் செய்ய உங்களை அனுமதிக்கிறது. இது ஒரு தனிமத்தின் அளவை அதன் கண்டெய்னரின் பரிமாணங்களின் அடிப்படையில் பெற பயனுள்ளதாக இருக்கும். எடுத்துக்காட்டாக, அதன் கண்டெய்னரின் அகலத்தின் அடிப்படையில் ஒரு கார்டின் அகலத்தைக் கணக்கிட `calc()`-ஐப் பயன்படுத்தலாம், சில பேடிங்கைக் கழித்து.

5. கண்டெய்னர் வினவல்களை திறம்பட செயல்படுத்துதல்

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

• கண்டெய்னர் வினவல்களை விவேகத்துடன் பயன்படுத்தவும்: அதிக கண்டெய்னர் வினவல்களைப் பயன்படுத்துவதைத் தவிர்க்கவும், ஏனெனில் ஒவ்வொரு வினவலும் மேல்நிலையைச் சேர்க்கலாம். தேவையான போது மட்டுமே கண்டெய்னர் வினவல்களைப் பயன்படுத்தவும், முடிந்தவரை வினவல்களை ஒருங்கிணைக்க முயற்சிக்கவும்.
• கண்டெய்னர் வினவல் நிபந்தனைகளை மேம்படுத்துதல்: உங்கள் கண்டெய்னர் வினவல்களில் நிபந்தனைகளை முடிந்தவரை எளிமையாக வைத்திருங்கள். சிக்கலான நிபந்தனைகள் மதிப்பீடு செய்ய மெதுவாக இருக்கலாம்.
• பாலிஃபில்களுக்கு முன் செயல்திறனைக் கருத்தில் கொள்ளுங்கள்: பல டெவலப்பர்கள் பழைய உலாவிகளுக்கு கண்டெய்னர் வினவல் செயல்பாட்டை வழங்க பாலிஃபில்களை நம்பியிருக்க வேண்டியிருந்தது. இருப்பினும், பல பாலிஃபில்கள் கனமான ஜாவாஸ்கிரிப்ட் தீர்வுகள் மற்றும் செயல்திறன் மிக்கவை அல்ல என்பதை அறிந்து கொள்ளுங்கள். எந்த பாலிஃபில்களையும் முழுமையாக சோதிக்கவும், முடிந்தால் மாற்று அணுகுமுறைகளைக் கருத்தில் கொள்ளவும்.

6. கேச்சிங் உத்திகளைப் பயன்படுத்துதல்

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

• உலாவி கேச்சிங்: CSS கோப்புகள், ஜாவாஸ்கிரிப்ட் கோப்புகள் மற்றும் படங்கள் போன்ற நிலையான சொத்துக்களுக்கு பொருத்தமான கேச் தலைப்புகளை அமைக்க உங்கள் வலை சேவையகத்தை உள்ளமைக்கவும். இது உலாவி இந்த சொத்துக்களை கேச் செய்ய அனுமதிக்கும், சேவையகத்திற்கான கோரிக்கைகளின் எண்ணிக்கையைக் குறைக்கும்.
• உள்ளடக்க விநியோக நெட்வொர்க் (CDN): உங்கள் வலைத்தளத்தின் சொத்துக்களை உலகெங்கிலும் உள்ள சேவையகங்களுக்கு விநியோகிக்க ஒரு CDN-ஐப் பயன்படுத்தவும். இது வெவ்வேறு புவியியல் இடங்களில் உள்ள பயனர்களுக்கு தாமதத்தைக் குறைத்து ஏற்றுதல் நேரங்களை மேம்படுத்தும்.
• சேவை தொழிலாளர்கள் (Service Workers): சேவை தொழிலாளர்கள் வளங்களை கேச் செய்து, பயனர் ஆஃப்லைனில் இருந்தாலும் கேச்சிலிருந்து அவற்றை வழங்க உங்களை அனுமதிக்கின்றனர். இது உங்கள் வலைத்தளத்தின் செயல்திறனை கணிசமாக மேம்படுத்தும், குறிப்பாக மொபைல் சாதனங்களில்.

நடைமுறை எடுத்துக்காட்டுகள் மற்றும் குறியீட்டுத் துணுக்குகள்

CSS ஆங்கர் அளவிடுதல் செயல்திறனை எவ்வாறு மேம்படுத்துவது என்பதற்கான சில நடைமுறை எடுத்துக்காட்டுகளைப் பார்ப்போம்.

எடுத்துக்காட்டு 1: பரிமாண புதுப்பிப்புகளை டிபவுன்சிங் செய்தல்

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

            
function debounce(func, delay) {
 let timeoutId;
 return function(...args) {
 clearTimeout(timeoutId);
 timeoutId = setTimeout(() => {
 func.apply(this, args);
 }, delay);
 };
}

const anchorElement = document.getElementById('anchor');
const anchoredElement = document.getElementById('anchored');

function updateAnchoredElement() {
 const width = anchorElement.offsetWidth;
 anchoredElement.style.setProperty('--anchor-width', `${width}px`);
}

const debouncedUpdate = debounce(updateAnchoredElement, 100);

window.addEventListener('resize', debouncedUpdate);
updateAnchoredElement(); // Initial update

            

              
                Copy
              
            
          

இந்த குறியீட்டில், debounce செயல்பாடு updateAnchoredElement செயல்பாடு 100ms தாமதத்திற்குப் பிறகு மட்டுமே அழைக்கப்படுவதை உறுதி செய்கிறது. இது ஆங்கர் செய்யப்பட்ட தனிமம் அதிகப்படியான அடிக்கடி புதுப்பிக்கப்படுவதைத் தடுக்கிறது, லேஅவுட் த்ராஷிங்கைக் குறைக்கிறது.

எடுத்துக்காட்டு 2: `contain` பண்பைப் பயன்படுத்துதல்

லேஅவுட் மாற்றங்களைத் தனிமைப்படுத்த contain பண்பை எவ்வாறு பயன்படுத்துவது என்பதற்கான எடுத்துக்காட்டு இங்கே.

            
.anchor {
 width: 50%;
 height: 200px;
 background-color: #eee;
}

.anchored {
 contain: layout;
 width: calc(var(--anchor-width) / 2);
 height: 100px;
 background-color: #ddd;
}

            

              
                Copy
              
            
          

.anchored தனிமத்தில் contain: layout; ஐ அமைப்பதன் மூலம், அதன் லேஅவுட்டில் ஏற்படும் மாற்றங்கள் பக்கத்தின் மற்ற பகுதிகளைப் பாதிப்பதைத் தடுக்கிறோம்.

எடுத்துக்காட்டு 3: கண்டெய்னர் வினவல்களை மேம்படுத்துதல்

எளிய நிபந்தனைகளைப் பயன்படுத்துவதன் மூலமும் தேவையற்ற வினவல்களைத் தவிர்ப்பதன் மூலமும் கண்டெய்னர் வினவல்களை எவ்வாறு மேம்படுத்துவது என்பதை இந்த எடுத்துக்காட்டு காட்டுகிறது.

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

.card {
 width: 100%;
}

@container (min-width: 400px) {
 .card {
 width: 50%;
 }
}

@container (min-width: 800px) {
 .card {
 width: 33.33%;
 }
}

            

              
                Copy
              
            
          

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

சோதனை மற்றும் கண்காணிப்பு

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

முடிவுரை

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

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