CSS Grid Track Sizing செயல்திறன் விவரக்குறிப்பு: Layout கணக்கீட்டு பகுப்பாய்வுகளில் ஒரு ஆழ்ந்த பார்வை

CSS Grid இணைய லேஅவுட்டில் புரட்சியை ஏற்படுத்தியுள்ளது, சிக்கலான, ரெஸ்பான்சிவ் வடிவமைப்புகளை உருவாக்க முன்னோடியில்லாத சக்தியையும் நெகிழ்வுத்தன்மையையும் வழங்குகிறது. `fr` யூனிட், `minmax()`, மற்றும் உள்ளடக்கம் சார்ந்த அளவு போன்ற அம்சங்களுடன், ஒரு காலத்தில் கனவாக இருந்த இடைமுகங்களை, பெரும்பாலும் வியக்கத்தக்க குறைந்த குறியீட்டுடன் உருவாக்க முடியும். இருப்பினும், பெரும் சக்தியுடன் பெரும் பொறுப்பும் வருகிறது—இணைய செயல்திறன் உலகில், அந்தப் பொறுப்பு நமது வடிவமைப்புத் தேர்வுகளின் கணக்கீட்டுச் செலவைப் புரிந்துகொள்வதில் உள்ளது.

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

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

உலாவி ரெண்டரிங் பைப்லைனைப் புரிந்துகொள்வது

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

• ஸ்டைல் (Style): உலாவி CSS-ஐப் பாகுபடுத்தி, ஒவ்வொரு DOM உறுப்புக்கும் இறுதி ஸ்டைல்களைத் தீர்மானிக்கிறது. இதில் செலக்டர்களைத் தீர்ப்பது, கேஸ்கேடைக் கையாளுவது, மற்றும் ஒவ்வொரு நோடுக்கும் கணக்கிடப்பட்ட ஸ்டைலைக் கணக்கிடுவது ஆகியவை அடங்கும்.
• லேஅவுட் (Layout) (அல்லது Reflow): இதுதான் நமது முதன்மை கவனம். ஸ்டைல்கள் கணக்கிடப்பட்ட பிறகு, உலாவி ஒவ்வொரு உறுப்பின் வடிவவியலையும் கணக்கிடுகிறது. ஒவ்வொரு உறுப்பும் பக்கத்தில் எங்கு செல்ல வேண்டும், எவ்வளவு இடத்தை அது ஆக்கிரமிக்கும் என்பதை அது தீர்மானிக்கிறது. அகலங்கள், உயரங்கள் மற்றும் நிலைகள் போன்ற வடிவவியல் தகவல்களை உள்ளடக்கிய ஒரு 'லேஅவுட் ட்ரீ' அல்லது 'ரெண்டர் ட்ரீ'-ஐ இது உருவாக்குகிறது.
• பெயிண்ட் (Paint): இந்த நிலையில், உலாவி பிக்சல்களை நிரப்புகிறது. அது முந்தைய படியிலிருந்து லேஅவுட் ட்ரீயை எடுத்து திரையில் பிக்சல்களின் தொகுப்பாக மாற்றுகிறது. இதில் உரை, வண்ணங்கள், படங்கள், பார்டர்கள் மற்றும் நிழல்கள்—அடிப்படையில், கூறுகளின் அனைத்து காட்சிப் பகுதிகளையும் வரைவது அடங்கும்.
• காம்போசிட் (Composite): உலாவி பல்வேறு பெயிண்ட் செய்யப்பட்ட லேயர்களை சரியான வரிசையில் திரையில் வரைகிறது. ஒன்றின் மீது ஒன்று வரும் அல்லது `transform` அல்லது `opacity` போன்ற குறிப்பிட்ட பண்புகளைக் கொண்ட கூறுகள் பெரும்பாலும் அடுத்தடுத்த புதுப்பிப்புகளை மேம்படுத்த அவற்றின் சொந்த லேயர்களில் கையாளப்படுகின்றன.

கிரிட் செயல்திறனுக்கு 'லேஅவுட்' கட்டம் ஏன் முக்கியமானது

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

