സിഎസ്എസ് സ്റ്റൈൽ കൺടെയ്ൻമെൻ്റ്: ആഗോള വെബ് അനുഭവങ്ങൾക്കായി റെൻഡറിംഗ് പെർഫോമൻസ് ഐസൊലേഷൻ മെച്ചപ്പെടുത്തുന്നു

ഇന്നത്തെ പരസ്പരം ബന്ധിതമായ ലോകത്ത്, വെബ് പെർഫോമൻസ് എന്നത് കേവലം അഭികാമ്യമായ ഒരു സവിശേഷതയല്ല; അതൊരു അടിസ്ഥാനപരമായ പ്രതീക്ഷയാണ്. ഉപയോക്താക്കൾ, അവരുടെ ഭൂമിശാസ്ത്രപരമായ സ്ഥാനമോ അവർ ഉപയോഗിക്കുന്ന ഉപകരണമോ പരിഗണിക്കാതെ, തൽക്ഷണവും സുഗമവും ഉയർന്ന പ്രതികരണശേഷിയുള്ളതുമായ ഇടപെടലുകൾ ആവശ്യപ്പെടുന്നു. സാവധാനത്തിൽ ലോഡുചെയ്യുന്നതോ തടസ്സങ്ങളുള്ളതോ ആയ ഒരു വെബ്സൈറ്റ് നിരാശയിലേക്കും, സെഷനുകൾ ഉപേക്ഷിക്കുന്നതിലേക്കും, ഉപയോക്തൃ ഇടപഴകലിനെ പ്രതികൂലമായി ബാധിക്കുന്നതിലേക്കും നയിച്ചേക്കാം, ഇത് ആത്യന്തികമായി ആഗോളതലത്തിൽ ബിസിനസ്സ് ലക്ഷ്യങ്ങളെ ബാധിക്കും. മികച്ച വെബ് പെർഫോമൻസിനായുള്ള അന്വേഷണം ഓരോ ഡെവലപ്പർക്കും ഓർഗനൈസേഷനും ഒരു തുടർ യാത്രയാണ്.

അണിയറയിൽ, വെബ് ബ്രൗസറുകൾ എണ്ണമറ്റ ഘടകങ്ങളും ശൈലികളും സ്ക്രിപ്റ്റുകളും അടങ്ങിയ സങ്കീർണ്ണമായ യൂസർ ഇൻ്റർഫേസുകൾ (UIs) റെൻഡർ ചെയ്യാൻ നിരന്തരം പ്രവർത്തിക്കുന്നു. ഈ സങ്കീർണ്ണമായ പ്രക്രിയയിൽ ഒരു നൂതനമായ റെൻഡറിംഗ് പൈപ്പ്ലൈൻ ഉൾപ്പെടുന്നു, ഇവിടെ ചെറിയ മാറ്റങ്ങൾ പോലും ചിലപ്പോൾ മുഴുവൻ ഡോക്യുമെൻ്റിലുടനീളം തുടർക്കണക്കുകൂട്ടലുകൾക്ക് കാരണമായേക്കാം. ഈ പ്രതിഭാസം, പലപ്പോഴും "ലേഔട്ട് ത്രാഷിംഗ്" അല്ലെങ്കിൽ "പെയിൻ്റ് സ്റ്റോംസ്" എന്ന് വിളിക്കപ്പെടുന്നു, ഇത് പ്രകടനത്തെ കാര്യമായി തടസ്സപ്പെടുത്തുകയും, കാഴ്ചയിൽ മന്ദഗതിയിലുള്ളതും ആകർഷകമല്ലാത്തതുമായ ഉപയോക്തൃ അനുഭവത്തിലേക്ക് നയിക്കുകയും ചെയ്യും. ഒരു ഇ-കൊമേഴ്സ് സൈറ്റിൽ ഒരു ഉൽപ്പന്നം കാർട്ടിലേക്ക് ചേർക്കുമ്പോൾ മുഴുവൻ പേജും ചെറുതായി റീഫ്ലോ ആകുന്നത്, അല്ലെങ്കിൽ ഒരു സോഷ്യൽ മീഡിയ ഫീഡിൽ സ്ക്രോൾ ചെയ്യുമ്പോൾ ഉള്ളടക്കം തടസ്സങ്ങളോടെ നീങ്ങുന്നത് സങ്കൽപ്പിക്കുക. ഇവ ഒപ്റ്റിമൈസ് ചെയ്യാത്ത റെൻഡറിംഗിൻ്റെ സാധാരണ ലക്ഷണങ്ങളാണ്.

ഇവിടെയാണ് സിഎസ്എസ് സ്റ്റൈൽ കൺടെയ്ൻമെൻ്റ് രംഗപ്രവേശം ചെയ്യുന്നത്, പ്രകടന ഒപ്റ്റിമൈസേഷനിൽ ഒരു വഴികാട്ടിയായി രൂപകൽപ്പന ചെയ്ത ശക്തവും എന്നാൽ പലപ്പോഴും ഉപയോഗിക്കപ്പെടാത്തതുമായ ഒരു സിഎസ്എസ് പ്രോപ്പർട്ടിയാണിത്: contain പ്രോപ്പർട്ടി. ഈ നൂതന സവിശേഷത ഡെവലപ്പർമാർക്ക് ഒരു പ്രത്യേക ഘടകത്തെയും അതിൻ്റെ പിൻഗാമികളെയും ഒരു സ്വതന്ത്ര റെൻഡറിംഗ് സബ്ട്രീ ആയി കണക്കാക്കാമെന്ന് ബ്രൗസറിന് വ്യക്തമായി സൂചന നൽകാൻ അനുവദിക്കുന്നു. ഇതിലൂടെ, ഡെവലപ്പർമാർക്ക് ഒരു ഘടകത്തിൻ്റെ "റെൻഡറിംഗ് ഇൻഡിപെൻഡൻസ്" പ്രഖ്യാപിക്കാനും, ബ്രൗസറിൻ്റെ റെൻഡറിംഗ് എഞ്ചിനിലെ ലേഔട്ട്, സ്റ്റൈൽ, പെയിൻ്റ് എന്നിവയുടെ പുനർകണക്കുകൂട്ടലുകളുടെ വ്യാപ്തി ഫലപ്രദമായി പരിമിതപ്പെടുത്താനും കഴിയും. ഈ ഐസൊലേഷൻ ഒരു നിശ്ചിത ഏരിയയിലെ മാറ്റങ്ങൾ പേജിൻ്റെ മുഴുവൻ ഭാഗത്തും ചെലവേറിയതും വിപുലവുമായ അപ്‌ഡേറ്റുകൾക്ക് കാരണമാകുന്നത് തടയുന്നു.

contain-ൻ്റെ പിന്നിലെ പ്രധാന ആശയം ലളിതവും എന്നാൽ അഗാധമായ സ്വാധീനമുള്ളതുമാണ്: ഒരു ഘടകത്തിൻ്റെ സ്വഭാവത്തെക്കുറിച്ച് ബ്രൗസറിന് വ്യക്തമായ സൂചനകൾ നൽകുന്നതിലൂടെ, കൂടുതൽ കാര്യക്ഷമമായ റെൻഡറിംഗ് തീരുമാനങ്ങൾ എടുക്കാൻ നമ്മൾ അതിനെ പ്രാപ്തമാക്കുന്നു. ഏറ്റവും മോശം സാഹചര്യം അനുമാനിച്ച് എല്ലാം പുനർകണക്കുകൂട്ടുന്നതിനു പകരം, ബ്രൗസറിന് അതിൻ്റെ ജോലിയുടെ വ്യാപ്തി കൺടെയ്ൻ ചെയ്ത ഘടകത്തിലേക്ക് മാത്രം ആത്മവിശ്വാസത്തോടെ ചുരുക്കാൻ കഴിയും, ഇത് റെൻഡറിംഗ് പ്രക്രിയകളെ നാടകീയമായി വേഗത്തിലാക്കുകയും സുഗമവും കൂടുതൽ പ്രതികരണശേഷിയുള്ളതുമായ ഒരു യൂസർ ഇൻ്റർഫേസ് നൽകുകയും ചെയ്യുന്നു. ഇതൊരു സാങ്കേതിക മെച്ചപ്പെടുത്തൽ മാത്രമല്ല; ഇതൊരു ആഗോള ആവശ്യകതയാണ്. മികച്ച പ്രകടനമുള്ള വെബ്, വേഗത കുറഞ്ഞ ഇൻ്റർനെറ്റ് കണക്ഷനുകളോ അല്ലെങ്കിൽ ശക്തി കുറഞ്ഞ ഉപകരണങ്ങളോ ഉള്ള പ്രദേശങ്ങളിലെ ഉപയോക്താക്കൾക്ക് പോലും ഉള്ളടക്കം ഫലപ്രദമായി ആക്സസ് ചെയ്യാനും സംവദിക്കാനും കഴിയുമെന്ന് ഉറപ്പാക്കുന്നു, ഇത് കൂടുതൽ ഉൾക്കൊള്ളുന്നതും തുല്യവുമായ ഒരു ഡിജിറ്റൽ ലോകം വളർത്തുന്നു.

ബ്രൗസറിൻ്റെ തീവ്രമായ യാത്ര: റെൻഡറിംഗ് പൈപ്പ്ലൈൻ മനസ്സിലാക്കൽ

