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

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

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

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

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

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

contain இன் சக்தியை உண்மையாகப் பாராட்ட, HTML, CSS மற்றும் JavaScript-ஐ உங்கள் திரையில் பிக்சல்களாக மாற்ற உலாவிகள் எடுக்கும் அடிப்படைக் படிகளைப் புரிந்துகொள்வது அவசியம். இந்த செயல்முறை சிக்கலான ரெண்டரிங் பாதை என்று அழைக்கப்படுகிறது. எளிமைப்படுத்தப்பட்டாலும், அதன் முக்கிய கட்டங்களைப் புரிந்துகொள்வது செயல்திறன் தடைகள் எங்கு அடிக்கடி நிகழ்கின்றன என்பதைக் கண்டறிய உதவுகிறது:

• DOM (Document Object Model) உருவாக்கம்: உலாவி HTML-ஐ பாகுபடுத்தி, ஆவணத்தின் உள்ளடக்கம் மற்றும் உறவுகளைக் குறிக்கும் ஒரு மரக் கட்டமைப்பை உருவாக்குகிறது.
• CSSOM (CSS Object Model) உருவாக்கம்: உலாவி CSS-ஐ பாகுபடுத்தி, கூறுகளுக்குப் பயன்படுத்தப்படும் ஸ்டைல்களின் மரக் கட்டமைப்பை உருவாக்குகிறது.
• ரெண்டர் மரம் உருவாக்கம்: DOM மற்றும் CSSOM இணைந்து ரெண்டர் மரத்தை உருவாக்குகின்றன, இதில் தெரியும் கூறுகள் மற்றும் அவற்றின் கணக்கிடப்பட்ட ஸ்டைல்கள் மட்டுமே உள்ளன. இதுவே உண்மையில் ரெண்டர் செய்யப்படும்.
• லேஅவுட் (ரிஃப்ளோ/ரிலேஅவுட்): இது மிகவும் வளம்-தீவிரமான படிகளில் ஒன்றாகும். உலாவி ரெண்டர் மரத்தின் அடிப்படையில் பக்கத்தில் உள்ள ஒவ்வொரு தெரியும் தனிமத்தின் சரியான நிலை மற்றும் அளவைக் கணக்கிடுகிறது. ஒரு தனிமத்தின் அளவு அல்லது நிலை மாறினால், அல்லது புதிய தனிமங்கள் சேர்க்கப்பட்டால் அல்லது அகற்றப்பட்டால், உலாவி பெரும்பாலும் பக்கத்தின் ஒரு குறிப்பிடத்தக்க பகுதிக்கு அல்லது முழுமைக்கும் லேஅவுட்டை மறுகணக்கீடு செய்ய வேண்டும். இந்த உலகளாவிய மறுகணக்கீடு "ரிஃப்ளோ" அல்லது "ரிலேஅவுட்" என்று அழைக்கப்படுகிறது மற்றும் இது ஒரு பெரிய செயல்திறன் தடையாகும்.
• பெயின்ட் (ரீபெயின்ட்): லேஅவுட் தீர்மானிக்கப்பட்டவுடன், உலாவி ஒவ்வொரு தனிமத்திற்கும் பிக்சல்களை திரையில் வரைகிறது (பெயின்ட் செய்கிறது). இது கணக்கிடப்பட்ட ஸ்டைல்களை (வண்ணங்கள், பின்னணிகள், பார்டர்கள், நிழல்கள் போன்றவை) உண்மையான பிக்சல்களாக மாற்றுவதை உள்ளடக்கியது. லேஅவுட் போலவே, ஒரு தனிமத்தின் காட்சி பண்புகளில் ஏற்படும் மாற்றங்கள் அந்த தனிமத்திற்கும் அதன் மேலடுக்கு தனிமங்களுக்கும் ஒரு "ரீபெயின்ட்" ஐத் தூண்டக்கூடும். ஒரு ரிஃப்ளோவை விட இது பெரும்பாலும் குறைவான செலவுமிக்கதாக இருந்தாலும், அடிக்கடி அல்லது பெரிய ரீபெயின்ட்கள் செயல்திறனைக் குறைக்கலாம்.
• கம்போசிட்டிங்: வரையப்பட்ட லேயர்கள் சரியான வரிசையில் இணைக்கப்பட்டு (கம்போசிட்) திரையில் இறுதிப் படத்தை உருவாக்குகின்றன.

இங்கே முக்கியமாகக் கவனிக்க வேண்டியது என்னவென்றால், லேஅவுட் மற்றும் பெயின்ட் கட்டங்களில் செயல்பாடுகள் பெரும்பாலும் செயல்திறனில் குறிப்பிடத்தக்க பாதிப்பை ஏற்படுத்துகின்றன. லேஅவுட்டைப் பாதிக்கும் DOM அல்லது CSSOM இல் மாற்றம் ஏற்படும் போதெல்லாம் (எ.கா., ஒரு தனிமத்தின் `width`, `height`, `margin`, `padding`, `display` அல்லது `position` ஐ மாற்றுவது), உலாவி பல தனிமங்களுக்கு லேஅவுட் படியை மீண்டும் இயக்க வேண்டிய கட்டாயம் ஏற்படலாம். இதேபோல், காட்சி மாற்றங்களுக்கு (எ.கா., `color`, `background-color`, `box-shadow`) ரீபெயின்ட் தேவைப்படுகிறது. கண்டெய்ன்மென்ட் இல்லாமல், ஒரு தனிமைப்படுத்தப்பட்ட கூறில் ஒரு சிறிய புதுப்பிப்பு தேவையற்ற முறையில் முழு வலைப்பக்கத்திலும் முழு மறுகணக்கீட்டைத் தூண்டக்கூடும், இது மதிப்புமிக்க செயலாக்க சுழற்சிகளை வீணடித்து, தடுமாறும் பயனர் அனுபவத்தில் விளைகிறது.