உலாவியின் லேஅவுட் இன்ஜின் ஒரு இறுதி லேஅவுட்டை அடைய இந்த சிக்கலான சமன்பாடுகளின் அமைப்பைத் தீர்க்க வேண்டும். உங்கள் கிரிட் டிராக்குகளை நீங்கள் வரையறுக்கும் விதம்—உங்கள் அளவு அலகுகள் மற்றும் செயல்பாடுகளின் தேர்வு—இந்த அமைப்பைத் தீர்க்கத் தேவையான சிரமத்தையும், எனவே, நேரத்தையும் நேரடியாக பாதிக்கிறது. இதனால்தான் `grid-template-columns`-இல் ஒரு சிறிய மாற்றம் கூட ரெண்டரிங் செயல்திறனில் ஒரு விகிதாசாரமற்ற தாக்கத்தை ஏற்படுத்தும்.

CSS Grid டிராக் அளவிடுதலின் உடற்கூறியல்: ஒரு செயல்திறன் கண்ணோட்டம்

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

1. நிலையான மற்றும் கணிக்கக்கூடிய அளவிடுதல்

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

• நிலையான அலகுகள் (`px`, `rem`, `em`): நீங்கள் ஒரு டிராக்கை `grid-template-columns: 200px 10rem;` என்று வரையறுக்கும்போது, உலாவிக்கு இந்த டிராக்குகளின் சரியான அளவு உடனடியாகத் தெரியும். சிக்கலான கணக்கீடு எதுவும் தேவையில்லை. இது கணக்கீட்டு ரீதியாக மிகவும் மலிவானது.
• சதவிகித அலகுகள் (`%`): ஒரு சதவிகிதம் கிரிட் கண்டெய்னரின் அளவைப் பொறுத்து தீர்க்கப்படுகிறது. இதற்கு ஒரு கூடுதல் படி (பேரண்ட்டின் அகலத்தைப் பெறுதல்) தேவைப்பட்டாலும், இது இன்னும் மிக வேகமான மற்றும் தீர்மானிக்கப்பட்ட கணக்கீடு ஆகும். உலாவி இந்த அளவுகளை லேஅவுட் செயல்முறையின் ஆரம்பத்திலேயே தீர்க்க முடியும்.

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

2. நெகிழ்வான அளவிடுதல்

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

• பின்ன அலகுகள் (`fr`): `fr` யூனிட் கிரிட் கண்டெய்னரில் உள்ள கிடைக்கும் இடத்தின் ஒரு பின்னத்தைக் குறிக்கிறது. `fr` அலகுகளைத் தீர்க்க, உலாவி முதலில் நெகிழ்வற்ற அனைத்து டிராக்குகளும் (`px` அல்லது `auto` டிராக்குகள் போன்றவை) எடுத்த இடத்தைக் கழித்து, பின்னர் மீதமுள்ள இடத்தை `fr` டிராக்குகளுக்கு அவற்றின் பின்னத்திற்கு ஏற்ப பிரிக்கிறது.

செயல்திறன் விவரக்குறிப்பு: `fr` அலகுகளுக்கான கணக்கீடு ஒரு பல-படி செயல்முறை, ஆனால் இது ஒரு நன்கு வரையறுக்கப்பட்ட கணித செயல்பாடு, இது கிரிட் ஐட்டங்களின் உள்ளடக்கத்தைச் சார்ந்தது அல்ல. பெரும்பாலான பொதுவான பயன்பாட்டு நிகழ்வுகளுக்கு, இது மிகவும் செயல்திறன் மிக்கது.

3. உள்ளடக்கம் சார்ந்த அளவிடுதல் (செயல்திறன் ஹாட்ஸ்பாட்)

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