contain-ൻ്റെ ശക്തി ശരിക്കും മനസ്സിലാക്കാൻ, നിങ്ങളുടെ സ്ക്രീനിലെ പിക്സലുകളായി HTML, CSS, JavaScript എന്നിവയെ മാറ്റാൻ ബ്രൗസറുകൾ എടുക്കുന്ന അടിസ്ഥാന ഘട്ടങ്ങൾ മനസ്സിലാക്കേണ്ടത് അത്യാവശ്യമാണ്. ഈ പ്രക്രിയയെ ക്രിട്ടിക്കൽ റെൻഡറിംഗ് പാത്ത് എന്ന് വിളിക്കുന്നു. ലളിതവൽക്കരിച്ചതാണെങ്കിലും, അതിൻ്റെ പ്രധാന ഘട്ടങ്ങൾ മനസ്സിലാക്കുന്നത് പ്രകടനത്തിലെ തടസ്സങ്ങൾ എവിടെയാണ് സംഭവിക്കുന്നതെന്ന് കണ്ടെത്താൻ സഹായിക്കുന്നു:

• DOM (ഡോക്യുമെൻ്റ് ഒബ്ജക്റ്റ് മോഡൽ) നിർമ്മാണം: ബ്രൗസർ HTML പാഴ്സ് ചെയ്യുകയും ഡോക്യുമെൻ്റിൻ്റെ ഉള്ളടക്കത്തെയും ബന്ധങ്ങളെയും പ്രതിനിധീകരിക്കുന്ന ഒരു ട്രീ ഘടന സൃഷ്ടിക്കുകയും ചെയ്യുന്നു.
• CSSOM (സിഎസ്എസ് ഒബ്ജക്റ്റ് മോഡൽ) നിർമ്മാണം: ബ്രൗസർ CSS പാഴ്സ് ചെയ്യുകയും ഘടകങ്ങളിൽ പ്രയോഗിച്ച സ്റ്റൈലുകളുടെ ഒരു ട്രീ ഘടന സൃഷ്ടിക്കുകയും ചെയ്യുന്നു.
• റെൻഡർ ട്രീ രൂപീകരണം: DOM, CSSOM എന്നിവ സംയോജിപ്പിച്ച് റെൻഡർ ട്രീ രൂപീകരിക്കുന്നു, ഇതിൽ ദൃശ്യമായ ഘടകങ്ങളും അവയുടെ കമ്പ്യൂട്ട് ചെയ്ത സ്റ്റൈലുകളും മാത്രമേ അടങ്ങിയിട്ടുള്ളൂ. ഇതാണ് യഥാർത്ഥത്തിൽ റെൻഡർ ചെയ്യപ്പെടുന്നത്.
• ലേഔട്ട് (റീഫ്ലോ/റീലേഔട്ട്): ഇത് ഏറ്റവും കൂടുതൽ വിഭവശേഷി ആവശ്യമുള്ള ഘട്ടങ്ങളിലൊന്നാണ്. റെൻഡർ ട്രീയെ അടിസ്ഥാനമാക്കി പേജിലെ ഓരോ ദൃശ്യമായ ഘടകത്തിൻ്റെയും കൃത്യമായ സ്ഥാനവും വലുപ്പവും ബ്രൗസർ കണക്കാക്കുന്നു. ഒരു ഘടകത്തിൻ്റെ വലുപ്പമോ സ്ഥാനമോ മാറുകയാണെങ്കിൽ, അല്ലെങ്കിൽ പുതിയ ഘടകങ്ങൾ ചേർക്കുകയോ നീക്കം ചെയ്യുകയോ ചെയ്താൽ, ബ്രൗസറിന് പലപ്പോഴും പേജിൻ്റെ ഒരു പ്രധാന ഭാഗത്തിൻ്റെയോ അല്ലെങ്കിൽ മുഴുവൻ പേജിൻ്റെയോ ലേഔട്ട് പുനർകണക്കുകൂട്ടേണ്ടി വരും. ഈ ആഗോള പുനർകണക്കുകൂട്ടൽ "റീഫ്ലോ" അല്ലെങ്കിൽ "റീലേഔട്ട്" എന്ന് അറിയപ്പെടുന്നു, ഇതൊരു പ്രധാന പ്രകടന തടസ്സമാണ്.
• പെയിൻ്റ് (റീപെയിൻ്റ്): ലേഔട്ട് നിർണ്ണയിച്ചുകഴിഞ്ഞാൽ, ബ്രൗസർ ഓരോ ഘടകത്തിനുമുള്ള പിക്സലുകൾ സ്ക്രീനിൽ വരയ്ക്കുന്നു (പെയിൻ്റ് ചെയ്യുന്നു). ഇതിൽ കണക്കാക്കിയ സ്റ്റൈലുകൾ (നിറങ്ങൾ, പശ്ചാത്തലങ്ങൾ, ബോർഡറുകൾ, ഷാഡോകൾ മുതലായവ) യഥാർത്ഥ പിക്സലുകളായി മാറ്റുന്നത് ഉൾപ്പെടുന്നു. ലേഔട്ട് പോലെ, ഒരു ഘടകത്തിൻ്റെ ദൃശ്യപരമായ പ്രോപ്പർട്ടികളിലെ മാറ്റങ്ങൾ ആ ഘടകത്തിൻ്റെയും അതിൻ്റെ മുകളിൽ വരുന്ന ഘടകങ്ങളുടെയും ഒരു "റീപെയിൻ്റി"ന് കാരണമായേക്കാം. ഇത് ഒരു റീഫ്ലോയേക്കാൾ പലപ്പോഴും ചെലവ് കുറവാണെങ്കിലും, ഇടയ്ക്കിടെയുള്ളതോ വലുതോ ആയ റീപെയിൻ്റുകൾ പ്രകടനത്തെ തളർത്താൻ സാധ്യതയുണ്ട്.
• കോമ്പോസിറ്റിംഗ്: പെയിൻ്റ് ചെയ്ത ലെയറുകൾ ശരിയായ ക്രമത്തിൽ സംയോജിപ്പിച്ച് (കോമ്പോസിറ്റ് ചെയ്ത്) സ്ക്രീനിലെ അന്തിമ ചിത്രം രൂപീകരിക്കുന്നു.

ഇവിടെ പ്രധാനമായി മനസ്സിലാക്കേണ്ടത് ലേഔട്ട്, പെയിൻ്റ് ഘട്ടങ്ങളിലെ പ്രവർത്തനങ്ങൾ പലപ്പോഴും പ്രകടനത്തിന് ഏറ്റവും വലിയ തടസ്സങ്ങൾ സൃഷ്ടിക്കുന്നു എന്നതാണ്. DOM-ലോ CSSOM-ലോ ലേഔട്ടിനെ ബാധിക്കുന്ന ഒരു മാറ്റം സംഭവിക്കുമ്പോഴെല്ലാം (ഉദാഹരണത്തിന്, ഒരു ഘടകത്തിൻ്റെ `width`, `height`, `margin`, `padding`, `display`, അല്ലെങ്കിൽ `position` മാറ്റുന്നത്), ബ്രൗസറിന് പല ഘടകങ്ങൾക്കും ലേഔട്ട് ഘട്ടം വീണ്ടും പ്രവർത്തിപ്പിക്കാൻ നിർബന്ധിതനായേക്കാം. അതുപോലെ, ദൃശ്യപരമായ മാറ്റങ്ങൾക്ക് (`color`, `background-color`, `box-shadow`) റീപെയിൻ്റിംഗ് ആവശ്യമാണ്. കൺടെയ്ൻമെൻ്റ് ഇല്ലാതെ, ഒരു ഒറ്റപ്പെട്ട ഘടകത്തിലെ ഒരു ചെറിയ അപ്‌ഡേറ്റ് പോലും വെബ്‌പേജിൻ്റെ മുഴുവൻ ഭാഗത്തും അനാവശ്യമായി ഒരു പൂർണ്ണ പുനർകണക്കുകൂട്ടലിന് കാരണമായേക്കാം, ഇത് വിലയേറിയ പ്രോസസ്സിംഗ് സൈക്കിളുകൾ പാഴാക്കുകയും ഉപയോക്താക്കൾക്ക് തടസ്സങ്ങൾ നിറഞ്ഞ അനുഭവം നൽകുകയും ചെയ്യും.

സ്വാതന്ത്ര്യം പ്രഖ്യാപിക്കുന്നു: contain പ്രോപ്പർട്ടിയിലേക്ക് ഒരു ആഴത്തിലുള്ള பார்வை

contain സിഎസ്എസ് പ്രോപ്പർട്ടി ബ്രൗസറിന് ഒരു സുപ്രധാന ഒപ്റ്റിമൈസേഷൻ സൂചനയായി പ്രവർത്തിക്കുന്നു. ഒരു പ്രത്യേക ഘടകവും അതിൻ്റെ പിൻഗാമികളും സ്വയം ഉൾക്കൊള്ളുന്നതാണെന്ന് ഇത് സൂചിപ്പിക്കുന്നു, അതായത് അവയുടെ ലേഔട്ട്, സ്റ്റൈൽ, പെയിൻ്റ് പ്രവർത്തനങ്ങൾ ഡോക്യുമെൻ്റിൻ്റെ മറ്റ് ഭാഗങ്ങളിൽ നിന്ന് സ്വതന്ത്രമായി നടക്കാം. ഇത് ബ്രൗസറിനെ ലക്ഷ്യം വെച്ചുള്ള ഒപ്റ്റിമൈസേഷനുകൾ നടത്താൻ അനുവദിക്കുന്നു, ആന്തരിക മാറ്റങ്ങൾ പേജിൻ്റെ വിശാലമായ ഘടനയിൽ ചെലവേറിയ പുനർകണക്കുകൂട്ടലുകൾക്ക് നിർബന്ധിക്കുന്നത് തടയുന്നു.

ഈ പ്രോപ്പർട്ടിക്ക് നിരവധി മൂല്യങ്ങളുണ്ട്, അവയെ സംയോജിപ്പിക്കുകയോ ചുരുക്കെഴുത്തായി ഉപയോഗിക്കുകയോ ചെയ്യാം, ഓരോന്നും വ്യത്യസ്ത തലത്തിലുള്ള കൺടെയ്ൻമെൻ്റ് നൽകുന്നു:

• none (ഡിഫോൾട്ട്): കൺടെയ്ൻമെൻ്റ് പ്രയോഗിച്ചിട്ടില്ല. ഘടകത്തിനുള്ളിലെ മാറ്റങ്ങൾ മുഴുവൻ പേജിനെയും ബാധിക്കാം.
• layout: ലേഔട്ട് മാറ്റങ്ങൾ പരിമിതപ്പെടുത്തുന്നു.
• paint: പെയിൻ്റ് മാറ്റങ്ങൾ പരിമിതപ്പെടുത്തുന്നു.
• size: ഘടകത്തിൻ്റെ വലുപ്പം സ്ഥിരമാണെന്ന് വ്യക്തമാക്കുന്നു.
• style: സ്റ്റൈൽ ഇൻവാലിഡേഷൻ പരിമിതപ്പെടുത്തുന്നു.
• content: layout, paint എന്നിവയുടെ ചുരുക്കെഴുത്ത്.
• strict: layout, paint, size, style എന്നിവയുടെ ചുരുക്കെഴുത്ത്.

ഈ മൂല്യങ്ങളെ ഓരോന്നായി വിശദമായി പരിശോധിച്ച് അവയുടെ പ്രത്യേക നേട്ടങ്ങളും പ്രത്യാഘാതങ്ങളും മനസ്സിലാക്കാം.

contain: layout; – ജ്യാമിതി ഐസൊലേഷൻ മാസ്റ്റർ ചെയ്യുന്നു

നിങ്ങൾ ഒരു ഘടകത്തിൽ contain: layout; പ്രയോഗിക്കുമ്പോൾ, നിങ്ങൾ അടിസ്ഥാനപരമായി ബ്രൗസറിനോട് പറയുകയാണ്: "എൻ്റെ കുട്ടികളുടെ ലേഔട്ടിലെ മാറ്റങ്ങൾ എൻ്റെ പുറത്തുള്ള ഒന്നിനെയും ബാധിക്കില്ല, എൻ്റെ പൂർവ്വികരെയോ സഹോദരങ്ങളെയോ ഉൾപ്പെടെ." ഇതൊരു അവിശ്വസനീയമാംവിധം ശക്തമായ പ്രഖ്യാപനമാണ്, കാരണം ഇത് ആന്തരിക ലേഔട്ട് ഷിഫ്റ്റുകൾ ഒരു ആഗോള റീഫ്ലോയ്ക്ക് കാരണമാകുന്നത് തടയുന്നു.

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു: contain: layout; ഉപയോഗിച്ച്, ബ്രൗസറിന് കൺടെയ്ൻ ചെയ്ത ഘടകത്തിൻ്റെയും അതിൻ്റെ പിൻഗാമികളുടെയും ലേഔട്ട് സ്വതന്ത്രമായി കണക്കാക്കാൻ കഴിയും. ഒരു ചൈൽഡ് ഘടകത്തിൻ്റെ അളവുകൾ മാറുകയാണെങ്കിൽ, അതിൻ്റെ പാരൻ്റ് (കൺടെയ്ൻ ചെയ്ത ഘടകം) ഡോക്യുമെൻ്റിൻ്റെ മറ്റ് ഭാഗങ്ങളുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ അതിൻ്റെ യഥാർത്ഥ സ്ഥാനവും വലുപ്പവും നിലനിർത്തും. ലേഔട്ട് കണക്കുകൂട്ടലുകൾ കൺടെയ്ൻ ചെയ്ത ഘടകത്തിൻ്റെ അതിർത്തിക്കുള്ളിൽ ഫലപ്രദമായി ക്വാറൻ്റൈൻ ചെയ്യപ്പെടുന്നു.

നേട്ടങ്ങൾ:

• റീഫ്ലോ സ്കോപ്പ് കുറയ്ക്കുന്നു: ലേഔട്ട് മാറ്റങ്ങൾക്കിടയിൽ ബ്രൗസറിന് പുനർകണക്കുകൂട്ടേണ്ട ഏരിയയിൽ കാര്യമായ കുറവുണ്ടാകുന്നു എന്നതാണ് പ്രധാന നേട്ടം. ഇതിനർത്ഥം കുറഞ്ഞ സിപിയു ഉപഭോഗവും വേഗതയേറിയ റെൻഡറിംഗ് സമയവുമാണ്.
• പ്രവചിക്കാവുന്ന ലേഔട്ട്: ഡൈനാമിക് ഉള്ളടക്കമോ ആനിമേഷനുകളോ ഒരു ഘടകത്തിനുള്ളിൽ ആന്തരിക മാറ്റങ്ങൾക്ക് കാരണമാകുമ്പോഴും, പേജിൻ്റെ മൊത്തത്തിലുള്ള ലേഔട്ട് സ്ഥിരമായി നിലനിർത്താൻ സഹായിക്കുന്നു.

ഉപയോഗ സാഹചര്യങ്ങൾ:

• സ്വതന്ത്ര യുഐ ഘടകങ്ങൾ: ഒരു സങ്കീർണ്ണമായ ഫോം വാലിഡേഷൻ ഘടകത്തെക്കുറിച്ച് ചിന്തിക്കുക, അവിടെ പിശക് സന്ദേശങ്ങൾ പ്രത്യക്ഷപ്പെടുകയോ അപ്രത്യക്ഷമാകുകയോ ചെയ്യാം, ഇത് ഫോമിൻ്റെ ആന്തരിക ലേഔട്ട് മാറാൻ കാരണമാകുന്നു. ഫോം കണ്ടെയ്നറിൽ contain: layout; പ്രയോഗിക്കുന്നത് ഈ മാറ്റങ്ങൾ ഫൂട്ടറിനെയോ സൈഡ്ബാറിനെയോ ബാധിക്കുന്നില്ലെന്ന് ഉറപ്പാക്കുന്നു.
• വികസിപ്പിക്കാവുന്ന/ചുരുക്കാവുന്ന വിഭാഗങ്ങൾ: ഉള്ളടക്കം വികസിക്കുകയോ ചുരുങ്ങുകയോ ചെയ്യുന്ന ഒരു അക്കോർഡിയൻ-സ്റ്റൈൽ ഘടകം നിങ്ങൾക്കുണ്ടെങ്കിൽ, ഓരോ വിഭാഗത്തിലും contain: layout; പ്രയോഗിക്കുന്നത് ഒരു വിഭാഗത്തിൻ്റെ ഉയരം മാറുമ്പോൾ മുഴുവൻ പേജിൻ്റെയും ലേഔട്ട് പുനർമൂല്യനിർണ്ണയം ചെയ്യുന്നത് തടയാൻ കഴിയും.
• വിജറ്റുകളും കാർഡുകളും: ഒരു ഡാഷ്‌ബോർഡിലോ ഉൽപ്പന്ന ലിസ്റ്റിംഗ് പേജിലോ, ഓരോ ഇനവും ഒരു സ്വതന്ത്ര കാർഡോ വിജറ്റോ ആണ്. ഒരു കാർഡിനുള്ളിൽ ഒരു ചിത്രം സാവധാനം ലോഡുചെയ്യുകയോ അല്ലെങ്കിൽ ഉള്ളടക്കം ഡൈനാമിക്കായി ക്രമീകരിക്കുകയോ ചെയ്താൽ, ആ കാർഡിലെ contain: layout; അയൽ കാർഡുകളോ മൊത്തത്തിലുള്ള ഗ്രിഡോ അനാവശ്യമായി റീഫ്ലോ ആകുന്നത് തടയുന്നു.

പരിഗണനകൾ:

• കൺടെയ്ൻ ചെയ്ത ഘടകം ഒരു പുതിയ ബ്ലോക്ക് ഫോർമാറ്റിംഗ് കോൺടെക്സ്റ്റ് സ്ഥാപിക്കണം, overflow: hidden; അല്ലെങ്കിൽ display: flex; ഉള്ള ഘടകങ്ങൾക്ക് സമാനമായി.
• ആന്തരിക ലേഔട്ട് മാറ്റങ്ങൾ കൺടെയ്ൻ ചെയ്യപ്പെടുമെങ്കിലും, അതിൻ്റെ ഉള്ളടക്കം ഒരു പുതിയ വലുപ്പം നിർദ്ദേശിക്കുകയും contain: size; പ്രയോഗിച്ചിട്ടില്ലെങ്കിൽ ഘടകം സ്വയം വലുപ്പം മാറ്റിയേക്കാം.
• ഫലപ്രദമായ കൺടെയ്ൻമെൻ്റിനായി, ഘടകത്തിന് വ്യക്തമായതോ പ്രവചിക്കാവുന്നതോ ആയ വലുപ്പം ഉണ്ടായിരിക്കണം, contain: size; വഴി കർശനമായി നടപ്പിലാക്കിയിട്ടില്ലെങ്കിലും.

contain: paint; – ദൃശ്യപരമായ അപ്‌ഡേറ്റുകൾ നിയന്ത്രിക്കുന്നു