சுதந்திரத்தை அறிவித்தல்: contain பண்பின் ஆழமான பார்வை

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

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

• none (இயல்புநிலை): எந்த கண்டெய்ன்மென்டும் பயன்படுத்தப்படவில்லை. தனிமத்திற்குள் ஏற்படும் மாற்றங்கள் முழுப் பக்கத்தையும் பாதிக்கலாம்.
• layout: லேஅவுட் மாற்றங்களைக் கட்டுப்படுத்துகிறது.
• paint: பெயின்ட் மாற்றங்களைக் கட்டுப்படுத்துகிறது.
• size: தனிமத்தின் அளவு நிலையானது என்று குறிப்பிடுகிறது.
• style: ஸ்டைல் செல்லுபடியாகாமல் போவதைக் கட்டுப்படுத்துகிறது.
• content: layout மற்றும் paint க்கான சுருக்கம்.
• strict: layout, paint, size, மற்றும் style க்கான சுருக்கம்.

இந்த மதிப்புகள் ஒவ்வொன்றையும் அவற்றின் குறிப்பிட்ட நன்மைகள் மற்றும் தாக்கங்களைப் புரிந்துகொள்ள விரிவாக ஆராய்வோம்.

contain: layout; – வடிவவியல் தனிமைப்படுத்தலை மாஸ்டரிங் செய்தல்

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

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

நன்மைகள்:

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

பயன்பாட்டு வழக்குகள்:

• சுயாதீனமான UI கூறுகள்: ஒரு சிக்கலான படிவ சரிபார்ப்பு கூறில் பிழை செய்திகள் தோன்றலாம் அல்லது மறையலாம், இதனால் படிவத்தின் உள் லேஅவுட் மாறலாம். படிவ கொள்கலனுக்கு contain: layout; ஐப் பயன்படுத்துவது இந்த மாற்றங்கள் அடிக்குறிப்பு அல்லது பக்கப்பட்டியைப் பாதிக்காது என்பதை உறுதி செய்கிறது.
• விரிவாக்கக்கூடிய/சுருக்கக்கூடிய பிரிவுகள்: உங்களிடம் ஒரு அக்கார்டியன்-பாணி கூறு இருந்தால், உள்ளடக்கம் விரிவடைகிறது அல்லது சுருங்குகிறது, ஒவ்வொரு பகுதிக்கும் contain: layout; ஐப் பயன்படுத்துவது ஒரு பகுதியின் உயரம் மாறும்போது முழுப் பக்கத்தின் லேஅவுட்டும் மீண்டும் மதிப்பீடு செய்யப்படுவதைத் தடுக்கலாம்.
• விட்ஜெட்டுகள் மற்றும் கார்டுகள்: ஒரு டாஷ்போர்டு அல்லது ஒரு தயாரிப்பு பட்டியல் பக்கத்தில், ஒவ்வொரு உருப்படியும் ஒரு சுயாதீனமான கார்டு அல்லது விட்ஜெட்டாக இருக்கும். ஒரு கார்டுக்குள் ஒரு படம் மெதுவாக ஏற்றப்பட்டால் அல்லது உள்ளடக்கம் மாறும் வகையில் சரிசெய்யப்பட்டால், அந்த கார்டில் contain: layout; ஐப் பயன்படுத்துவது அண்டை கார்டுகள் அல்லது ஒட்டுமொத்த கிரிட் தேவையில்லாமல் ரிஃப்ளோ ஆவதைத் தடுக்கிறது.

கவனிக்க வேண்டியவை:

• கட்டுப்படுத்தப்பட்ட தனிமம் overflow: hidden; அல்லது display: flex; உடன் உள்ள தனிமங்களைப் போலவே, ஒரு புதிய பிளாக் ஃபார்மேட்டிங் சூழலை நிறுவ வேண்டும்.
• உள் லேஅவுட் மாற்றங்கள் கட்டுப்படுத்தப்பட்டாலும், அதன் உள்ளடக்கம் ஒரு புதிய அளவைக் கட்டளையிட்டால் மற்றும் contain: size; பயன்படுத்தப்படாவிட்டால் தனிமம் தானாகவே அளவு மாறக்கூடும்.
• திறம்பட கண்டெய்ன்மென்ட் செய்ய, தனிமத்திற்கு contain: size; ஆல் கண்டிப்பாக அமல்படுத்தப்படாவிட்டாலும், ஒரு வெளிப்படையான அல்லது கணிக்கக்கூடிய அளவு இருப்பது சிறந்தது.

contain: paint; – காட்சிப் புதுப்பிப்புகளைக் கட்டுப்படுத்துதல்

நீங்கள் ஒரு தனிமத்திற்கு contain: paint; ஐப் பயன்படுத்தும்போது, நீங்கள் உலாவிக்குத் தெரிவிக்கிறீர்கள்: "இந்த தனிமத்திற்குள் எதுவும் அதன் எல்லைக்கு வெளியே வரையப்படாது. மேலும், இந்த தனிமம் திரைக்கப்பால் இருந்தால், நீங்கள் அதன் உள்ளடக்கங்களை வரையத் தேவையில்லை." இந்த குறிப்பு ரெண்டரிங் பைப்லைனின் பெயின்டிங் கட்டத்தை கணிசமாக மேம்படுத்துகிறது.

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

நன்மைகள்:

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

பயன்பாட்டு வழக்குகள்:

• முடிவற்ற ஸ்க்ரோலிங் பட்டியல்கள்/மெய்நிகராக்கப்பட்ட உள்ளடக்கம்: ஆயிரக்கணக்கான பட்டியல் உருப்படிகளைக் கையாளும்போது, அவற்றில் ஒரு பகுதி மட்டுமே எந்த நேரத்திலும் தெரியும். ஒவ்வொரு பட்டியல் உருப்படிக்கும் (அல்லது பட்டியல் உருப்படிகளின் ஒரு தொகுதிக்கு கொள்கலன்) contain: paint; ஐப் பயன்படுத்துவது தெரியும் உருப்படிகள் மட்டுமே வரையப்படுவதை உறுதி செய்கிறது.
• திரைக்கப்பால் உள்ள மோடல்கள்/பக்கப்பட்டிகள்: உங்களிடம் ஒரு மோடல் உரையாடல், ஒரு வழிசெலுத்தல் பக்கப்பட்டி அல்லது ஆரம்பத்தில் மறைக்கப்பட்டு பார்வைக்கு வரும் எந்த UI தனிமமும் இருந்தால், அதற்கு contain: paint; ஐப் பயன்படுத்துவது, அது திரைக்கப்பால் இருக்கும்போது உலாவி தேவையற்ற பெயின்ட் வேலையைச் செய்வதைத் தடுக்கலாம்.
• சோம்பேறி ஏற்றுதலுடன் கூடிய படக் காட்சியகங்கள்: ஒரு பக்கத்தில் வெகு தொலைவில் உள்ள படங்களுக்கு, அவற்றின் கொள்கலன்களுக்கு contain: paint; ஐப் பயன்படுத்துவது, அவை பார்வைக்கு வரும் வரை வரையப்படாமல் இருப்பதை உறுதி செய்ய உதவும்.

கவனிக்க வேண்டியவை:

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

contain: size; – பரிமாண நிலைத்தன்மையை உறுதி செய்தல்

ஒரு தனிமத்திற்கு contain: size; ஐப் பயன்படுத்துவது உலாவிக்கு ஒரு அறிவிப்பு: "எனது அளவு நிலையானது மற்றும் உள்ளே என்ன உள்ளடக்கம் இருந்தாலும் அல்லது அது எப்படி மாறினாலும் மாறாது." இது ஒரு சக்திவாய்ந்த குறிப்பு, ஏனெனில் இது தனிமத்தின் அளவைக் கணக்கிட வேண்டிய தேவையை நீக்குகிறது, இது அதன் முன்னோர்கள் மற்றும் உடன்பிறப்புகளுக்கான லேஅவுட் கணக்கீடுகளின் நிலைத்தன்மைக்கு உதவுகிறது.

இது எப்படி வேலை செய்கிறது: contain: size; பயன்படுத்தப்படும்போது, உலாவி தனிமத்தின் பரிமாணங்கள் மாறாதவை என்று கருதுகிறது. இது அதன் உள்ளடக்கம் அல்லது குழந்தைகளைப் பொறுத்து இந்த தனிமத்திற்கு எந்த அளவு கணக்கீடுகளையும் செய்யாது. தனிமத்தின் அகலம் அல்லது உயரம் CSS மூலம் வெளிப்படையாக அமைக்கப்படவில்லை என்றால், உலாவி அதை பூஜ்ஜிய அகலம் மற்றும் உயரம் கொண்டதாகக் கருதும். எனவே, இந்த பண்பு பயனுள்ளதாகவும் பயனுள்ளதாகவும் இருக்க, தனிமத்திற்கு மற்ற CSS பண்புகள் மூலம் ஒரு திட்டவட்டமான அளவு வரையறுக்கப்பட்டிருக்க வேண்டும் (எ.கா., `width`, `height`, `min-height`).

நன்மைகள்:

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

பயன்பாட்டு வழக்குகள்:

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

கவனிக்க வேண்டியவை:

• வெளிப்படையான அளவு நிர்ணயத்திற்கு முக்கியமானது: தனிமத்திற்கு வெளிப்படையான `width` அல்லது `height` (அல்லது ஒரு திட்டவட்டமான அளவுக்குத் தீர்க்கும் `min-height`/`max-height`) இல்லை என்றால், `contain: size;` அதை பூஜ்ஜிய பரிமாணங்களுக்குச் சுருங்கச் செய்யும், அதன் உள்ளடக்கத்தை மறைக்கும் வாய்ப்புள்ளது.
• உள்ளடக்கம் வழிதல்: தனிமத்திற்குள் உள்ள உள்ளடக்கம் அறிவிக்கப்பட்ட நிலையான அளவைத் தாண்டி மாறும் வகையில் வளர்ந்தால், அது வழிந்து, `overflow: visible;` வெளிப்படையாக அமைக்கப்படாவிட்டால் வெட்டப்படலாம் அல்லது மறைக்கப்படலாம் (இது கண்டெய்ன்மென்டின் சில நன்மைகளை மறுக்கக்கூடும்).
• இது அரிதாக தனியாகப் பயன்படுத்தப்படுகிறது, பொதுவாக `layout` மற்றும்/அல்லது `paint` உடன் இணைந்து பயன்படுத்தப்படுகிறது.

contain: style; – ஸ்டைல் மறுகணக்கீடுகளைக் கட்டுப்படுத்துதல்

contain: style; ஐப் பயன்படுத்துவது உலாவிக்குச் சொல்கிறது: "எனது சந்ததியினரின் ஸ்டைல்களில் ஏற்படும் மாற்றங்கள் எந்தவொரு மூதாதையர் அல்லது உடன்பிறப்பு தனிமங்களின் கணக்கிடப்பட்ட ஸ்டைல்களையும் பாதிக்காது." இது ஸ்டைல் செல்லுபடியாகாமல் போவதையும் மறுகணக்கீட்டையும் தனிமைப்படுத்துவது பற்றியது, அவை DOM மரத்தில் மேலே பரவுவதைத் தடுக்கிறது.