• `min-content`: உள்ளடக்கத்தின் உள்ளார்ந்த குறைந்தபட்ச அகலத்தைக் குறிக்கிறது. உரைக்கு, இது பொதுவாக மிக நீளமான வார்த்தை அல்லது உடைக்க முடியாத சரத்தின் அகலமாகும். இதைக் கணக்கிட, உலாவியின் லேஅவுட் இன்ஜின் அந்த அகலமான பகுதியைக் கண்டுபிடிக்க உள்ளடக்கத்தை கருத்தியல் ரீதியாக லேஅவுட் செய்ய வேண்டும்.
• `max-content`: உள்ளடக்கத்தின் உள்ளார்ந்த விரும்பத்தக்க அகலத்தைக் குறிக்கிறது, இது வெளிப்படையாகக் குறிப்பிடப்பட்டவை தவிர வேறு எந்த வரி முறிவுகளும் இல்லாமல் அது எடுக்கும் அகலமாகும். இதைக் கணக்கிட, உலாவி முழு உள்ளடக்கத்தையும் ஒரே, எல்லையற்ற நீளமான வரியில் கருத்தியல் ரீதியாக லேஅவுட் செய்ய வேண்டும்.
• `auto`: இந்த முக்கிய வார்த்தை சூழலைப் பொறுத்தது. கிரிட் டிராக்குகளின் அளவை நிர்ணயிக்கப் பயன்படுத்தும்போது, அது பொதுவாக `max-content` போலவே செயல்படும், ஐட்டம் நீட்டிக்கப்பட்டாலோ அல்லது ஒரு குறிப்பிட்ட அளவு இருந்தாலோ தவிர. அதன் சிக்கலானது `max-content`-ஐப் போன்றது, ஏனெனில் உலாவி அதன் அளவைத் தீர்மானிக்க உள்ளடக்கத்தை அடிக்கடி அளவிட வேண்டும்.

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

4. செயல்பாடு சார்ந்த அளவிடுதல்

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

• `minmax(min, max)`: இந்த செயல்பாடு ஒரு அளவு வரம்பை வரையறுக்கிறது. `minmax()`-இன் செயல்திறன் அதன் ஆர்குமெண்ட்களுக்குப் பயன்படுத்தப்படும் அலகுகளை முழுமையாகச் சார்ந்துள்ளது. `minmax(200px, 1fr)` மிகவும் செயல்திறன் மிக்கது, ஏனெனில் இது ஒரு நிலையான மதிப்பை ஒரு நெகிழ்வான மதிப்புடன் இணைக்கிறது. இருப்பினும், `minmax(min-content, 500px)` `min-content`-இன் செயல்திறன் செலவைப் பெறுகிறது, ஏனெனில் உலாவி அது அதிகபட்ச மதிப்பை விட பெரியதா என்பதைக் காண அதை இன்னும் கணக்கிட வேண்டும்.
• `fit-content(value)`: இது திறம்பட ஒரு கிளாம்ப் ஆகும். இது `minmax(auto, max-content)`-க்கு சமம், ஆனால் கொடுக்கப்பட்ட `value`-இல் கட்டுப்படுத்தப்படுகிறது. எனவே, `fit-content(300px)` `minmax(min-content, max(min-content, 300px))`-ஐப் போல செயல்படுகிறது. இதுவும் உள்ளடக்கம் சார்ந்த அளவிடுதலின் செயல்திறன் செலவைக் கொண்டுள்ளது.

தொழிலின் கருவிகள்: Chrome DevTools உடன் விவரக்குறிப்பிடுதல்

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

ஒரு செயல்திறன் விவரக்குறிப்பை எவ்வாறு பதிவு செய்வது

உங்களுக்குத் தேவையான தரவைப் பிடிக்க இந்த படிகளைப் பின்பற்றவும்:

1. உங்கள் வலைப்பக்கத்தை குரோமில் திறக்கவும்.
2. DevTools-ஐத் திறக்கவும் (F12, Ctrl+Shift+I, அல்லது Cmd+Opt+I).
3. செயல்திறன் (Performance) தாவலுக்குச் செல்லவும்.
4. உங்கள் காலவரிசையில் பயனுள்ள குறிப்பான்களைப் பெற "Web Vitals" தேர்வுப்பெட்டி தேர்வு செய்யப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும்.
5. பதிவு (Record) பொத்தானை (வட்டம்) கிளிக் செய்யவும் அல்லது Ctrl+E ஐ அழுத்தவும்.
6. நீங்கள் விவரக்குறிப்பிட விரும்பும் செயலைச் செய்யவும். இது ஆரம்ப பக்க ஏற்றுதல், உலாவி சாளரத்தை மறுஅளவிடுதல், அல்லது கிரிட்டில் மாறும் வகையில் உள்ளடக்கத்தைச் சேர்க்கும் ஒரு செயல் (ஒரு வடிப்பானைப் பயன்படுத்துவது போன்றவை) ஆக இருக்கலாம். இவை அனைத்தும் லேஅவுட் கணக்கீடுகளைத் தூண்டும் செயல்கள்.
7. நிறுத்து (Stop) என்பதைக் கிளிக் செய்யவும் அல்லது மீண்டும் Ctrl+E ஐ அழுத்தவும்.
8. DevTools தரவைச் செயலாக்கி உங்களுக்கு ஒரு விரிவான காலவரிசையை வழங்கும்.