നിങ്ങൾ ഒരു ഘടകത്തിൽ contain: paint; പ്രയോഗിക്കുമ്പോൾ, നിങ്ങൾ ബ്രൗസറിനെ അറിയിക്കുകയാണ്: "ഈ ഘടകത്തിനുള്ളിലെ ഒന്നും അതിൻ്റെ ബൗണ്ടിംഗ് ബോക്സിന് പുറത്ത് പെയിൻ്റ് ചെയ്യപ്പെടില്ല. കൂടാതെ, ഈ ഘടകം ഓഫ്-സ്ക്രീൻ ആണെങ്കിൽ, നിങ്ങൾ അതിൻ്റെ ഉള്ളടക്കങ്ങൾ പെയിൻ്റ് ചെയ്യേണ്ടതില്ല." ഈ സൂചന റെൻഡറിംഗ് പൈപ്പ്ലൈനിലെ പെയിൻ്റിംഗ് ഘട്ടത്തെ കാര്യമായി ഒപ്റ്റിമൈസ് ചെയ്യുന്നു.

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു: ഈ മൂല്യം ബ്രൗസറിനോട് രണ്ട് നിർണായക കാര്യങ്ങൾ പറയുന്നു. ഒന്നാമതായി, ഘടകത്തിൻ്റെ ഉള്ളടക്കം അതിൻ്റെ ബൗണ്ടിംഗ് ബോക്സിലേക്ക് ക്ലിപ്പ് ചെയ്യപ്പെടുന്നു എന്ന് ഇത് സൂചിപ്പിക്കുന്നു. രണ്ടാമതായി, പ്രകടനത്തിന് കൂടുതൽ പ്രധാനമായി, ഇത് ബ്രൗസറിനെ കാര്യക്ഷമമായ "കള്ളിംഗ്" നടത്താൻ പ്രാപ്തമാക്കുന്നു. ഘടകം തന്നെ വ്യൂപോർട്ടിന് പുറത്താണെങ്കിൽ (ഓഫ്-സ്ക്രീൻ) അല്ലെങ്കിൽ മറ്റൊരു ഘടകം മറച്ചിട്ടുണ്ടെങ്കിൽ, അതിൻ്റെ പിൻഗാമികളെയൊന്നും പെയിൻ്റ് ചെയ്യേണ്ടതില്ലെന്ന് ബ്രൗസറിന് അറിയാം, ഇത് ഗണ്യമായ പ്രോസസ്സിംഗ് സമയം ലാഭിക്കുന്നു.

നേട്ടങ്ങൾ:

• റീപെയിൻ്റ് സ്കോപ്പ് കുറയ്ക്കുന്നു: റീപെയിൻ്റ് ചെയ്യേണ്ട ഏരിയയെ ഘടകത്തിൻ്റെ അതിരുകൾക്കുള്ളിൽ പരിമിതപ്പെടുത്തുന്നു.
• കാര്യക്ഷമമായ കള്ളിംഗ്: കണ്ടെയ്നിംഗ് ഘടകം ദൃശ്യമല്ലെങ്കിൽ DOM-ൻ്റെ മുഴുവൻ സബ്ട്രീകളും പെയിൻ്റ് ചെയ്യുന്നത് ഒഴിവാക്കാൻ ബ്രൗസറിനെ അനുവദിക്കുന്നു, ഇത് നീണ്ട ലിസ്റ്റുകൾ, കറൗസലുകൾ, അല്ലെങ്കിൽ മറഞ്ഞിരിക്കുന്ന യുഐ ഘടകങ്ങൾ എന്നിവയ്ക്ക് അവിശ്വസനീയമാംവിധം ഉപയോഗപ്രദമാണ്.
• മെമ്മറി ലാഭിക്കൽ: ഓഫ്-സ്ക്രീൻ ഉള്ളടക്കം പെയിൻ്റ് ചെയ്യാത്തതിലൂടെ, ബ്രൗസറുകൾക്ക് മെമ്മറിയും സംരക്ഷിക്കാൻ കഴിയും.

ഉപയോഗ സാഹചര്യങ്ങൾ:

• അനന്തമായ സ്ക്രോളിംഗ് ലിസ്റ്റുകൾ/വിർച്വലൈസ്ഡ് ഉള്ളടക്കം: ആയിരക്കണക്കിന് ലിസ്റ്റ് ഇനങ്ങളുമായി ഇടപെഴകുമ്പോൾ, അവയിൽ ഒരു ചെറിയ ഭാഗം മാത്രമേ ഏത് സമയത്തും ദൃശ്യമാകൂ. ഓരോ ലിസ്റ്റ് ഇനത്തിലും (അല്ലെങ്കിൽ ലിസ്റ്റ് ഇനങ്ങളുടെ ഒരു ബാച്ചിൻ്റെ കണ്ടെയ്നറിൽ) contain: paint; പ്രയോഗിക്കുന്നത് ദൃശ്യമായ ഇനങ്ങൾ മാത്രം പെയിൻ്റ് ചെയ്യപ്പെടുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.
• ഓഫ്-സ്ക്രീൻ മോഡലുകൾ/സൈഡ്ബാറുകൾ: നിങ്ങൾക്ക് ഒരു മോഡൽ ഡയലോഗ്, ഒരു നാവിഗേഷൻ സൈഡ്ബാർ, അല്ലെങ്കിൽ αρχικά മറഞ്ഞിരിക്കുകയും കാഴ്ചയിലേക്ക് സ്ലൈഡ് ചെയ്യുകയും ചെയ്യുന്ന ഏതെങ്കിലും യുഐ ഘടകം ഉണ്ടെങ്കിൽ, അതിൽ 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; എന്ന് എഴുതുന്നതിന് തുല്യമാണ്. ഇത് പല സാധാരണ യുഐ ഘടകങ്ങൾക്കും ഒരു മികച്ച ഡിഫോൾട്ട് ചോയ്സാക്കി മാറ്റുന്നു.

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു: `content` പ്രയോഗിക്കുന്നതിലൂടെ, ഘടകത്തിൻ്റെ ആന്തരിക ലേഔട്ട് മാറ്റങ്ങൾ പുറത്തുള്ള ഒന്നിനെയും ബാധിക്കില്ലെന്നും, അതിൻ്റെ ആന്തരിക പെയിൻ്റ് പ്രവർത്തനങ്ങളും പരിമിതപ്പെടുത്തിയിട്ടുണ്ടെന്നും നിങ്ങൾ ബ്രൗസറിനോട് പറയുന്നു, ഇത് ഘടകം ഓഫ്-സ്ക്രീൻ ആണെങ്കിൽ കാര്യക്ഷമമായ കള്ളിംഗിന് അനുവദിക്കുന്നു. ഇത് പ്രകടന നേട്ടങ്ങളും സാധ്യമായ പാർശ്വഫലങ്ങളും തമ്മിലുള്ള ഒരു ശക്തമായ സന്തുലിതാവസ്ഥയാണ്.

നേട്ടങ്ങൾ:

• വിശാലമായ പ്രകടന മെച്ചപ്പെടുത്തൽ: ഒരൊറ്റ പ്രഖ്യാപനം കൊണ്ട് ഏറ്റവും സാധാരണമായ രണ്ട് പ്രകടന തടസ്സങ്ങളെ (ലേഔട്ട്, പെയിൻ്റ്) അഭിസംബോധന ചെയ്യുന്നു.
• സുരക്ഷിതമായ ഡിഫോൾട്ട്: ഇത് `strict` നേക്കാൾ പൊതുവെ സുരക്ഷിതമാണ്, കാരണം ഇത് `size` കൺടെയ്ൻമെൻ്റ് അടിച്ചേൽപ്പിക്കുന്നില്ല, അതായത് ഘടകം അതിൻ്റെ ഉള്ളടക്കത്തിനനുസരിച്ച് ഇപ്പോഴും വളരുകയോ ചുരുങ്ങുകയോ ചെയ്യാം, ഇത് ഡൈനാമിക് യുഐകൾക്ക് കൂടുതൽ വഴക്കമുള്ളതാക്കുന്നു.
• ലളിതമായ കോഡ്: `layout`, `paint` എന്നിവ വെവ്വേറെ പ്രഖ്യാപിക്കുന്നതിനേക്കാൾ വാചാലത കുറയ്ക്കുന്നു.

ഉപയോഗ സാഹചര്യങ്ങൾ:

• വ്യക്തിഗത ലിസ്റ്റ് ഇനങ്ങൾ: ലേഖനങ്ങളുടെയോ ഉൽപ്പന്നങ്ങളുടെയോ സന്ദേശങ്ങളുടെയോ ഒരു ഡൈനാമിക് ലിസ്റ്റിൽ, ഓരോ ലിസ്റ്റ് ഇനത്തിലും contain: content; പ്രയോഗിക്കുന്നത് ഒരു ഇനം ചേർക്കുകയോ/നീക്കം ചെയ്യുകയോ അല്ലെങ്കിൽ അതിൻ്റെ ആന്തരിക ഉള്ളടക്കം മാറ്റുകയോ ചെയ്യുന്നത് (ഉദാഹരണത്തിന്, ഒരു ചിത്രം ലോഡുചെയ്യുന്നു, ഒരു വിവരണം വികസിക്കുന്നു) ആ പ്രത്യേക ഇനത്തിന് മാത്രം ലേഔട്ടും പെയിൻ്റും ട്രിഗർ ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കുന്നു, മുഴുവൻ ലിസ്റ്റിനെയോ പേജിനെയോ അല്ല.
• ഡാഷ്ബോർഡ് വിജറ്റുകൾ: ഒരു ഡാഷ്ബോർഡിലെ ഓരോ വിജറ്റിനും contain: content; നൽകാം, അതിൻ്റെ സ്വയം പര്യാപ്തത ഉറപ്പാക്കുന്നു.
• ബ്ലോഗ് പോസ്റ്റ് കാർഡുകൾ: ബ്ലോഗ് പോസ്റ്റ് സംഗ്രഹങ്ങളുടെ ഒരു ഗ്രിഡിനായി, ഓരോ കാർഡിലും ഒരു ചിത്രം, തലക്കെട്ട്, ഉദ്ധരണി എന്നിവ അടങ്ങിയിരിക്കുന്നു, contain: content; റെൻഡറിംഗ് വേർതിരിച്ച് നിലനിർത്താൻ കഴിയും.

പരിഗണനകൾ:

• പൊതുവെ സുരക്ഷിതമാണെങ്കിലും, `paint` കൺടെയ്ൻമെൻ്റ് അർത്ഥമാക്കുന്നത് ഉള്ളടക്കം ഘടകത്തിൻ്റെ അതിരുകൾ കവിഞ്ഞൊഴുകുകയാണെങ്കിൽ അത് ക്ലിപ്പ് ചെയ്യപ്പെടും എന്നാണ്.
• ഘടകം അതിൻ്റെ ഉള്ളടക്കത്തിനനുസരിച്ച് വലുപ്പം മാറ്റും, അതിനാൽ ലേഔട്ട് ഷിഫ്റ്റുകൾ തടയാൻ നിങ്ങൾക്ക് ശരിക്കും ഒരു നിശ്ചിത വലുപ്പം ആവശ്യമുണ്ടെങ്കിൽ, നിങ്ങൾ വ്യക്തമായി contain: size; ചേർക്കുകയോ അല്ലെങ്കിൽ CSS ഉപയോഗിച്ച് അളവുകൾ കൈകാര്യം ചെയ്യുകയോ ചെയ്യേണ്ടിവരും.

contain: strict; – ആത്യന്തിക ഐസൊലേഷൻ (ലേഔട്ട് + പെയിൻ്റ് + സൈസ് + സ്റ്റൈൽ)

contain: strict; എന്നത് കൺടെയ്ൻമെൻ്റിൻ്റെ ഏറ്റവും ആക്രമണാത്മക രൂപമാണ്, ഇത് contain: layout paint size style; എന്ന് പ്രഖ്യാപിക്കുന്നതിന് തുല്യമാണ്. നിങ്ങൾ contain: strict; പ്രയോഗിക്കുമ്പോൾ, നിങ്ങൾ ബ്രൗസറിന് വളരെ ശക്തമായ ഒരു വാഗ്ദാനം നൽകുകയാണ്: "ഈ ഘടകം പൂർണ്ണമായും വേർതിരിക്കപ്പെട്ടതാണ്. അതിൻ്റെ കുട്ടികളുടെ സ്റ്റൈലുകൾ, ലേഔട്ട്, പെയിൻ്റ്, അതിൻ്റെ സ്വന്തം വലുപ്പം പോലും പുറത്തുള്ള ഒന്നിനോടും ബന്ധമില്ലാത്തതാണ്."

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു: ഈ മൂല്യം റെൻഡറിംഗ് ഒപ്റ്റിമൈസ് ചെയ്യാൻ ബ്രൗസറിന് സാധ്യമായ പരമാവധി വിവരങ്ങൾ നൽകുന്നു. ഇത് ഘടകത്തിൻ്റെ വലുപ്പം സ്ഥിരമാണെന്ന് അനുമാനിക്കുന്നു (വ്യക്തമായി സജ്ജീകരിച്ചിട്ടില്ലെങ്കിൽ പൂജ്യത്തിലേക്ക് ചുരുങ്ങും), അതിൻ്റെ പെയിൻ്റ് ക്ലിപ്പ് ചെയ്യപ്പെടുന്നു, അതിൻ്റെ ലേഔട്ട് സ്വതന്ത്രമാണ്, അതിൻ്റെ സ്റ്റൈലുകൾ പൂർവ്വികരെ ബാധിക്കുന്നില്ല. ഇത് ഡോക്യുമെൻ്റിൻ്റെ മറ്റ് ഭാഗങ്ങൾ പരിഗണിക്കുമ്പോൾ ഈ ഘടകവുമായി ബന്ധപ്പെട്ട മിക്കവാറും എല്ലാ കണക്കുകൂട്ടലുകളും ഒഴിവാക്കാൻ ബ്രൗസറിനെ അനുവദിക്കുന്നു.

നേട്ടങ്ങൾ:

• പരമാവധി പ്രകടന നേട്ടങ്ങൾ: റെൻഡറിംഗ് ജോലിയെ പൂർണ്ണമായും വേർതിരിച്ച് ഏറ്റവും പ്രധാനപ്പെട്ട പ്രകടന മെച്ചപ്പെടുത്തലുകൾ വാഗ്ദാനം ചെയ്യുന്നു.
• ഏറ്റവും ശക്തമായ പ്രവചനാത്മകത: ഘടകം പേജിൻ്റെ മറ്റ് ഭാഗങ്ങളിൽ അപ്രതീക്ഷിതമായ റീഫ്ലോകളോ റീപെയിൻ്റുകളോ ഉണ്ടാക്കില്ലെന്ന് ഉറപ്പാക്കുന്നു.
• യഥാർത്ഥത്തിൽ സ്വതന്ത്രമായ ഘടകങ്ങൾക്ക് അനുയോജ്യം: യഥാർത്ഥത്തിൽ സ്വയം ഉൾക്കൊള്ളുന്നതും അളവുകൾ അറിയാവുന്നതോ കൃത്യമായി നിയന്ത്രിക്കുന്നതോ ആയ ഘടകങ്ങൾക്ക് അനുയോജ്യമാണ്.

ഉപയോഗ സാഹചര്യങ്ങൾ:

• സങ്കീർണ്ണമായ ഇൻ്ററാക്ടീവ് മാപ്പുകൾ: പേജിൽ അളവുകൾ സ്ഥിരമായ, ഡൈനാമിക് ടൈലുകളും മാർക്കറുകളും ലോഡുചെയ്യുന്ന ഒരു മാപ്പ് ഘടകം.
• ഇഷ്ടാനുസൃത വീഡിയോ പ്ലെയറുകൾ അല്ലെങ്കിൽ എഡിറ്റർമാർ: പ്ലെയർ ഏരിയയ്ക്ക് ഒരു നിശ്ചിത വലുപ്പമുണ്ടാവുകയും അതിൻ്റെ ആന്തരിക യുഐ ഘടകങ്ങൾ ചുറ്റുമുള്ള പേജിനെ ബാധിക്കാതെ പതിവായി മാറുകയും ചെയ്യുന്നിടത്ത്.
• ഗെയിം ക്യാൻവാസുകൾ: ഡോക്യുമെൻ്റിനുള്ളിൽ ഒരു നിശ്ചിത വലുപ്പമുള്ള ക്യാൻവാസ് ഘടകത്തിൽ റെൻഡർ ചെയ്യുന്ന വെബ് അധിഷ്ഠിത ഗെയിമുകൾക്ക്.
• ഉയർന്ന ഒപ്റ്റിമൈസ് ചെയ്ത വിർച്വലൈസ്ഡ് ഗ്രിഡുകൾ: ഒരു വലിയ ഡാറ്റാ ഗ്രിഡിലെ ഓരോ സെല്ലും കർശനമായി വലുപ്പം നിശ്ചയിക്കുകയും കൈകാര്യം ചെയ്യുകയും ചെയ്യുന്ന സാഹചര്യങ്ങളിൽ.

പരിഗണനകൾ:

• വ്യക്തമായ വലുപ്പം ആവശ്യമാണ്: ഇതിൽ `contain: size;` ഉൾപ്പെടുന്നതിനാൽ, ഘടകത്തിന് ഒരു നിശ്ചിത `width`, `height` (അല്ലെങ്കിൽ മറ്റ് വലുപ്പ പ്രോപ്പർട്ടികൾ) ഉണ്ടായിരിക്കണം. ഇല്ലെങ്കിൽ, അത് പൂജ്യത്തിലേക്ക് ചുരുങ്ങുകയും അതിൻ്റെ ഉള്ളടക്കം അദൃശ്യമാവുകയും ചെയ്യും. ഇതാണ് ഏറ്റവും സാധാരണമായ പിഴവ്.
• ഉള്ളടക്കം ക്ലിപ്പ് ചെയ്യൽ: `paint` കൺടെയ്ൻമെൻ്റ് ഉൾപ്പെടുത്തിയിരിക്കുന്നതിനാൽ, പ്രഖ്യാപിത അളവുകൾ കവിഞ്ഞൊഴുകുന്ന ഏതൊരു ഉള്ളടക്കവും ക്ലിപ്പ് ചെയ്യപ്പെടും.
• മറഞ്ഞിരിക്കുന്ന പ്രശ്നങ്ങൾക്കുള്ള സാധ്യത: ഇത് വളരെ ആക്രമണാത്മകമായതിനാൽ, ഘടകം അനുമാനിച്ചത്ര സ്വതന്ത്രമല്ലെങ്കിൽ അപ്രതീക്ഷിത സ്വഭാവം സംഭവിക്കാം. സമഗ്രമായ പരിശോധന നിർണായകമാണ്.
• കുറഞ്ഞ വഴക്കം: `size` നിയന്ത്രണം കാരണം, ഉള്ളടക്കത്തിനനുസരിച്ച് സ്വാഭാവികമായി അളവുകൾ മാറുന്ന ഘടകങ്ങൾക്ക് ഇത് അത്ര അനുയോജ്യമല്ല.

യഥാർത്ഥ ലോക പ്രയോഗങ്ങൾ: ആഗോള ഉപയോക്തൃ അനുഭവങ്ങൾ മെച്ചപ്പെടുത്തുന്നു

സിഎസ്എസ് കൺടെയ്ൻമെൻ്റിൻ്റെ സൗന്ദര്യം അതിൻ്റെ വൈവിധ്യമാർന്ന വെബ് ഇൻ്റർഫേസുകളിലുടനീളമുള്ള പ്രായോഗിക പ്രയോഗക്ഷമതയിലാണ്, ഇത് ലോകമെമ്പാടുമുള്ള ഉപയോക്തൃ അനുഭവങ്ങൾ മെച്ചപ്പെടുത്തുന്ന വ്യക്തമായ പ്രകടന നേട്ടങ്ങളിലേക്ക് നയിക്കുന്നു. contain ഒരു പ്രധാന വ്യത്യാസം വരുത്താൻ കഴിയുന്ന ചില സാധാരണ സാഹചര്യങ്ങൾ നമുക്ക് പര്യവേക്ഷണം ചെയ്യാം:

അനന്തമായ സ്ക്രോളിംഗ് ലിസ്റ്റുകളും ഗ്രിഡുകളും ഒപ്റ്റിമൈസ് ചെയ്യുന്നു

സോഷ്യൽ മീഡിയ ഫീഡുകൾ മുതൽ ഇ-കൊമേഴ്സ് ഉൽപ്പന്ന ലിസ്റ്റിംഗുകൾ വരെ, പല ആധുനിക വെബ് ആപ്ലിക്കേഷനുകളും വലിയ അളവിലുള്ള ഉള്ളടക്കം പ്രദർശിപ്പിക്കുന്നതിന് അനന്തമായ സ്ക്രോളിംഗോ വിർച്വലൈസ്ഡ് ലിസ്റ്റുകളോ ഉപയോഗിക്കുന്നു. ശരിയായ ഒപ്റ്റിമൈസേഷൻ ഇല്ലാതെ, അത്തരം ലിസ്റ്റുകളിലേക്ക് പുതിയ ഇനങ്ങൾ ചേർക്കുന്നത്, അല്ലെങ്കിൽ അവയിലൂടെ സ്ക്രോൾ ചെയ്യുന്നത് പോലും, വ്യൂപോർട്ടിലേക്ക് പ്രവേശിക്കുകയും പുറത്തുപോകുകയും ചെയ്യുന്ന ഘടകങ്ങൾക്ക് തുടർച്ചയായതും ചെലവേറിയതുമായ ലേഔട്ട്, പെയിൻ്റ് പ്രവർത്തനങ്ങൾക്ക് കാരണമാകും. ഇത് തടസ്സങ്ങൾക്കും നിരാശാജനകമായ ഉപയോക്തൃ അനുഭവത്തിനും കാരണമാകുന്നു, പ്രത്യേകിച്ച് മൊബൈൽ ഉപകരണങ്ങളിലോ അല്ലെങ്കിൽ വിവിധ ആഗോള പ്രദേശങ്ങളിൽ സാധാരണമായ വേഗത കുറഞ്ഞ നെറ്റ്‌വർക്കുകളിലോ.

contain ഉപയോഗിച്ചുള്ള പരിഹാരം: ഓരോ വ്യക്തിഗത ലിസ്റ്റ് ഇനത്തിലും (ഉദാഹരണത്തിന്, ഒരു `<ul>`-നുള്ളിലെ `<li>` ഘടകങ്ങൾ അല്ലെങ്കിൽ ഒരു ഗ്രിഡിലെ `<div>` ഘടകങ്ങൾ) contain: content; (അല്ലെങ്കിൽ `contain: layout paint;`) പ്രയോഗിക്കുന്നത് വളരെ ഫലപ്രദമാണ്. ഒരു ലിസ്റ്റ് ഇനത്തിനുള്ളിലെ മാറ്റങ്ങൾ (ഉദാഹരണത്തിന്, ഒരു ചിത്രം ലോഡുചെയ്യുന്നത്, ടെക്സ്റ്റ് വികസിക്കുന്നത്) മറ്റ് ഇനങ്ങളുടെയോ മൊത്തത്തിലുള്ള സ്ക്രോൾ കണ്ടെയ്നറിൻ്റെയോ ലേഔട്ടിനെ ബാധിക്കില്ലെന്ന് ഇത് ബ്രൗസറിനോട് പറയുന്നു.

.list-item {
  contain: content; /* ലേഔട്ടിനും പെയിൻ്റിനുമുള്ള ചുരുക്കെഴുത്ത് */
  /* പ്രവചിക്കാവുന്ന വലുപ്പത്തിനായി ഡിസ്പ്ലേ, വീതി, ഉയരം പോലുള്ള മറ്റ് ആവശ്യമായ സ്റ്റൈലിംഗ് ചേർക്കുക */
}

നേട്ടങ്ങൾ: ബ്രൗസറിന് ഇപ്പോൾ ദൃശ്യമായ ലിസ്റ്റ് ഇനങ്ങളുടെ റെൻഡറിംഗ് കാര്യക്ഷമമായി കൈകാര്യം ചെയ്യാൻ കഴിയും. ഒരു ഇനം കാഴ്ചയിലേക്ക് സ്ക്രോൾ ചെയ്യുമ്പോൾ, അതിൻ്റെ വ്യക്തിഗത ലേഔട്ടും പെയിൻ്റും മാത്രമേ കണക്കാക്കൂ, അത് പുറത്തേക്ക് സ്ക്രോൾ ചെയ്യുമ്പോൾ, മറ്റൊന്നിനെയും ബാധിക്കാതെ അത് റെൻഡർ ചെയ്യുന്നത് സുരക്ഷിതമായി ഒഴിവാക്കാമെന്ന് ബ്രൗസറിന് അറിയാം. ഇത് ഗണ്യമായി സുഗമമായ സ്ക്രോളിംഗിനും കുറഞ്ഞ മെമ്മറി ഉപയോഗത്തിനും ഇടയാക്കുന്നു, ഇത് ലോകമെമ്പാടുമുള്ള വിവിധ ഹാർഡ്‌വെയറും നെറ്റ്‌വർക്ക് സാഹചര്യങ്ങളുമുള്ള ഉപയോക്താക്കൾക്ക് ആപ്ലിക്കേഷനെ കൂടുതൽ പ്രതികരണശേഷിയുള്ളതും ആക്സസ് ചെയ്യാവുന്നതുമാക്കി മാറ്റുന്നു.

സ്വതന്ത്ര യുഐ വിജറ്റുകളും കാർഡുകളും കൺടെയ്ൻ ചെയ്യുന്നു

ഡാഷ്ബോർഡുകൾ, വാർത്താ പോർട്ടലുകൾ, കൂടാതെ പല വെബ് ആപ്ലിക്കേഷനുകളും ഒരു മോഡുലാർ സമീപനം ഉപയോഗിച്ചാണ് നിർമ്മിച്ചിരിക്കുന്നത്, വിവിധ തരം വിവരങ്ങൾ പ്രദർശിപ്പിക്കുന്ന ഒന്നിലധികം സ്വതന്ത്ര "വിജറ്റുകൾ" അല്ലെങ്കിൽ "കാർഡുകൾ" ഫീച്ചർ ചെയ്യുന്നു. ഓരോ വിജറ്റിനും അതിൻ്റേതായ ആന്തരിക അവസ്ഥ, ഡൈനാമിക് ഉള്ളടക്കം, അല്ലെങ്കിൽ ഇൻ്ററാക്ടീവ് ഘടകങ്ങൾ എന്നിവ ഉണ്ടാകാം. കൺടെയ്ൻമെൻ്റ് ഇല്ലാതെ, ഒരു വിജറ്റിലെ ഒരു അപ്‌ഡേറ്റ് (ഉദാഹരണത്തിന്, ഒരു ചാർട്ട് ആനിമേറ്റ് ചെയ്യുന്നത്, ഒരു അലേർട്ട് സന്ദേശം പ്രത്യക്ഷപ്പെടുന്നത്) അവിചാരിതമായി മുഴുവൻ ഡാഷ്ബോർഡിലുടനീളം ഒരു റീഫ്ലോ അല്ലെങ്കിൽ റീപെയിൻ്റിന് കാരണമായേക്കാം, ഇത് ശ്രദ്ധേയമായ തടസ്സങ്ങളിലേക്ക് നയിക്കുന്നു.

contain ഉപയോഗിച്ചുള്ള പരിഹാരം: ഓരോ ടോപ്പ്-ലെവൽ വിജറ്റിലോ കാർഡ് കണ്ടെയ്നറിലോ contain: content; പ്രയോഗിക്കുക.

.dashboard-widget {
  contain: content;
  /* നിർവചിച്ച അളവുകൾ അല്ലെങ്കിൽ ബാഹ്യ റീഫ്ലോകൾക്ക് കാരണമാകാത്ത വഴക്കമുള്ള വലുപ്പം ഉറപ്പാക്കുക */
}

.product-card {
  contain: content;
  /* സ്ഥിരമായ വലുപ്പം നിർവചിക്കുക അല്ലെങ്കിൽ സ്ഥിരമായ ലേഔട്ടിനായി ഫ്ലെക്സ്/ഗ്രിഡ് ഉപയോഗിക്കുക */
}

നേട്ടങ്ങൾ: ഒരു വ്യക്തിഗത വിജറ്റ് അപ്‌ഡേറ്റ് ചെയ്യുമ്പോൾ, അതിൻ്റെ റെൻഡറിംഗ് പ്രവർത്തനങ്ങൾ അതിൻ്റെ അതിരുകൾക്കുള്ളിൽ ഒതുങ്ങുന്നു. മറ്റ് വിജറ്റുകൾക്കോ പ്രധാന ഡാഷ്ബോർഡ് ഘടനക്കോ വേണ്ടി ലേഔട്ടും പെയിൻ്റും പുനർമൂല്യനിർണ്ണയം ചെയ്യുന്നത് ബ്രൗസറിന് ആത്മവിശ്വാസത്തോടെ ഒഴിവാക്കാൻ കഴിയും. ഇത് ഉയർന്ന പ്രകടനവും സ്ഥിരതയുമുള്ള ഒരു യുഐയിലേക്ക് നയിക്കുന്നു, അവിടെ ഡൈനാമിക് അപ്‌ഡേറ്റുകൾ തടസ്സമില്ലാത്തതായി അനുഭവപ്പെടുന്നു, മൊത്തത്തിലുള്ള പേജിൻ്റെ സങ്കീർണ്ണത പരിഗണിക്കാതെ, ലോകമെമ്പാടുമുള്ള സങ്കീർണ്ണമായ ഡാറ്റാ വിഷ്വലൈസേഷനുകളുമായോ വാർത്താ ഫീഡുകളുമായോ സംവദിക്കുന്ന ഉപയോക്താക്കൾക്ക് പ്രയോജനം ചെയ്യുന്നു.