இது எப்படி வேலை செய்கிறது: ஒரு சந்ததியின் ஸ்டைல் மாறும்போது உலாவிகள் பெரும்பாலும் ஒரு தனிமத்தின் முன்னோர்கள் அல்லது உடன்பிறப்புகளுக்கான ஸ்டைல்களை மீண்டும் மதிப்பீடு செய்ய வேண்டும். இது CSS கவுண்டர் மீட்டமைப்புகள், துணை மரத் தகவல்களை நம்பியிருக்கும் CSS பண்புகள் (பெற்றோர் உரை ஸ்டைலிங்கைப் பாதிக்கும் `first-line` அல்லது `first-letter` சூடோ-எலிமென்ட்கள் போன்றவை), அல்லது பெற்றோர் ஸ்டைல்களை மாற்றும் சிக்கலான `:hover` விளைவுகள் காரணமாக ஏற்படலாம். contain: style; இந்த வகையான மேல்நோக்கிய ஸ்டைல் சார்புகளைத் தடுக்கிறது.

நன்மைகள்:

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

பயன்பாட்டு வழக்குகள்:

• டைனமிக் தீமிங்குடன் கூடிய சிக்கலான கூறுகள்: கூறுகளுக்கு அவற்றின் சொந்த உள் தீமிங் தர்க்கம் அல்லது நிலை-சார்ந்த ஸ்டைல்கள் அடிக்கடி மாறும் வடிவமைப்பு அமைப்புகளில், contain: style; ஐப் பயன்படுத்துவது இந்த மாற்றங்கள் உள்ளூர்மயமாக்கப்படுவதை உறுதிசெய்யும்.
• மூன்றாம் தரப்பு விட்ஜெட்டுகள்: நீங்கள் ஒரு மூன்றாம் தரப்பு ஸ்கிரிப்ட் அல்லது கூறுகளை ஒருங்கிணைத்தால், அது அதன் சொந்த ஸ்டைல்களை உட்செலுத்தலாம் அல்லது மாறும் வகையில் மாற்றலாம், அதை contain: style; உடன் கட்டுப்படுத்துவது இந்த வெளிப்புற ஸ்டைல்கள் உங்கள் முக்கிய பயன்பாட்டின் ஸ்டைல்ஷீட்டை எதிர்பாராதவிதமாகப் பாதிப்பதைத் தடுக்கலாம்.

கவனிக்க வேண்டியவை:

• contain: style; தனிமையில் குறைவாகப் பயன்படுத்தப்படும் மதிப்பாகும், ஏனெனில் அதன் விளைவுகள் மிகவும் நுட்பமானவை மற்றும் குறிப்பிட்ட CSS தொடர்புகளுக்கு மட்டுமே பொருந்தும்.
• இது மறைமுகமாக தனிமத்தை `counter` மற்றும் `font` பண்புகளைக் கொண்டதாக அமைக்கிறது, அதாவது தனிமத்திற்குள் CSS கவுண்டர்கள் மீட்டமைக்கப்படும், மற்றும் எழுத்துரு பண்பு மரபுரிமை பாதிக்கப்படலாம். உங்கள் வடிவமைப்பு உலகளாவிய கவுண்டர் அல்லது எழுத்துரு நடத்தையை நம்பியிருந்தால் இது ஒரு உடைக்கும் மாற்றமாக இருக்கலாம்.
• அதன் தாக்கத்தைப் புரிந்துகொள்வதற்கு பெரும்பாலும் CSS மரபுரிமை மற்றும் கணக்கீட்டு விதிகள் பற்றிய ஆழமான அறிவு தேவைப்படுகிறது.

contain: content; – நடைமுறை சுருக்கம் (லேஅவுட் + பெயின்ட்)

contain: content; மதிப்பு ஒரு வசதியான சுருக்கமாகும், இது மிகவும் அடிக்கடி நன்மை பயக்கும் இரண்டு கண்டெய்ன்மென்ட் வகைகளை இணைக்கிறது: layout மற்றும் paint. இது contain: layout paint; என்று எழுதுவதற்குச் சமம். இது பல பொதுவான UI கூறுகளுக்கு ஒரு சிறந்த இயல்புநிலை தேர்வாக அமைகிறது.

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

நன்மைகள்:

• பரந்த செயல்திறன் மேம்பாடு: இரண்டு பொதுவான செயல்திறன் தடைகளை (லேஅவுட் மற்றும் பெயின்ட்) ஒரு ஒற்றை அறிவிப்புடன் நிவர்த்தி செய்கிறது.
• பாதுகாப்பான இயல்புநிலை: இது `strict` ஐ விட பொதுவாகப் பாதுகாப்பானது, ஏனெனில் இது `size` கண்டெய்ன்மென்ட்டை விதிக்காது, அதாவது தனிமம் அதன் உள்ளடக்கத்தைப் பொறுத்து இன்னும் வளரலாம் அல்லது சுருங்கலாம், இது டைனமிக் UI களுக்கு மிகவும் நெகிழ்வானதாக ஆக்குகிறது.
• எளிமைப்படுத்தப்பட்ட குறியீடு: `layout` மற்றும் `paint` ஐ தனித்தனியாக அறிவிப்பதோடு ஒப்பிடும்போது சொற்பெருக்கத்தைக் குறைக்கிறது.

பயன்பாட்டு வழக்குகள்:

• தனிப்பட்ட பட்டியல் உருப்படிகள்: கட்டுரைகள், தயாரிப்புகள் அல்லது செய்திகளின் டைனமிக் பட்டியலில், ஒவ்வொரு பட்டியல் உருப்படிக்கும் contain: content; ஐப் பயன்படுத்துவது, ஒரு உருப்படியைச் சேர்ப்பது/அகற்றுவது அல்லது அதன் உள் உள்ளடக்கத்தை மாற்றுவது (எ.கா., ஒரு படம் ஏற்றப்படுவது, ஒரு விளக்கம் விரிவடைவது) அந்த குறிப்பிட்ட உருப்படிக்கு மட்டுமே லேஅவுட் மற்றும் பெயின்ட்டைத் தூண்டுகிறது என்பதை உறுதி செய்கிறது, முழு பட்டியல் அல்லது பக்கத்திற்கு அல்ல.
• டாஷ்போர்டு விட்ஜெட்டுகள்: ஒரு டாஷ்போர்டில் உள்ள ஒவ்வொரு விட்ஜெட்டிற்கும் contain: content; கொடுக்கப்படலாம், இது அதன் தன்னிறைவை உறுதி செய்கிறது.
• வலைப்பதிவு இடுகை கார்டுகள்: வலைப்பதிவு இடுகை சுருக்கங்களின் ஒரு கிரிட்டிற்கு, ஒவ்வொரு கார்டிலும் ஒரு படம், தலைப்பு மற்றும் பகுதி உள்ளது, contain: content; ரெண்டரிங்கைத் தனிமைப்படுத்த முடியும்.

கவனிக்க வேண்டியவை:

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

contain: strict; – இறுதித் தனிமைப்படுத்தல் (லேஅவுட் + பெயின்ட் + அளவு + ஸ்டைல்)

contain: strict; என்பது கண்டெய்ன்மென்டின் மிகவும் தீவிரமான வடிவமாகும், இது contain: layout paint size style; என்று அறிவிப்பதற்குச் சமம். நீங்கள் contain: strict; ஐப் பயன்படுத்தும்போது, உலாவிக்கு ஒரு மிக வலுவான வாக்குறுதியை அளிக்கிறீர்கள்: "இந்த தனிமம் முற்றிலும் தனிமைப்படுத்தப்பட்டுள்ளது. அதன் குழந்தைகளின் ஸ்டைல்கள், லேஅவுட், பெயின்ட் மற்றும் அதன் சொந்த அளவு கூட வெளியே உள்ள எதிலிருந்தும் சுயாதீனமானவை."

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

நன்மைகள்:

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

பயன்பாட்டு வழக்குகள்:

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

கவனிக்க வேண்டியவை:

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

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

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

முடிவற்ற ஸ்க்ரோலிங் பட்டியல்கள் மற்றும் கட்டங்களை மேம்படுத்துதல்

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

contain உடன் தீர்வு: ஒவ்வொரு தனிப்பட்ட பட்டியல் உருப்படிக்கும் (எ.கா., ஒரு `<ul>` க்குள் `<li>` தனிமங்கள் அல்லது ஒரு கட்டத்தில் `<div>` தனிமங்கள்) contain: content; (அல்லது `contain: layout paint;`) ஐப் பயன்படுத்துவது மிகவும் பயனுள்ளதாக இருக்கும். இது ஒரு பட்டியல் உருப்படிக்குள் ஏற்படும் மாற்றங்கள் (எ.கா., ஒரு படம் ஏற்றப்படுவது, உரை விரிவடைவது) மற்ற உருப்படிகளின் லேஅவுட்டையோ அல்லது ஒட்டுமொத்த ஸ்க்ரோல் கொள்கலனையோ பாதிக்காது என்று உலாவிக்குச் சொல்கிறது.

.list-item {
  contain: content; /* லேஅவுட் மற்றும் பெயின்ட் க்கான சுருக்கம் */
  /* கணிக்கக்கூடிய அளவிற்கு display, width, height போன்ற பிற தேவையான ஸ்டைலிங்கைச் சேர்க்கவும் */
}

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

சுயாதீனமான UI விட்ஜெட்டுகள் மற்றும் கார்டுகளைக் கட்டுப்படுத்துதல்

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

contain உடன் தீர்வு: ஒவ்வொரு உயர்-நிலை விட்ஜெட் அல்லது கார்டு கொள்கலனுக்கும் contain: content; ஐப் பயன்படுத்தவும்.

.dashboard-widget {
  contain: content;
  /* வெளிப்புற ரிஃப்ளோக்களை ஏற்படுத்தாத வரையறுக்கப்பட்ட பரிமாணங்கள் அல்லது நெகிழ்வான அளவை உறுதிசெய்யவும் */
}

.product-card {
  contain: content;
  /* நிலையான லேஅவுட்டிற்கு சீரான அளவை வரையறுக்கவும் அல்லது flex/grid ஐப் பயன்படுத்தவும் */
}

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

திரைக்கப்பால் உள்ள உள்ளடக்கத்தை திறமையாக நிர்வகித்தல்

பல வலை பயன்பாடுகள் ஆரம்பத்தில் மறைக்கப்பட்டு பின்னர் வெளிப்படுத்தப்படும் அல்லது பார்வைக்கு அனிமேஷன் செய்யப்படும் தனிமங்களைப் பயன்படுத்துகின்றன, அதாவது மோடல் உரையாடல்கள், ஆஃப்-கேன்வாஸ் வழிசெலுத்தல் மெனுக்கள் அல்லது விரிவாக்கக்கூடிய பிரிவுகள். இந்த தனிமங்கள் மறைக்கப்பட்டிருக்கும்போது (எ.கா., `display: none;` அல்லது `visibility: hidden;` உடன்), அவை ரெண்டரிங் வளங்களை நுகர்வதில்லை. இருப்பினும், அவை வெறுமனே திரைக்கப்பால் வைக்கப்பட்டால் அல்லது வெளிப்படையானதாக மாற்றப்பட்டால் (எ.கா., `left: -9999px;` அல்லது `opacity: 0;` ஐப் பயன்படுத்தி), உலாவி இன்னும் அவற்றுக்கான லேஅவுட் மற்றும் பெயின்ட் கணக்கீடுகளைச் செய்யக்கூடும், வளங்களை வீணடிக்கும்.