சுடர் விளக்கப்படத்தை (Flame Chart) பகுப்பாய்வு செய்தல்

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

"Rendering" என்று பெயரிடப்பட்ட நீண்ட, ஊதா நிற பார்களைத் தேடுங்கள். இவற்றிற்குள், "Layout" என்று பெயரிடப்பட்ட இருண்ட ஊதா நிகழ்வுகளைக் காண்பீர்கள். இவை உலாவி பக்கத்தின் வடிவவியலைக் கணக்கிடும் குறிப்பிட்ட தருணங்கள்.

• நீண்ட லேஅவுட் பணிகள்: ஒரு நீண்ட 'Layout' பிளாக் ஒரு சிவப்பு கொடி. அதன் கால அளவைக் காண அதன் மீது வட்டமிடுங்கள். ஒரு சக்திவாய்ந்த கணினியில் சில மில்லி விநாடிகளுக்கு மேல் (எ.கா., > 10-15ms) எடுக்கும் எந்த லேஅவுட் பணியும் விசாரணைக்குரியது, ஏனெனில் அது குறைந்த சக்தி வாய்ந்த சாதனங்களில் மிகவும் மெதுவாக இருக்கும்.
• லேஅவுட் த்ராஷிங்: பல சிறிய 'Layout' நிகழ்வுகள் விரைவாக ஒன்றன் பின் ஒன்றாக நடப்பதைத் தேடுங்கள், பெரும்பாலும் ஜாவாஸ்கிரிப்ட் ('Scripting' நிகழ்வுகள்) உடன் கலந்திருக்கும். இந்த முறை, லேஅவுட் த்ராஷிங் என அழைக்கப்படுகிறது, ஜாவாஸ்கிரிப்ட் ஒரு வடிவவியல் பண்பை (`offsetHeight` போன்றவை) மீண்டும் மீண்டும் படிக்கும்போது, பின்னர் அதை செல்லாததாக்கும் ஒரு ஸ்டைலை எழுதும் போது ஏற்படுகிறது, இது உலாவியை ஒரு லூப்பில் மீண்டும் மீண்டும் லேஅவுட்டைக் கணக்கிட கட்டாயப்படுத்துகிறது.

சுருக்கம் மற்றும் செயல்திறன் கண்காணிப்பானைப் பயன்படுத்துதல்

• சுருக்கம் தாவல் (Summary Tab): சுடர் விளக்கப்படத்தில் ஒரு நேர வரம்பைத் தேர்ந்தெடுத்த பிறகு, கீழே உள்ள சுருக்கம் தாவல் செலவழித்த நேரத்தைப் பிரிக்கும் ஒரு பை விளக்கப்படத்தை வழங்குகிறது. "Rendering" மற்றும் குறிப்பாக "Layout"-க்கு ஒதுக்கப்பட்ட சதவீதத்தில் அதிக கவனம் செலுத்துங்கள்.
• செயல்திறன் கண்காணிப்பான் (Performance Monitor): நிகழ்நேர பகுப்பாய்விற்கு, செயல்திறன் கண்காணிப்பானைத் திறக்கவும் (DevTools மெனுவிலிருந்து: More tools > Performance monitor). இது CPU பயன்பாடு, JS ஹீப் அளவு, DOM நோடுகள், மற்றும் முக்கியமாக, Layouts/sec ஆகியவற்றிற்கான நேரடி வரைபடங்களை வழங்குகிறது. உங்கள் பக்கத்துடன் தொடர்புகொண்டு இந்த வரைபடம் உயர்வதைப் பார்ப்பது, எந்த செயல்கள் விலையுயர்ந்த லேஅவுட் மறு கணக்கீடுகளைத் தூண்டுகின்றன என்பதை உடனடியாக உங்களுக்குத் தெரிவிக்கும்.

நடைமுறை விவரக்குறிப்பு காட்சிகள்: கோட்பாட்டிலிருந்து நடைமுறைக்கு

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