ഓഫ്-സ്ക്രീൻ ഉള്ളടക്കം കാര്യക്ഷമമായി കൈകാര്യം ചെയ്യുന്നു

പല വെബ് ആപ്ലിക്കേഷനുകളും αρχικά മറഞ്ഞിരിക്കുകയും പിന്നീട് വെളിപ്പെടുത്തുകയോ കാഴ്ചയിലേക്ക് ആനിമേറ്റ് ചെയ്യുകയോ ചെയ്യുന്ന ഘടകങ്ങൾ ഉപയോഗിക്കുന്നു, മോഡൽ ഡയലോഗുകൾ, ഓഫ്-ക്യാൻവാസ് നാവിഗേഷൻ മെനുകൾ, അല്ലെങ്കിൽ വികസിപ്പിക്കാവുന്ന വിഭാഗങ്ങൾ എന്നിവ പോലെ. ഈ ഘടകങ്ങൾ മറഞ്ഞിരിക്കുമ്പോൾ (ഉദാഹരണത്തിന്, `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-ൻ്റെ ഭാഗമാണ്.
• ആന്തരിക റെൻഡറിംഗ് സ്വഭാവം നിങ്ങളുടെ നിയന്ത്രണത്തിന് പുറത്തുള്ള മൂന്നാം കക്ഷി ഘടകങ്ങളാണ്.

ദത്തെടുക്കുന്നതിനുള്ള മികച്ച രീതികൾ

സിഎസ്എസ് കൺടെയ്ൻമെൻ്റ് ഫലപ്രദമായി പ്രയോജനപ്പെടുത്തുന്നതിന്, ഈ മികച്ച രീതികൾ പരിഗണിക്കുക:

• ആദ്യം പ്രൊഫൈൽ ചെയ്യുക, പിന്നീട് ഒപ്റ്റിമൈസ് ചെയ്യുക: ബ്രൗസർ ഡെവലപ്പർ ടൂളുകൾ (ഉദാ. Chrome DevTools Performance tab, Firefox Performance Monitor) ഉപയോഗിച്ച് യഥാർത്ഥ പ്രകടന തടസ്സങ്ങൾ തിരിച്ചറിയുക എന്നതാണ് ഏറ്റവും നിർണായകമായ ഘട്ടം. ദീർഘനേരം പ്രവർത്തിക്കുന്ന ലേഔട്ട്, പെയിൻ്റ് ടാസ്കുകൾക്കായി നോക്കുക. contain അന്ധമായി പ്രയോഗിക്കരുത്; അതൊരു ലക്ഷ്യം വെച്ചുള്ള ഒപ്റ്റിമൈസേഷൻ ആയിരിക്കണം.
• content ഉപയോഗിച്ച് ചെറുതായി തുടങ്ങുക: മിക്ക സ്വയം ഉൾക്കൊള്ളുന്ന യുഐ ഘടകങ്ങൾക്കും (ഉദാ. കാർഡുകൾ, ലിസ്റ്റ് ഇനങ്ങൾ, അടിസ്ഥാന വിജറ്റുകൾ), 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-നപ്പുറം: വെബ് പ്രകടനത്തിൻ്റെ ഒരു സമഗ്ര കാഴ്ച

സിഎസ്എസ് contain റെൻഡറിംഗ് പ്രകടന ഐസൊലേഷന് അവിശ്വസനീയമാംവിധം വിലപ്പെട്ട ഒരു ഉപകരണമാണെങ്കിലും, ഇത് വളരെ വലിയ ഒരു പസിലിൻ്റെ ഒരു ഭാഗം മാത്രമാണെന്ന് ഓർമ്മിക്കേണ്ടത് നിർണായകമാണ്. യഥാർത്ഥത്തിൽ മികച്ച പ്രകടനമുള്ള ഒരു വെബ് അനുഭവം കെട്ടിപ്പടുക്കുന്നതിന് ഒന്നിലധികം ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകൾ സംയോജിപ്പിച്ച് ഒരു സമഗ്ര സമീപനം ആവശ്യമാണ്. ഈ വിശാലമായ ലാൻഡ്‌സ്‌കേപ്പിൽ contain എങ്ങനെ യോജിക്കുന്നുവെന്ന് മനസ്സിലാക്കുന്നത് ആഗോളതലത്തിൽ മികച്ചുനിൽക്കുന്ന വെബ് ആപ്ലിക്കേഷനുകൾ സൃഷ്ടിക്കാൻ നിങ്ങളെ പ്രാപ്തരാക്കും.

• content-visibility: ഒരു ശക്തനായ സഹോദരൻ: പതിവായി ഓഫ്-സ്ക്രീൻ ആയ ഘടകങ്ങൾക്ക്, content-visibility, `contain: paint;` നേക്കാൾ കൂടുതൽ ആക്രമണാത്മകമായ ഒപ്റ്റിമൈസേഷൻ വാഗ്ദാനം ചെയ്യുന്നു. ഒരു ഘടകത്തിന് `content-visibility: auto;` ഉള്ളപ്പോൾ, ബ്രൗസർ അതിൻ്റെ സബ്ട്രീ റെൻഡർ ചെയ്യുന്നത് പൂർണ്ണമായും ഒഴിവാക്കുന്നു, അത് ദൃശ്യമാകുന്നതിന് തൊട്ടുമുമ്പ് മാത്രം ലേഔട്ടും പെയിൻ്റ് ജോലിയും ചെയ്യുന്നു. ഇത് നീണ്ട, സ്ക്രോൾ ചെയ്യാവുന്ന പേജുകൾക്കോ അക്കോർഡിയനുകൾക്കോ അവിശ്വസനീയമാംവിധം ശക്തമാണ്. ഇത് പലപ്പോഴും ഓഫ്-സ്ക്രീൻ, ഓൺ-സ്ക്രീൻ അവസ്ഥകൾക്കിടയിൽ മാറുന്ന ഘടകങ്ങൾക്ക് `contain: layout;` உடன் നന്നായി ജോടിയാക്കുന്നു.
• will-change: ഉദ്ദേശ്യപരമായ സൂചനകൾ: will-change സിഎസ്എസ് പ്രോപ്പർട്ടി, സമീപഭാവിയിൽ ഒരു ഘടകത്തിൽ നിങ്ങൾ ആനിമേറ്റ് ചെയ്യാനോ മാറ്റാനോ പ്രതീക്ഷിക്കുന്ന പ്രോപ്പർട്ടികൾ ബ്രൗസറിന് വ്യക്തമായി സൂചന നൽകാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഇത് ബ്രൗസറിന് അതിൻ്റെ റെൻഡറിംഗ് പൈപ്പ്ലൈൻ ഒപ്റ്റിമൈസ് ചെയ്യാൻ സമയം നൽകുന്നു, ഉദാഹരണത്തിന്, ഘടകത്തെ അതിൻ്റേതായ ലെയറിലേക്ക് പ്രൊമോട്ട് ചെയ്യുന്നതിലൂടെ, ഇത് സുഗമമായ ആനിമേഷനുകളിലേക്ക് നയിച്ചേക്കാം. ഇത് മിതമായി ഉപയോഗിക്കുക, യഥാർത്ഥത്തിൽ പ്രതീക്ഷിക്കുന്ന മാറ്റങ്ങൾക്ക് മാത്രം, കാരണം അമിതമായ പ്രയോഗം വർദ്ധിച്ച മെമ്മറി ഉപയോഗത്തിലേക്ക് നയിച്ചേക്കാം.
• വിർച്വലൈസേഷനും വിൻഡോവിംഗ് ടെക്നിക്കുകളും: വളരെ വലിയ ലിസ്റ്റുകൾക്ക് (ആയിരക്കണക്കിന് അല്ലെങ്കിൽ പതിനായിരക്കണക്കിന് ഇനങ്ങൾ), contain: content; പോലും മതിയാകില്ല. വിർച്വലൈസേഷൻ (അല്ലെങ്കിൽ വിൻഡോവിംഗ്) നടപ്പിലാക്കുന്ന ഫ്രെയിംവർക്കുകളും ലൈബ്രറികളും നിലവിൽ വ്യൂപോർട്ടിൽ ദൃശ്യമായ ലിസ്റ്റ് ഇനങ്ങളുടെ ഒരു ചെറിയ ഉപവിഭാഗം മാത്രം റെൻഡർ ചെയ്യുന്നു, ഉപയോക്താവ് സ്ക്രോൾ ചെയ്യുമ്പോൾ ഡൈനാമിക്കായി ഇനങ്ങൾ ചേർക്കുകയും നീക്കം ചെയ്യുകയും ചെയ്യുന്നു. ഭീമാകാരമായ ഡാറ്റാ സെറ്റുകൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള ആത്യന്തിക ടെക്നിക്കാണിത്.
• സിഎസ്എസ് ഒപ്റ്റിമൈസേഷനുകൾ: contain-നപ്പുറം, CSS ഓർഗനൈസേഷനുള്ള മികച്ച രീതികൾ (ഉദാ. BEM, ITCSS) ഉപയോഗിക്കുക, സങ്കീർണ്ണമായ സെലക്ടറുകളുടെ ഉപയോഗം കുറയ്ക്കുക, സാധ്യമാകുന്നിടത്തെല്ലാം `!important` ഒഴിവാക്കുക. കാര്യക്ഷമമായ CSS വിതരണവും (മിനിഫിക്കേഷൻ, കോൺകാറ്റനേഷൻ, ക്രിട്ടിക്കൽ CSS ഇൻലൈനിംഗ്) വേഗതയേറിയ αρχിക റെൻഡറുകൾക്ക് അത്യന്താപേക്ഷിതമാണ്.
• JavaScript ഒപ്റ്റിമൈസേഷനുകൾ: DOM കാര്യക്ഷമമായി കൈകാര്യം ചെയ്യുക, ചെലവേറിയ പുനർകണക്കുകൂട്ടലുകൾക്ക് കാരണമാകുന്ന ഇവൻ്റ് ഹാൻഡ്ലറുകളെ ഡിബൗൺസ് ചെയ്യുകയോ ത്രോട്ടിൽ ചെയ്യുകയോ ചെയ്യുക, ഉചിതമായ സ്ഥലങ്ങളിൽ വെബ് വർക്കർമാർക്ക് ഭാരമേറിയ കണക്കുകൂട്ടലുകൾ ഓഫ്‌ലോഡ് ചെയ്യുക. പ്രധാന ത്രെഡിനെ ബ്ലോക്ക് ചെയ്യുന്ന JavaScript-ൻ്റെ അളവ് കുറയ്ക്കുക.
• നെറ്റ്‌വർക്ക് ഒപ്റ്റിമൈസേഷനുകൾ: ഇതിൽ ഇമേജ് ഒപ്റ്റിമൈസേഷൻ (കംപ്രഷൻ, ശരിയായ ഫോർമാറ്റുകൾ, റെസ്പോൺസീവ് ഇമേജുകൾ), ചിത്രങ്ങളുടെയും വീഡിയോകളുടെയും ലേസി ലോഡിംഗ്, കാര്യക്ഷമമായ ഫോണ്ട് ലോഡിംഗ് തന്ത്രങ്ങൾ, ആഗോള ഉപയോക്താക്കൾക്ക് അസറ്റുകൾ അടുത്ത് നൽകുന്നതിന് കണ്ടൻ്റ് ഡെലിവറി നെറ്റ്‌വർക്കുകൾ (CDN-കൾ) പ്രയോജനപ്പെടുത്തൽ എന്നിവ ഉൾപ്പെടുന്നു.
• സെർവർ-സൈഡ് റെൻഡറിംഗ് (SSR) / സ്റ്റാറ്റിക് സൈറ്റ് ജനറേഷൻ (SSG): നിർണായക ഉള്ളടക്കത്തിന്, സെർവറിലോ ബിൽഡ് സമയത്തോ HTML ജനറേറ്റ് ചെയ്യുന്നത് ഗ്രഹിക്കപ്പെടുന്ന പ്രകടനവും കോർ വെബ് വൈറ്റലുകളും ഗണ്യമായി മെച്ചപ്പെടുത്താൻ കഴിയും, കാരണം αρχിക റെൻഡർ മുൻകൂട്ടി കണക്കാക്കിയതാണ്.

സിഎസ്എസ് കൺടെയ്ൻമെൻ്റിനെ ഈ വിശാലമായ തന്ത്രങ്ങളുമായി സംയോജിപ്പിക്കുന്നതിലൂടെ, ഡെവലപ്പർമാർക്ക് യഥാർത്ഥത്തിൽ ഉയർന്ന പ്രകടനമുള്ള വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ കഴിയും, അത് അവരുടെ ഉപകരണം, നെറ്റ്‌വർക്ക്, അല്ലെങ്കിൽ ഭൂമിശാസ്ത്രപരമായ സ്ഥാനം എന്നിവ പരിഗണിക്കാതെ എല്ലായിടത്തുമുള്ള ഉപയോക്താക്കൾക്ക് ഒരു മികച്ച അനുഭവം വാഗ്ദാനം ചെയ്യുന്നു.

ഉപസംഹാരം: എല്ലാവർക്കുമായി വേഗതയേറിയതും കൂടുതൽ പ്രാപ്യവുമായ ഒരു വെബ് നിർമ്മിക്കുന്നു

സിഎസ്എസ് contain പ്രോപ്പർട്ടി വെബ് സ്റ്റാൻഡേർഡുകളുടെ തുടർച്ചയായ പരിണാമത്തിന് ഒരു സാക്ഷ്യപത്രമായി നിലകൊള്ളുന്നു, ഡെവലപ്പർമാർക്ക് റെൻഡറിംഗ് പ്രകടനത്തിൽ സൂക്ഷ്മമായ നിയന്ത്രണം നൽകുന്നു. ഘടകങ്ങളെ വ്യക്തമായി വേർതിരിക്കാൻ നിങ്ങളെ പ്രാപ്തരാക്കുന്നതിലൂടെ, ഇത് ബ്രൗസറുകളെ കൂടുതൽ കാര്യക്ഷമമായി പ്രവർത്തിക്കാൻ അനുവദിക്കുന്നു, സങ്കീർണ്ണമായ വെബ് ആപ്ലിക്കേഷനുകളെ പലപ്പോഴും അലട്ടുന്ന അനാവശ്യ ലേഔട്ടും പെയിൻ്റ് ജോലിയും കുറയ്ക്കുന്നു. ഇത് നേരിട്ട് കൂടുതൽ സുഗമവും പ്രതികരണശേഷിയുള്ളതും ആസ്വാദ്യകരവുമായ ഒരു ഉപയോക്തൃ അനുഭവത്തിലേക്ക് വിവർത്തനം ചെയ്യുന്നു.

ഡിജിറ്റൽ സാന്നിധ്യം പരമപ്രധാനമായ ഒരു ലോകത്ത്, മികച്ച പ്രകടനമുള്ളതും മന്ദഗതിയിലുള്ളതുമായ ഒരു വെബ്സൈറ്റ് തമ്മിലുള്ള വ്യത്യാസം പലപ്പോഴും വിജയമോ പരാജയമോ നിർണ്ണയിക്കുന്നു. തടസ്സമില്ലാത്ത ഒരു അനുഭവം നൽകാനുള്ള കഴിവ് സൗന്ദര്യശാസ്ത്രത്തെക്കുറിച്ച് മാത്രമല്ല; ഇത് പ്രവേശനക്ഷമത, ഇടപഴകൽ, ആത്യന്തികമായി, ലോകത്തിൻ്റെ എല്ലാ കോണുകളിൽ നിന്നുമുള്ള ഉപയോക്താക്കൾക്കായി ഡിജിറ്റൽ വിടവ് നികത്തുന്നതിനെക്കുറിച്ചാണ്. ഒരു വികസ്വര രാജ്യത്ത് പഴയ ഒരു മൊബൈൽ ഫോണിൽ നിങ്ങളുടെ സേവനം ആക്സസ് ചെയ്യുന്ന ഒരു ഉപയോക്താവ്, ഉയർന്ന നിലവാരമുള്ള ഡെസ്ക്ടോപ്പുള്ള ഫൈബർ ഒപ്റ്റിക് കണക്ഷനിലുള്ള ഒരു ഉപയോക്താവിനെപ്പോലെ തന്നെ, സിഎസ്എസ് കൺടെയ്ൻമെൻ്റ് ഉപയോഗിച്ച് ഒപ്റ്റിമൈസ് ചെയ്ത ഒരു സൈറ്റിൽ നിന്ന് വളരെയധികം പ്രയോജനം നേടും.

എല്ലാ ഫ്രണ്ട്-എൻഡ് ഡെവലപ്പർമാരെയും contain-ൻ്റെ കഴിവുകളിലേക്ക് ആഴത്തിൽ ഇറങ്ങിച്ചെല്ലാൻ ഞങ്ങൾ പ്രോത്സാഹിപ്പിക്കുന്നു. നിങ്ങളുടെ ആപ്ലിക്കേഷനുകൾ പ്രൊഫൈൽ ചെയ്യുക, ഒപ്റ്റിമൈസേഷന് അനുയോജ്യമായ മേഖലകൾ തിരിച്ചറിയുക, ഈ ശക്തമായ സിഎസ്എസ് പ്രഖ്യാപനങ്ങൾ തന്ത്രപരമായി പ്രയോഗിക്കുക. contain-നെ ഒരു പെട്ടെന്നുള്ള പരിഹാരമായിട്ടല്ല, മറിച്ച് നിങ്ങളുടെ വെബ് പ്രോജക്റ്റുകളുടെ കരുത്തിനും കാര്യക്ഷമതയ്ക്കും സംഭാവന നൽകുന്ന ഒരു ചിന്തനീയമായ, വാസ്തുവിദ്യാപരമായ തീരുമാനമായി സ്വീകരിക്കുക.

സിഎസ്എസ് കൺടെയ്ൻമെൻ്റ് പോലുള്ള ടെക്നിക്കുകളിലൂടെ റെൻഡറിംഗ് പൈപ്പ്ലൈൻ സൂക്ഷ്മമായി ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിലൂടെ, ഞങ്ങൾ വേഗതയേറിയതും കൂടുതൽ കാര്യക്ഷമവും എല്ലായിടത്തുമുള്ള എല്ലാവർക്കും യഥാർത്ഥത്തിൽ പ്രാപ്യവുമായ ഒരു വെബ് നിർമ്മിക്കുന്നതിന് സംഭാവന നൽകുന്നു. പ്രകടനത്തോടുള്ള ഈ പ്രതിബദ്ധത ഒരു മികച്ച ആഗോള ഡിജിറ്റൽ ഭാവിക്കുള്ള പ്രതിബദ്ധതയാണ്. ഇന്ന് contain ഉപയോഗിച്ച് പരീക്ഷിക്കാൻ തുടങ്ങുക, നിങ്ങളുടെ ആപ്ലിക്കേഷനുകൾക്കായി വെബ് പ്രകടനത്തിൻ്റെ അടുത്ത ഘട്ടം അൺലോക്ക് ചെയ്യുക!