സിഎസ്എസ് ഗ്രിഡ് ട്രാക്ക് സൈസിംഗ് പെർഫോമൻസ് പ്രൊഫൈലിംഗ്: ലേഔട്ട് കണക്കുകൂട്ടൽ അനലിറ്റിക്സിലേക്കുള്ള ഒരു ആഴത്തിലുള്ള പഠനം

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

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

ഈ സമഗ്രമായ ഗൈഡ് നിങ്ങളെ സിഎസ്എസ് ഗ്രിഡ് പ്രകടനത്തിന്റെ ലോകത്തേക്ക് ആഴത്തിൽ കൊണ്ടുപോകും. നമ്മൾ സിന്റാക്സിനപ്പുറം കടന്ന് പ്രകടന വ്യത്യാസങ്ങൾക്ക് പിന്നിലെ 'എന്തുകൊണ്ട്' എന്ന് പര്യവേക്ഷണം ചെയ്യും. നിങ്ങളുടെ ഗ്രിഡ് ട്രാക്ക് സൈസിംഗ് തന്ത്രങ്ങൾ മൂലമുണ്ടാകുന്ന ലേഔട്ട് തടസ്സങ്ങൾ അളക്കാനും വിശകലനം ചെയ്യാനും കണ്ടെത്താനും ബ്രൗസർ ഡെവലപ്പർ ടൂളുകൾ എങ്ങനെ ഉപയോഗിക്കാമെന്ന് നിങ്ങൾ പഠിക്കും. ഇത് പൂർത്തിയാകുമ്പോഴേക്കും, മനോഹരവും റെസ്‌പോൺസീവും മാത്രമല്ല, മിന്നൽ വേഗമുള്ളതുമായ ലേഔട്ടുകൾ നിർമ്മിക്കാൻ നിങ്ങൾ സജ്ജരാകും.

ബ്രൗസർ റെൻഡറിംഗ് പൈപ്പ്ലൈൻ മനസ്സിലാക്കൽ

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

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

എന്തുകൊണ്ടാണ് 'ലേഔട്ട്' ഘട്ടം ഗ്രിഡ് പ്രകടനത്തിന് നിർണ്ണായകമാകുന്നത്

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

ഒരു അന്തിമ ലേഔട്ടിൽ എത്താൻ ബ്രൗസറിന്റെ ലേഔട്ട് എഞ്ചിന് ഈ സങ്കീർണ്ണമായ സമവാക്യങ്ങളുടെ സിസ്റ്റം പരിഹരിക്കേണ്ടതുണ്ട്. നിങ്ങളുടെ ഗ്രിഡ് ട്രാക്കുകൾ നിങ്ങൾ നിർവചിക്കുന്ന രീതി - നിങ്ങളുടെ സൈസിംഗ് യൂണിറ്റുകളുടെയും ഫംഗ്ഷനുകളുടെയും തിരഞ്ഞെടുപ്പ് - ഈ സിസ്റ്റം പരിഹരിക്കാൻ ആവശ്യമായ ബുദ്ധിമുട്ടിനെയും അതുവഴി സമയത്തെയും നേരിട്ട് സ്വാധീനിക്കുന്നു. അതുകൊണ്ടാണ് `grid-template-columns`-ലെ നിസ്സാരമെന്ന് തോന്നുന്ന ഒരു മാറ്റത്തിന് റെൻഡറിംഗ് പ്രകടനത്തിൽ ആനുപാതികമല്ലാത്ത സ്വാധീനം ചെലുത്താൻ കഴിയുന്നത്.

സിഎസ്എസ് ഗ്രിഡ് ട്രാക്ക് സൈസിംഗിന്റെ ഘടന: ഒരു പ്രകടന കാഴ്ചപ്പാട്