காட்சி 1: நிலையான & நெகிழ்வான (`px` மற்றும் `fr`) எதிராக உள்ளடக்கம் சார்ந்த (`auto`)

100 ஐட்டங்களைக் கொண்ட ஒரு தயாரிப்பு கிரிட்டை கற்பனை செய்து பாருங்கள். பத்திகளுக்கான இரண்டு அணுகுமுறைகளை ஒப்பிடுவோம்.

அணுகுமுறை A (செயல்திறன் மிக்கது): `minmax()`-ஐ ஒரு நிலையான குறைந்தபட்சம் மற்றும் ஒரு நெகிழ்வான அதிகபட்சத்துடன் பயன்படுத்துதல்.

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

அணுகுமுறை B (மெதுவாக இருக்க வாய்ப்புள்ளது): உள்ளடக்கத்தை பத்தியின் அளவை வரையறுக்க `auto` அல்லது `max-content`-ஐப் பயன்படுத்துதல்.

grid-template-columns: repeat(auto-fill, minmax(auto, 300px));

பகுப்பாய்வு:

• அணுகுமுறை A-இல், உலாவியின் பணி எளிமையானது. ஒவ்வொரு ஐட்டத்தின் குறைந்தபட்ச அகலம் 250px என்று அது அறியும். கண்டெய்னரின் அகலத்தில் எத்தனை ஐட்டங்கள் பொருந்தும் என்பதை அது விரைவாகக் கணக்கிட்டு, பின்னர் மீதமுள்ள இடத்தை அவற்றுக்கிடையே விநியோகிக்க முடியும். இது ஒரு வேகமான, புறநிலை அளவிடுதல் அணுகுமுறை, இதில் கண்டெய்னர் கட்டுப்பாட்டில் உள்ளது. செயல்திறன் விவரக்குறிப்பில் லேஅவுட் பணி மிகக் குறுகியதாக இருக்கும்.
• அணுகுமுறை B-இல், உலாவிக்கு மிகவும் கடினமான வேலை உள்ளது. `auto` முக்கிய வார்த்தை (இந்த சூழலில், பெரும்பாலும் `max-content`-க்கு தீர்க்கப்படுகிறது) என்பது ஒரு பத்தியின் அகலத்தைத் தீர்மானிக்க, உலாவி முதலில் 100 தயாரிப்பு கார்டுகளில் ஒவ்வொன்றின் உள்ளடக்கத்தையும் அதன் `max-content` அகலத்தைக் கண்டுபிடிக்க கருத்தியல் ரீதியாக ரெண்டர் செய்ய வேண்டும். அது பின்னர் இந்த அளவீட்டை அதன் கிரிட்-தீர்க்கும் அல்காரிதத்தில் பயன்படுத்துகிறது. இந்த உள்ளார்ந்த அளவிடுதல் அணுகுமுறைக்கு இறுதி லேஅவுட் தீர்மானிக்கப்படுவதற்கு முன்பு ஒரு பெரிய அளவிலான முன்கூட்டிய அளவீட்டு வேலை தேவைப்படுகிறது. செயல்திறன் விவரக்குறிப்பில் லேஅவுட் பணி கணிசமாக நீளமாக இருக்கும், ஒருவேளை ஒரு மடங்கு அதிகமாக இருக்கலாம்.

காட்சி 2: ஆழமாக உள்ளமைக்கப்பட்ட கிரிட்களின் செலவு

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

எடுத்துக்காட்டு:

ஒரு முக்கிய பக்க லேஅவுட் ஒரு இரண்டு-பத்தி கிரிட் ஆகும்: `grid-template-columns: max-content 1fr;`. முதல் பத்தி பல்வேறு விட்ஜெட்களைக் கொண்ட ஒரு சைடுபார் ஆகும். இந்த விட்ஜெட்களில் ஒன்று ஒரு காலண்டர், இதுவும் CSS Grid-ஆல் உருவாக்கப்பட்டது.

பகுப்பாய்வு:

உலாவியின் லேஅவுட் இன்ஜின் ஒரு சவாலான சார்பு சங்கிலியை எதிர்கொள்கிறது:

1. முக்கிய பக்கத்தின் `max-content` பத்தியைத் தீர்க்க, அது சைடுபாரின் `max-content` அகலத்தைக் கணக்கிட வேண்டும்.
2. சைடுபாரின் அகலத்தைக் கணக்கிட, அது காலண்டர் விட்ஜெட் உட்பட அதன் அனைத்து பிள்ளைகளின் அகலத்தையும் கணக்கிட வேண்டும்.
3. காலண்டர் விட்ஜெட்டின் அகலத்தைக் கணக்கிட, அது அதன் சொந்த உள் கிரிட் லேஅவுட்டைத் தீர்க்க வேண்டும்.

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

மேம்படுத்தல் உத்திகள் மற்றும் சிறந்த நடைமுறைகள்

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

1. உள்ளார்ந்த அளவிடுதலை விட புறநிலை அளவிடுதலை விரும்புங்கள்

இது கிரிட் செயல்திறனின் பொன் விதி. முடிந்தவரை, கிரிட் கண்டெய்னர் அதன் டிராக்குகளின் பரிமாணங்களை `px`, `rem`, `%`, மற்றும் `fr` போன்ற அலகுகளைப் பயன்படுத்தி வரையறுக்கட்டும். இது உலாவியின் லேஅவுட் இன்ஜினுக்கு வேலை செய்ய ஒரு தெளிவான, கணிக்கக்கூடிய கட்டுப்பாடுகளின் தொகுப்பை வழங்குகிறது, இதன் விளைவாக வேகமான கணக்கீடுகள் ஏற்படுகின்றன.

இதற்கு பதிலாக (உள்ளார்ந்தது):

grid-template-columns: repeat(auto-fit, max-content);

இதை விரும்புங்கள் (புறநிலை):

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

2. உள்ளடக்கம் சார்ந்த அளவிடுதலின் நோக்கத்தைக் கட்டுப்படுத்துங்கள்

டிராப்டவுன் மெனுக்கள் அல்லது படிவ புலங்களுக்கு அடுத்த லேபிள்கள் போன்ற `min-content` மற்றும் `max-content`-க்கான சரியான பயன்பாட்டு நிகழ்வுகள் உள்ளன. நீங்கள் அவற்றைப் பயன்படுத்த வேண்டியிருக்கும்போது, அவற்றின் தாக்கத்தைக் குறைக்க முயற்சிக்கவும்:

• சில டிராக்குகளுக்குப் பயன்படுத்துங்கள்: அவற்றை ஒரு பத்தி அல்லது வரிசையில் பயன்படுத்துங்கள், நூற்றுக்கணக்கான ஐட்டங்களைக் கொண்ட ஒரு மீண்டும் வரும் வடிவத்தில் அல்ல.
• பேரண்ட்டைக் கட்டுப்படுத்துங்கள்: உள்ளடக்கம் சார்ந்த அளவிடுதலைப் பயன்படுத்தும் கிரிட்டை ஒரு `max-width` உள்ள ஒரு கண்டெய்னருக்குள் வைக்கவும். இது லேஅவுட் இன்ஜினுக்கு ஒரு எல்லையை வழங்குகிறது, இது சில நேரங்களில் கணக்கீட்டை மேம்படுத்த உதவும்.
• `minmax()` உடன் இணைக்கவும்: உள்ளடக்கம் சார்ந்த முக்கிய வார்த்தையுடன் ஒரு நியாயமான குறைந்தபட்ச அல்லது அதிகபட்ச மதிப்பை வழங்கவும், `minmax(200px, max-content)` போல. இது உலாவிக்கு அதன் கணக்கீடுகளில் ஒரு தொடக்கத்தைக் கொடுக்கும்.

3. `subgrid`-ஐப் புரிந்து கொண்டு புத்திசாலித்தனமாகப் பயன்படுத்துங்கள்

`subgrid` என்பது ஒரு சக்திவாய்ந்த அம்சம், இது ஒரு உள்ளமைக்கப்பட்ட கிரிட் அதன் பேரண்ட் கிரிட்டின் டிராக் வரையறையை ஏற்க அனுமதிக்கிறது. இது சீரமைப்புக்கு அற்புதமானது.

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

4. மெய்நிகராக்கம்: பெரிய தரவுத்தொகுப்புகளுக்கான இறுதி தீர்வு

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