contain உடன் தீர்வு: இந்த திரைக்கப்பால் உள்ள தனிமங்களுக்கு contain: paint; ஐப் பயன்படுத்தவும். உதாரணமாக, வலமிருந்து சரியும் ஒரு மோடல் உரையாடல்:

.modal-dialog {
  position: fixed;
  right: -100vw; /* ஆரம்பத்தில் திரைக்கப்பால் */
  width: 100vw;
  height: 100vh;
  contain: paint; /* இது தெரியவில்லை என்றால் இதை வெட்டலாம் என்று உலாவிக்குச் சொல்லுங்கள் */
  transition: right 0.3s ease-out;
}

.modal-dialog.is-visible {
  right: 0;
}

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

உட்பொதிக்கப்பட்ட மூன்றாம் தரப்பு உள்ளடக்கத்தின் செயல்திறனை மேம்படுத்துதல்

விளம்பர அலகுகள், சமூக ஊடக விட்ஜெட்டுகள் அல்லது உட்பொதிக்கப்பட்ட வீடியோ பிளேயர்கள் (பெரும்பாலும் `<iframe>` வழியாக வழங்கப்படும்) போன்ற மூன்றாம் தரப்பு உள்ளடக்கத்தை ஒருங்கிணைப்பது செயல்திறன் சிக்கல்களுக்கு ஒரு முக்கிய ஆதாரமாக இருக்கலாம். இந்த வெளிப்புற ஸ்கிரிப்டுகள் மற்றும் உள்ளடக்கம் கணிக்க முடியாததாக இருக்கலாம், பெரும்பாலும் அவற்றின் சொந்த ரெண்டரிங்கிற்கு குறிப்பிடத்தக்க வளங்களை நுகரும், மற்றும் சில சமயங்களில், ஹோஸ்ட் பக்கத்தில் ரிஃப்ளோக்கள் அல்லது ரீபெயின்ட்களை கூட ஏற்படுத்தும். வலை சேவைகளின் உலகளாவிய தன்மையைக் கருத்தில் கொண்டு, இந்த மூன்றாம் தரப்பு தனிமங்கள் மேம்படுத்தலில் பரவலாக வேறுபடலாம்.

contain உடன் தீர்வு: `<iframe>` அல்லது மூன்றாம் தரப்பு விட்ஜெட்டிற்கான கொள்கலனை `contain: strict;` அல்லது குறைந்தபட்சம் `contain: content;` மற்றும் `contain: size;` உடன் ஒரு தனிமத்தில் மடிக்கவும்.

.third-party-ad-wrapper {
  width: 300px;
  height: 250px;
  contain: strict; /* அல்லது contain: layout paint size; */
  /* விளம்பரம் சுற்றியுள்ள லேஅவுட்/பெயின்ட்டைப் பாதிக்காது என்பதை உறுதி செய்கிறது */
}

.social-widget-container {
  width: 400px;
  height: 600px;
  contain: strict;
}

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

மூலோபாய அமலாக்கம்: contain ஐ எப்போது, எப்படிப் பயன்படுத்துவது

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

கண்டெய்ன்மென்ட்க்கான வேட்பாளர்களை அடையாளம் காணுதல்

contain பண்பைப் பயன்படுத்துவதற்கான சிறந்த வேட்பாளர்கள் பின்வரும் பண்புகளைக் கொண்ட தனிமங்கள்:

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

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

CSS கண்டெய்ன்மென்ட்டை திறம்படப் பயன்படுத்த, இந்த சிறந்த நடைமுறைகளைக் கருத்தில் கொள்ளுங்கள்:

• முதலில் சுயவிவரம், பின்னர் மேம்படுத்துதல்: உலாவி டெவலப்பர் கருவிகளைப் (எ.கா., Chrome DevTools செயல்திறன் தாவல், Firefox செயல்திறன் மானிட்டர்) பயன்படுத்தி உண்மையான செயல்திறன் தடைகளை அடையாளம் காண்பது மிக முக்கியமான படியாகும். நீண்டகால லேஅவுட் மற்றும் பெயின்ட் பணிகளைத் தேடுங்கள். contain ஐ கண்மூடித்தனமாகப் பயன்படுத்த வேண்டாம்; இது ஒரு இலக்கு மேம்படுத்தலாக இருக்க வேண்டும்.
• `content` உடன் சிறியதாகத் தொடங்குங்கள்: பெரும்பாலான சுய-கட்டுப்படுத்தப்பட்ட UI கூறுகளுக்கு (எ.கா., கார்டுகள், பட்டியல் உருப்படிகள், அடிப்படை விட்ஜெட்டுகள்), contain: content; ஒரு சிறந்த மற்றும் பாதுகாப்பான தொடக்கப் புள்ளியாகும். இது கடுமையான அளவு கட்டுப்பாடுகளை விதிக்காமல் லேஅவுட் மற்றும் பெயின்ட்டிற்கு குறிப்பிடத்தக்க நன்மைகளை வழங்குகிறது.
• அளவு தாக்கங்களைப் புரிந்துகொள்ளுங்கள்: நீங்கள் contain: size; அல்லது contain: strict; ஐப் பயன்படுத்தினால், தனிமத்திற்கு உங்கள் CSS இல் ஒரு வரையறுக்கப்பட்ட `width` மற்றும் `height` (அல்லது பிற அளவு பண்புகள்) இருப்பது முற்றிலும் முக்கியம். அவ்வாறு செய்யத் தவறினால் தனிமம் சுருங்கி அதன் உள்ளடக்கம் கண்ணுக்குத் தெரியாததாகிவிடும்.
• உலாவிகள் மற்றும் சாதனங்கள் முழுவதும் முழுமையாகச் சோதிக்கவும்: contain க்கான உலாவி ஆதரவு வலுவாக இருந்தாலும், உங்கள் அமலாக்கத்தை வெவ்வேறு உலாவிகள், பதிப்புகள் மற்றும் குறிப்பாக பல்வேறு சாதனங்கள் (டெஸ்க்டாப், மொபைல், டேப்லெட்) மற்றும் நெட்வொர்க் நிலைமைகளில் எப்போதும் சோதிக்கவும். ஒரு உயர்நிலை டெஸ்க்டாப்பில் சரியாக வேலை செய்வது, மெதுவான இணையம் உள்ள ஒரு பிராந்தியத்தில் பழைய மொபைல் சாதனத்தில் வித்தியாசமாகச் செயல்படலாம்.
• அணுகல்தன்மையைக் கருத்தில் கொள்ளுங்கள்: contain ஐப் பயன்படுத்துவது, உதவித் தொழில்நுட்பங்களை நம்பியிருக்கும் பயனர்களிடமிருந்து உள்ளடக்கத்தை தற்செயலாக மறைக்காது அல்லது விசைப்பலகை வழிசெலுத்தலை உடைக்காது என்பதை உறுதிப்படுத்தவும். உண்மையிலேயே திரைக்கப்பால் உள்ள தனிமங்களுக்கு, அவை பார்வைக்குக் கொண்டுவரப்படும்போது கவனம் செலுத்தக்கூடியதாகவோ அல்லது படிக்கக்கூடியதாகவோ இருக்க வேண்டுமென்றால், அவை இன்னும் அணுகல்தன்மைக்காக சரியாக நிர்வகிக்கப்படுகின்றன என்பதை உறுதிப்படுத்தவும்.
• பிற நுட்பங்களுடன் இணைக்கவும்: contain சக்தி வாய்ந்தது, ஆனால் இது ஒரு பரந்த செயல்திறன் மூலோபாயத்தின் ஒரு பகுதியாகும். சோம்பேறி ஏற்றுதல், பட மேம்படுத்தல் மற்றும் திறமையான JavaScript போன்ற பிற மேம்படுத்தல்களுடன் அதை இணைக்கவும்.

பொதுவான தவறுகள் மற்றும் அவற்றை எவ்வாறு தவிர்ப்பது

• எதிர்பாராத உள்ளடக்க வெட்டுதல்: மிகவும் அடிக்கடி ஏற்படும் சிக்கல், குறிப்பாக contain: paint; அல்லது contain: strict; உடன். உங்கள் உள்ளடக்கம் கட்டுப்படுத்தப்பட்ட தனிமத்தின் எல்லைகளை மீறினால், அது வெட்டப்படும். உங்கள் அளவு வலுவானது என்பதை உறுதிப்படுத்தவும் அல்லது பொருத்தமான இடங்களில் `overflow: visible;` ஐப் பயன்படுத்தவும் (இருப்பினும் இது சில பெயின்ட் கண்டெய்ன்மென்ட் நன்மைகளை மறுக்கக்கூடும்).
• contain: size; உடன் சுருங்கும் தனிமங்கள்: குறிப்பிட்டபடி, contain: size; உடன் ஒரு தனிமத்திற்கு வெளிப்படையான பரிமாணங்கள் இல்லை என்றால், அது சுருங்கிவிடும். எப்போதும் contain: size; ஐ ஒரு வரையறுக்கப்பட்ட `width` மற்றும் `height` உடன் இணைக்கவும்.
• contain: style; தாக்கங்களைப் தவறாகப் புரிந்துகொள்வது: வழக்கமான பயன்பாட்டு நிகழ்வுகளுக்கு அரிதாகவே சிக்கலாக இருந்தாலும், contain: style; CSS கவுண்டர்களை மீட்டமைக்கலாம் அல்லது அதன் சந்ததியினருக்கான எழுத்துரு பண்பு மரபுரிமையைப் பாதிக்கலாம். உங்கள் வடிவமைப்பு அவற்றை நம்பியிருந்தால் இந்த குறிப்பிட்ட தாக்கங்களைக் கவனத்தில் கொள்ளுங்கள்.
• அதிகப்படியான பயன்பாடு: ஒவ்வொரு தனிமத்திற்கும் கண்டெய்ன்மென்ட் தேவையில்லை. பக்கத்தில் உள்ள ஒவ்வொரு `<div>` க்கும் அதைப் பயன்படுத்துவது அதன் சொந்த மேல்நிலையை அறிமுகப்படுத்தலாம் அல்லது அளவிடக்கூடிய எந்த நன்மையும் இல்லாமல் இருக்கலாம். தடைகள் கண்டறியப்பட்ட இடங்களில் அதை புத்திசாலித்தனமாகப் பயன்படுத்தவும்.

contain க்கு அப்பால்: வலை செயல்திறனின் முழுமையான பார்வை

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