ഫലപ്രദമായി പ്രൊഫൈൽ ചെയ്യുന്നതിന്, നിങ്ങളുടെ കൈവശമുള്ള ഉപകരണങ്ങളുടെ പ്രകടന സവിശേഷതകൾ നിങ്ങൾ മനസ്സിലാക്കേണ്ടതുണ്ട്. നമുക്ക് സാധാരണ ട്രാക്ക് സൈസിംഗ് മെക്കാനിസങ്ങളെ തരംതിരിക്കുകയും അവയുടെ സാധ്യതയുള്ള കമ്പ്യൂട്ടേഷണൽ ചെലവ് വിശകലനം ചെയ്യുകയും ചെയ്യാം.

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 ഡാറ്റ പ്രോസസ്സ് ചെയ്യുകയും നിങ്ങൾക്ക് വിശദമായ ഒരു ടൈംലൈൻ നൽകുകയും ചെയ്യും.

ഫ്ലെയിം ചാർട്ട് വിശകലനം ചെയ്യുന്നു

നിങ്ങളുടെ റെക്കോർഡിംഗിന്റെ പ്രധാന ദൃശ്യ പ്രതിനിധാനമാണ് ഫ്ലെയിം ചാർട്ട്. ലേഔട്ട് വിശകലനത്തിനായി, നിങ്ങൾ "Main" ത്രെഡ് വിഭാഗത്തിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കാൻ ആഗ്രഹിക്കും.

"Rendering" എന്ന് ലേബൽ ചെയ്തിട്ടുള്ള നീണ്ട, പർപ്പിൾ ബാറുകൾക്കായി നോക്കുക. ഇവയ്ക്കുള്ളിൽ, "Layout" എന്ന് ലേബൽ ചെയ്തിട്ടുള്ള ഇരുണ്ട പർപ്പിൾ ഇവന്റുകൾ നിങ്ങൾ കണ്ടെത്തും. ബ്രൗസർ പേജിന്റെ ജ്യാമിതി കണക്കാക്കുന്ന പ്രത്യേക നിമിഷങ്ങളാണിത്.

• നീണ്ട ലേഔട്ട് ടാസ്കുകൾ: ഒരൊറ്റ, നീണ്ട 'ലേഔട്ട്' ബ്ലോക്ക് ഒരു റെഡ് ഫ്ലാഗ് ആണ്. അതിന്റെ ദൈർഘ്യം കാണാൻ അതിന് മുകളിൽ ഹോവർ ചെയ്യുക. ശക്തമായ ഒരു മെഷീനിൽ ഏതാനും മില്ലിസെക്കൻഡിൽ കൂടുതൽ (ഉദാഹരണത്തിന്, > 10-15ms) എടുക്കുന്ന ഏതൊരു ലേഔട്ട് ടാസ്കും അന്വേഷണം അർഹിക്കുന്നു, കാരണം അത് ശക്തി കുറഞ്ഞ ഉപകരണങ്ങളിൽ വളരെ വേഗത കുറഞ്ഞതായിരിക്കും.
• ലേഔട്ട് ത്രാഷിംഗ്: പലപ്പോഴും ജാവാസ്ക്രിപ്റ്റ് ('സ്ക്രിപ്റ്റിംഗ്' ഇവന്റുകൾ) ഇടകലർന്ന്, പെട്ടെന്നുള്ള തുടർച്ചയായി സംഭവിക്കുന്ന നിരവധി ചെറിയ 'ലേഔട്ട്' ഇവന്റുകൾക്കായി നോക്കുക. ലേഔട്ട് ത്രാഷിംഗ് എന്നറിയപ്പെടുന്ന ഈ പാറ്റേൺ, ജാവാസ്ക്രിപ്റ്റ് ആവർത്തിച്ച് ഒരു ജ്യാമിതീയ പ്രോപ്പർട്ടി (ഉദാഹരണത്തിന് `offsetHeight`) വായിക്കുകയും തുടർന്ന് അതിനെ അസാധുവാക്കുന്ന ഒരു സ്റ്റൈൽ എഴുതുകയും ചെയ്യുമ്പോൾ സംഭവിക്കുന്നു, ഇത് ബ്രൗസറിനെ ഒരു ലൂപ്പിൽ വീണ്ടും വീണ്ടും ലേഔട്ട് പുനഃക്രമീകരിക്കാൻ നിർബന്ധിക്കുന്നു.