தீர்வு மெய்நிகராக்கம் (அல்லது 'விண்டோயிங்') ஆகும். இது ஒரு ஜாவாஸ்கிரிப்ட் அடிப்படையிலான நுட்பம், இதில் நீங்கள் தற்போதைய வ்யூபோர்ட்டில் தெரியும் சில DOM கூறுகளை மட்டுமே ரெண்டர் செய்கிறீர்கள். பயனர் ஸ்க்ரோல் செய்யும்போது, நீங்கள் இந்த DOM நோடுகளை மீண்டும் பயன்படுத்தி அவற்றின் உள்ளடக்கத்தை மாற்றுகிறீர்கள். இது ஒரு லேஅவுட் கணக்கீட்டின் போது உலாவி கையாள வேண்டிய கூறுகளின் எண்ணிக்கையை சிறியதாகவும் நிலையானதாகவும் வைத்திருக்கிறது, உங்கள் தரவுத்தொகுப்பில் 100 அல்லது 100,000 ஐட்டங்கள் இருந்தாலும் சரி.

`react-window` மற்றும் `tanstack-virtual` போன்ற நூலகங்கள் இந்த வடிவத்தின் வலுவான செயலாக்கங்களை வழங்குகின்றன. உண்மையிலேயே பெரிய அளவிலான கிரிட்களுக்கு, இது நீங்கள் செய்யக்கூடிய மிகவும் பயனுள்ள செயல்திறன் மேம்படுத்தலாகும்.

வழக்கு ஆய்வு: ஒரு தயாரிப்பு பட்டியல் கிரிட்டை மேம்படுத்துதல்

ஒரு உலகளாவிய இ-காமர்ஸ் வலைத்தளத்திற்கான ஒரு யதார்த்தமான மேம்படுத்தல் காட்சியைப் பார்ப்போம்.

சிக்கல்: தயாரிப்பு பட்டியல் பக்கம் மந்தமாக உணர்கிறது. உலாவி சாளரம் மறுஅளவிடப்படும்போது அல்லது வடிப்பான்கள் பயன்படுத்தப்படும்போது, தயாரிப்புகள் அவற்றின் புதிய நிலைகளுக்குள் ரீஃப்ளோ ஆவதற்கு முன்பு ஒரு குறிப்பிடத்தக்க தாமதம் ஏற்படுகிறது. அடுத்த பெயிண்டிற்கான தொடர்பு (Interaction to Next Paint - INP) க்கான முக்கிய இணைய அளவீடுகள் மதிப்பெண் மோசமாக உள்ளது.

ஆரம்ப குறியீடு ("முந்தைய" நிலை):

கிரிட் மிகவும் நெகிழ்வானதாக வரையறுக்கப்பட்டுள்ளது, தயாரிப்பு கார்டுகள் அவற்றின் உள்ளடக்கத்தின் அடிப்படையில் (எ.கா., நீண்ட தயாரிப்பு பெயர்கள்) பத்தி அகலங்களைக் கட்டளையிட அனுமதிக்கிறது.

.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, fit-content(320px));
gap: 1rem;
}

செயல்திறன் பகுப்பாய்வு:

1. உலாவி சாளரத்தை மறுஅளவிடும்போது ஒரு செயல்திறன் விவரக்குறிப்பைப் பதிவு செய்கிறோம்.
2. சுடர் விளக்கப்படம் மறுஅளவிடுதல் நிகழ்வு ஒவ்வொரு முறையும் ஒரு நீண்ட, மீண்டும் வரும் 'Layout' பணியைக் காட்டுகிறது, இது ஒரு சராசரி சாதனத்தில் 80ms-க்கு மேல் எடுக்கும்.
3. `fit-content()` செயல்பாடு `min-content` மற்றும் `max-content` கணக்கீடுகளை நம்பியுள்ளது. ஒவ்வொரு மறுஅளவிற்கும், உலாவி கிரிட் கட்டமைப்பை மறு கணக்கிட அனைத்து தெரியும் தயாரிப்பு கார்டுகளின் உள்ளடக்கத்தையும் வெறித்தனமாக மறு அளவிடுகிறது என்பதை விவரக்குறிப்பாளர் உறுதிப்படுத்துகிறார். இதுதான் தாமதத்தின் ஆதாரம்.

தீர்வு ("பிந்தைய" நிலை):

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

.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
}

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

.product-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

முடிவு:

1. மறுஅளவிடும்போது ஒரு புதிய செயல்திறன் விவரக்குறிப்பைப் பதிவு செய்கிறோம்.
2. சுடர் விளக்கப்படம் இப்போது 'Layout' பணி நம்பமுடியாத அளவிற்கு குறுகியதாகக் காட்டுகிறது, தொடர்ந்து 5ms-க்குக் குறைவாக.
3. உலாவி இனி உள்ளடக்கத்தை அளவிடத் தேவையில்லை. இது கண்டெய்னரின் அகலம் மற்றும் `280px` குறைந்தபட்சத்தை அடிப்படையாகக் கொண்டு ஒரு எளிய கணித கணக்கீட்டைச் செய்கிறது.
4. பயனர் அனுபவம் மாற்றப்பட்டுள்ளது. மறுஅளவிடுதல் மென்மையாகவும் உடனடியாகவும் உள்ளது. வடிப்பான்களைப் பயன்படுத்துவது விரைவாக உணர்கிறது, ஏனெனில் உலாவி புதிய லேஅவுட்டை கிட்டத்தட்ட உடனடியாகக் கணக்கிட முடியும்.

குறுக்கு-உலாவி கருவிகள் பற்றிய ஒரு குறிப்பு

இந்த வழிகாட்டி Chrome DevTools-இல் கவனம் செலுத்தியிருந்தாலும், பயனர்கள் பல்வேறு உலாவி விருப்பங்களைக் கொண்டுள்ளனர் என்பதை நினைவில் கொள்வது முக்கியம். பயர்பாக்ஸின் டெவலப்பர் கருவிகள் ஒரு சிறந்த செயல்திறன் பேனலைக் கொண்டுள்ளன (பெரும்பாலும் 'புரோஃபைலர்' என்று அழைக்கப்படுகிறது), இது இதே போன்ற சுடர் விளக்கப்படங்கள் மற்றும் பகுப்பாய்வு திறன்களை வழங்குகிறது. சஃபாரியின் வலை இன்ஸ்பெக்டரும் ரெண்டரிங் செயல்திறனை விவரக்குறிப்பிடுவதற்கு ஒரு சக்திவாய்ந்த 'டைம்லைன்ஸ்' தாவலைக் கொண்டுள்ளது. உங்கள் முழு உலகளாவிய பார்வையாளர்களுக்கும் ஒரு சீரான, உயர்தர அனுபவத்தை உறுதிப்படுத்த, உங்கள் மேம்படுத்தல்களை முக்கிய உலாவிகளில் எப்போதும் சோதிக்கவும்.

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

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

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

• லேஅவுட் ஒரு செயல்திறன் தடையாகும்: ரெண்டரிங்கின் 'லேஅவுட்' கட்டம் விலை உயர்ந்ததாக இருக்கலாம், குறிப்பாக CSS Grid போன்ற சிக்கலான, கட்டுப்பாடு அடிப்படையிலான அமைப்புகளுடன்.
• அளவிடுதல் உத்தி முக்கியம்: புறநிலை, கண்டெய்னர்-வரையறுத்த அளவிடுதல் (`px`, `fr`, `%`) கிட்டத்தட்ட எப்போதும் உள்ளார்ந்த, உள்ளடக்கம் சார்ந்த அளவிடுதலை (`min-content`, `max-content`, `auto`) விட அதிக செயல்திறன் மிக்கது.
• அளவிடுங்கள், யூகிக்காதீர்கள்: உலாவி செயல்திறன் விவரக்குறிப்பாளர்கள் பிழைதிருத்தத்திற்கு மட்டுமல்ல. உங்கள் லேஅவுட் தேர்வுகளைப் பகுப்பாய்வு செய்யவும் உங்கள் மேம்படுத்தல்களைச் சரிபார்க்கவும் அவற்றை முன்கூட்டியே பயன்படுத்தவும்.
• பொதுவான வழக்கிற்கு மேம்படுத்துங்கள்: பெரிய ஐட்டங்களின் தொகுப்புகளுக்கு, ஒரு சிக்கலான, உள்ளடக்கம்-சார்ந்த ஒன்றை விட ஒரு எளிய, புறநிலை கிரிட் வரையறை ஒரு சிறந்த பயனர் அனுபவத்தை வழங்கும்.

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