• content-visibility: ஒரு சக்திவாய்ந்த உடன்பிறப்பு: அடிக்கடி திரைக்கப்பால் இருக்கும் தனிமங்களுக்கு, content-visibility, `contain: paint;` ஐ விட இன்னும் தீவிரமான மேம்படுத்தல் வடிவத்தை வழங்குகிறது. ஒரு தனிமத்திற்கு `content-visibility: auto;` இருக்கும்போது, உலாவி அதன் துணை மரத்தை முழுவதுமாக ரெண்டர் செய்வதைத் தவிர்க்கிறது, அது பார்வைக்கு வரவிருக்கும்போது மட்டுமே லேஅவுட் மற்றும் பெயின்ட் வேலையைச் செய்கிறது. இது நீண்ட, ஸ்க்ரோல் செய்யக்கூடிய பக்கங்கள் அல்லது அக்கார்டியன்களுக்கு நம்பமுடியாத அளவிற்கு சக்தி வாய்ந்தது. இது பெரும்பாலும் திரைக்கப்பால் மற்றும் திரையில் உள்ள நிலைகளுக்கு இடையில் மாறும் தனிமங்களுக்கு contain: layout; உடன் நன்றாக இணைகிறது.
• will-change: வேண்டுமென்றே குறிப்புகள்: will-change CSS பண்பு, எதிர்காலத்தில் ஒரு தனிமத்தில் நீங்கள் என்ன பண்புகளை அனிமேட் செய்ய அல்லது மாற்ற எதிர்பார்க்கிறீர்கள் என்பதை உலாவிக்கு வெளிப்படையாகக் குறிக்க உங்களை அனுமதிக்கிறது. இது உலாவிக்கு அதன் ரெண்டரிங் பைப்லைனை மேம்படுத்த நேரத்தை அளிக்கிறது, உதாரணமாக, தனிமத்தை அதன் சொந்த லேயருக்கு உயர்த்துவதன் மூலம், இது மென்மையான அனிமேஷன்களுக்கு வழிவகுக்கும். அதை குறைவாகவும், உண்மையிலேயே எதிர்பார்க்கப்படும் மாற்றங்களுக்கு மட்டுமே பயன்படுத்தவும், ஏனெனில் அதிகப்படியான பயன்பாடு நினைவகப் பயன்பாட்டை அதிகரிக்கக்கூடும்.
• மெய்நிகராக்கம் மற்றும் விண்டோயிங் நுட்பங்கள்: மிகவும் பெரிய பட்டியல்களுக்கு (ஆயிரக்கணக்கான அல்லது பல்லாயிரக்கணக்கான உருப்படிகள்), contain: content; கூட போதுமானதாக இருக்காது. மெய்நிகராக்கத்தை (அல்லது விண்டோயிங்) செயல்படுத்தும் கட்டமைப்புகள் மற்றும் நூலகங்கள், தற்போது வியூபோர்ட்டில் தெரியும் பட்டியல் உருப்படிகளின் ஒரு சிறிய துணைக்குழுவை மட்டுமே ரெண்டர் செய்கின்றன, பயனர் ஸ்க்ரோல் செய்யும்போது மாறும் வகையில் உருப்படிகளைச் சேர்த்து அகற்றும். இது பெரிய தரவுத் தொகுப்புகளை நிர்வகிப்பதற்கான இறுதி நுட்பமாகும்.
• CSS மேம்படுத்தல்கள்: `contain` க்கு அப்பால், CSS அமைப்பிற்கான சிறந்த நடைமுறைகளைப் (எ.கா., BEM, ITCSS) பயன்படுத்தவும், சிக்கலான தேர்வாளர்களின் பயன்பாட்டைக் குறைக்கவும், மற்றும் முடிந்தவரை `!important` ஐத் தவிர்க்கவும். திறமையான CSS விநியோகம் (குறைத்தல், இணைத்தல், முக்கியமான CSS இன்லைனிங்) வேகமான ஆரம்ப ரெண்டர்களுக்கு இன்றியமையாதது.
• JavaScript மேம்படுத்தல்கள்: DOM ஐ திறமையாக கையாளவும், செலவுமிக்க மறுகணக்கீடுகளைத் தூண்டும் நிகழ்வு கையாளுபவர்களை டிபவுன்ஸ் அல்லது த்ராட்டில் செய்யவும், மற்றும் பொருத்தமான இடங்களில் வலை தொழிலாளர்களுக்கு கனமான கணக்கீடுகளை ஆஃப்லோட் செய்யவும். முக்கிய திரெட்டைத் தடுக்கும் JavaScript அளவைக் குறைக்கவும்.
• நெட்வொர்க் மேம்படுத்தல்கள்: இது பட மேம்படுத்தல் (சுருக்கம், சரியான வடிவங்கள், பதிலளிக்கக்கூடிய படங்கள்), படங்கள் மற்றும் வீடியோக்களின் சோம்பேறி ஏற்றுதல், திறமையான எழுத்துரு ஏற்றுதல் உத்திகள், மற்றும் உலகளாவிய பயனர்களுக்கு சொத்துக்களை நெருக்கமாக சேவை செய்ய உள்ளடக்க விநியோக நெட்வொர்க்குகளை (CDNs) பயன்படுத்துவதை உள்ளடக்கியது.
• சர்வர்-சைட் ரெண்டரிங் (SSR) / ஸ்டேடிக் சைட் ஜெனரேஷன் (SSG): முக்கியமான உள்ளடக்கத்திற்கு, சர்வரில் அல்லது உருவாக்க நேரத்தில் HTML ஐ உருவாக்குவது, உணரப்பட்ட செயல்திறன் மற்றும் கோர் வெப் வைட்டல்களை கணிசமாக மேம்படுத்த முடியும், ஏனெனில் ஆரம்ப ரெண்டர் முன்-கணக்கிடப்படுகிறது.

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

முடிவுரை: அனைவருக்கும் வேகமான, அணுகக்கூடிய வலையை உருவாக்குதல்

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

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

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

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