സംഗ്രഹവും പെർഫോമൻസ് മോണിറ്ററും ഉപയോഗിക്കുന്നത്

• സംഗ്രഹ ടാബ്: ഫ്ലെയിം ചാർട്ടിൽ ഒരു സമയപരിധി തിരഞ്ഞെടുത്ത ശേഷം, താഴെയുള്ള സംഗ്രഹ ടാബ് ചെലവഴിച്ച സമയത്തെ തരംതിരിക്കുന്ന ഒരു പൈ ചാർട്ട് നൽകുന്നു. "Rendering"-നും പ്രത്യേകിച്ച് "Layout"-നും നൽകിയിട്ടുള്ള ശതമാനത്തിൽ ശ്രദ്ധിക്കുക.
• പെർഫോമൻസ് മോണിറ്റർ: തത്സമയ വിശകലനത്തിനായി, പെർഫോമൻസ് മോണിറ്റർ തുറക്കുക (DevTools മെനുവിൽ നിന്ന്: More tools > Performance monitor). ഇത് സിപിയു ഉപയോഗം, ജെഎസ് ഹീപ്പ് വലുപ്പം, ഡോം നോഡുകൾ, നിർണ്ണായകമായി, 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;`. ആദ്യത്തെ കോളം വിവിധ വിജറ്റുകൾ അടങ്ങുന്ന ഒരു സൈഡ്‌ബാറാണ്. ഈ വിജറ്റുകളിലൊന്ന് ഒരു കലണ്ടറാണ്, അത് സിഎസ്എസ് ഗ്രിഡ് ഉപയോഗിച്ചാണ് നിർമ്മിച്ചിരിക്കുന്നത്.

വിശകലനം:

ബ്രൗസറിന്റെ ലേഔട്ട് എഞ്ചിൻ ഒരു വെല്ലുവിളി നിറഞ്ഞ ഡിപൻഡൻസി ശൃംഖലയെ അഭിമുഖീകരിക്കുന്നു:

1. പ്രധാന പേജിന്റെ `max-content` കോളം പരിഹരിക്കുന്നതിന്, അത് സൈഡ്‌ബാറിന്റെ `max-content` വീതി കണക്കാക്കണം.
2. സൈഡ്‌ബാറിന്റെ വീതി കണക്കാക്കാൻ, കലണ്ടർ വിജറ്റ് ഉൾപ്പെടെ അതിന്റെ എല്ലാ ചൈൽഡുകളുടെയും വീതി കണക്കാക്കണം.
3. കലണ്ടർ വിജറ്റിന്റെ വീതി കണക്കാക്കാൻ, അത് അതിന്റെ സ്വന്തം ആന്തരിക ഗ്രിഡ് ലേഔട്ട് പരിഹരിക്കണം.

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

ഒപ്റ്റിമൈസേഷൻ തന്ത്രങ്ങളും മികച്ച രീതികളും

ഞങ്ങളുടെ വിശകലനത്തെ അടിസ്ഥാനമാക്കി, ഉയർന്ന പ്രകടനമുള്ള ഗ്രിഡ് ലേഔട്ടുകൾ നിർമ്മിക്കുന്നതിന് നിരവധി പ്രവർത്തനക്ഷമമായ തന്ത്രങ്ങൾ നമുക്ക് ഉരുത്തിരിച്ചെടുക്കാം.

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. വെർച്വലൈസേഷൻ: വലിയ ഡാറ്റാസെറ്റുകൾക്കുള്ള ആത്യന്തിക പരിഹാരം

നിങ്ങൾ നൂറുകണക്കിനോ ആയിരക്കണക്കിനോ ഇനങ്ങളുള്ള ഒരു ഗ്രിഡ് നിർമ്മിക്കുകയാണെങ്കിൽ (ഉദാഹരണത്തിന്, ഒരു ഡാറ്റാ ഗ്രിഡ്, ഒരു ഇൻഫിനിറ്റ്-സ്ക്രോളിംഗ് ഫോട്ടോ ഗാലറി), ഒരു സിഎസ്എസ് മാറ്റത്തിനും അടിസ്ഥാനപരമായ പ്രശ്നം പരിഹരിക്കാൻ കഴിയില്ല: ബ്രൗസറിന് ഇപ്പോഴും ഓരോ എലമെന്റിനും ലേഔട്ട് കണക്കാക്കേണ്ടതുണ്ട്.

പരിഹാരം വെർച്വലൈസേഷൻ (അല്ലെങ്കിൽ 'വിൻഡോയിംഗ്') ആണ്. ഇത് ഒരു ജാവാസ്ക്രിപ്റ്റ് അടിസ്ഥാനമാക്കിയുള്ള സാങ്കേതികതയാണ്, അവിടെ നിങ്ങൾ നിലവിൽ വ്യൂപോർട്ടിൽ ദൃശ്യമാകുന്ന കുറച്ച് DOM എലമെന്റുകൾ മാത്രം റെൻഡർ ചെയ്യുന്നു. ഉപയോക്താവ് സ്ക്രോൾ ചെയ്യുമ്പോൾ, നിങ്ങൾ ഈ DOM നോഡുകൾ പുനരുപയോഗിക്കുകയും അവയുടെ ഉള്ളടക്കം മാറ്റുകയും ചെയ്യുന്നു. ഇത് നിങ്ങളുടെ ഡാറ്റാസെറ്റിന് 100 അല്ലെങ്കിൽ 100,000 ഇനങ്ങൾ ഉണ്ടെങ്കിലും, ഒരു ലേഔട്ട് കണക്കുകൂട്ടലിനിടെ ബ്രൗസറിന് കൈകാര്യം ചെയ്യേണ്ട എലമെന്റുകളുടെ എണ്ണം ചെറുതും സ്ഥിരവുമായി നിലനിർത്തുന്നു.

`react-window`, `tanstack-virtual` പോലുള്ള ലൈബ്രറികൾ ഈ പാറ്റേണിന്റെ ശക്തമായ നടപ്പാക്കലുകൾ നൽകുന്നു. യഥാർത്ഥത്തിൽ വലിയ തോതിലുള്ള ഗ്രിഡുകൾക്ക്, നിങ്ങൾക്ക് ചെയ്യാൻ കഴിയുന്ന ഏറ്റവും ഫലപ്രദമായ പ്രകടന ഒപ്റ്റിമൈസേഷനാണിത്.

കേസ് സ്റ്റഡി: ഒരു ഉൽപ്പന്ന ലിസ്റ്റിംഗ് ഗ്രിഡ് ഒപ്റ്റിമൈസ് ചെയ്യുന്നു

ഒരു ആഗോള ഇ-കൊമേഴ്‌സ് വെബ്‌സൈറ്റിനായി ഒരു റിയലിസ്റ്റിക് ഒപ്റ്റിമൈസേഷൻ സാഹചര്യം നമുക്ക് പരിശോധിക്കാം.

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

പ്രാരംഭ കോഡ് ("മുമ്പത്തെ" അവസ്ഥ):

ഗ്രിഡ് വളരെ ഫ്ലെക്സിബിൾ ആയി നിർവചിച്ചിരിക്കുന്നു, ഉൽപ്പന്ന കാർഡുകൾക്ക് അവയുടെ ഉള്ളടക്കത്തെ അടിസ്ഥാനമാക്കി (ഉദാഹരണത്തിന്, നീണ്ട ഉൽപ്പന്ന നാമങ്ങൾ) കോളം വീതി നിർണ്ണയിക്കാൻ അനുവദിക്കുന്നു.

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

പ്രകടന വിശകലനം:

1. ബ്രൗസർ വിൻഡോയുടെ വലുപ്പം മാറ്റുമ്പോൾ ഞങ്ങൾ ഒരു പ്രകടന പ്രൊഫൈൽ റെക്കോർഡ് ചെയ്യുന്നു.
2. റീസൈസ് ഇവന്റ് ഓരോ തവണയും പ്രവർത്തിക്കുമ്പോൾ ഫ്ലെയിം ചാർട്ട് ഒരു നീണ്ട, ആവർത്തിച്ചുള്ള 'ലേഔട്ട്' ടാസ്ക് കാണിക്കുന്നു, ഒരു ശരാശരി ഉപകരണത്തിൽ 80ms-ൽ കൂടുതൽ എടുക്കുന്നു.
3. `fit-content()` ഫംഗ്ഷൻ `min-content`, `max-content` കണക്കുകൂട്ടലുകളെ ആശ്രയിച്ചിരിക്കുന്നു. ഓരോ റീസൈസിനും, ഗ്രിഡ് ഘടന പുനഃക്രമീകരിക്കുന്നതിന് ബ്രൗസർ ദൃശ്യമായ എല്ലാ ഉൽപ്പന്ന കാർഡുകളുടെയും ഉള്ളടക്കം വീണ്ടും അളക്കുന്നുവെന്ന് പ്രൊഫൈലർ സ്ഥിരീകരിക്കുന്നു. ഇതാണ് കാലതാമസത്തിന്റെ ഉറവിടം.

പരിഹാരം ("ശേഷമുള്ള" അവസ്ഥ):

ഞങ്ങൾ ഒരു ഇൻട്രിൻസിക്, ഉള്ളടക്കത്തെ അടിസ്ഥാനമാക്കിയുള്ള സൈസിംഗ് മോഡലിൽ നിന്ന് ഒരു എക്സ്ട്രിൻസിക്, കണ്ടെയ്നർ-നിർവചിത മോഡലിലേക്ക് മാറുന്നു. ഞങ്ങൾ കാർഡുകൾക്ക് ഒരു ഉറച്ച മിനിമം വലുപ്പം സജ്ജീകരിക്കുകയും ലഭ്യമായ സ്ഥലത്തിന്റെ ഒരു ഭാഗത്തേക്ക് അവയെ ഫ്ലെക്സ് ചെയ്യാൻ അനുവദിക്കുകയും ചെയ്യുന്നു.

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

ഉൽപ്പന്ന കാർഡിന്റെ സിഎസ്എസിനുള്ളിൽ, ഈ പുതിയ, കൂടുതൽ കർക്കശമായ കണ്ടെയ്നറിനുള്ളിൽ നീണ്ട ഉള്ളടക്കം ഭംഗിയായി കൈകാര്യം ചെയ്യാൻ ഞങ്ങൾ നിയമങ്ങൾ ചേർക്കുന്നു:

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

ഫലം:

1. വലുപ്പം മാറ്റുമ്പോൾ ഞങ്ങൾ ഒരു പുതിയ പ്രകടന പ്രൊഫൈൽ റെക്കോർഡ് ചെയ്യുന്നു.
2. ഫ്ലെയിം ചാർട്ട് ഇപ്പോൾ 'ലേഔട്ട്' ടാസ്ക് അവിശ്വസനീയമാംവിധം ചെറുതാണെന്ന് കാണിക്കുന്നു, സ്ഥിരമായി 5ms-ന് താഴെ.
3. ബ്രൗസറിന് ഇനി ഉള്ളടക്കം അളക്കേണ്ട ആവശ്യമില്ല. ഇത് കണ്ടെയ്നറിന്റെ വീതിയെയും `280px` മിനിമത്തെയും അടിസ്ഥാനമാക്കി ഒരു ലളിതമായ ഗണിതശാസ്ത്ര കണക്കുകൂട്ടൽ നടത്തുന്നു.
4. ഉപയോക്തൃ അനുഭവം രൂപാന്തരപ്പെട്ടു. വലുപ്പം മാറ്റുന്നത് സുഗമവും തൽക്ഷണവുമാണ്. ഫിൽട്ടറുകൾ പ്രയോഗിക്കുന്നത് വേഗത്തിൽ അനുഭവപ്പെടുന്നു, കാരണം ബ്രൗസറിന് പുതിയ ലേഔട്ട് തൽക്ഷണം കണക്കാക്കാൻ കഴിയും.

ക്രോസ്-ബ്രൗസർ ടൂളിംഗിനെക്കുറിച്ചുള്ള ഒരു കുറിപ്പ്

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

ഉപസംഹാരം: ഡിസൈൻ വഴി മികച്ച പ്രകടനമുള്ള ഗ്രിഡുകൾ നിർമ്മിക്കുന്നു

സിഎസ്എസ് ഗ്രിഡ് അസാധാരണമാംവിധം ശക്തമായ ഒരു ഉപകരണമാണ്, എന്നാൽ അതിന്റെ ഏറ്റവും നൂതനമായ സവിശേഷതകൾ കമ്പ്യൂട്ടേഷണൽ ചെലവിൽ നിന്ന് മുക്തമല്ല. വിപുലമായ ഉപകരണങ്ങളും നെറ്റ്‌വർക്ക് സാഹചര്യങ്ങളുമുള്ള ഒരു ആഗോള പ്രേക്ഷകർക്കായി വികസിപ്പിക്കുന്ന വെബ് പ്രൊഫഷണലുകൾ എന്ന നിലയിൽ, വികസന പ്രക്രിയയുടെ തുടക്കം മുതൽ തന്നെ നാം പ്രകടനത്തെക്കുറിച്ച് ബോധവാന്മാരായിരിക്കണം.

പ്രധാന പാഠങ്ങൾ വ്യക്തമാണ്:

• ലേഔട്ട് ഒരു പ്രകടന തടസ്സമാണ്: റെൻഡറിംഗിന്റെ 'ലേഔട്ട്' ഘട്ടം ചെലവേറിയതാകാം, പ്രത്യേകിച്ച് സിഎസ്എസ് ഗ്രിഡ് പോലുള്ള സങ്കീർണ്ണവും നിയന്ത്രണത്തെ അടിസ്ഥാനമാക്കിയുള്ളതുമായ സിസ്റ്റങ്ങളിൽ.
• സൈസിംഗ് തന്ത്രം പ്രധാനമാണ്: എക്സ്ട്രിൻസിക്, കണ്ടെയ്നർ-നിർവചിത സൈസിംഗ് (`px`, `fr`, `%`) ഇൻട്രിൻസിക്, ഉള്ളടക്കത്തെ അടിസ്ഥാനമാക്കിയുള്ള സൈസിംഗിനേക്കാൾ (`min-content`, `max-content`, `auto`) മിക്കവാറും എല്ലായ്പ്പോഴും മികച്ച പ്രകടനം കാഴ്ചവയ്ക്കുന്നു.
• അളക്കുക, ഊഹിക്കരുത്: ബ്രൗസർ പ്രകടന പ്രൊഫൈലറുകൾ ഡീബഗ്ഗിംഗിന് മാത്രമല്ല. നിങ്ങളുടെ ലേഔട്ട് തിരഞ്ഞെടുപ്പുകൾ വിശകലനം ചെയ്യാനും നിങ്ങളുടെ ഒപ്റ്റിമൈസേഷനുകൾ സാധൂകരിക്കാനും അവയെ മുൻകൂട്ടി ഉപയോഗിക്കുക.
• സാധാരണ കേസിനായി ഒപ്റ്റിമൈസ് ചെയ്യുക: വലിയ ഇനങ്ങളുടെ ശേഖരങ്ങൾക്ക്, സങ്കീർണ്ണവും ഉള്ളടക്ക-അധിഷ്ഠിതവുമായ ഒന്നിനേക്കാൾ ലളിതവും എക്സ്ട്രിൻസിക് ആയതുമായ ഒരു ഗ്രിഡ് നിർവചനം മികച്ച ഉപയോക്തൃ അനുഭവം നൽകും.

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