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

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

இந்த உள் பொறிமுறையானது செயல்திறனுக்கான தேடலில் ஒரு அமைதியான ஹீரோவாக உள்ளது, ஒரு உலாவி எவ்வளவு விரைவாகவும் திறமையாகவும் ஒரு பக்கத்தை ரெண்டர் செய்ய முடியும் என்பதில் ஒரு முக்கிய பங்கு வகிக்கிறது. இது எவ்வாறு செயல்படுகிறது என்பதைப் புரிந்துகொள்வது, முன்-இறுதி டெவலப்பர்கள் CSS மற்றும் HTML ஐ உலாவியின் மேம்பாட்டு உத்திகளுடன் சீரமைக்க உதவுகிறது, இது முக்கிய வலை முக்கியத்துவம் (CWV) போன்ற முக்கிய அளவீடுகளில் குறிப்பிடத்தக்க முன்னேற்றங்களுக்கு வழிவகுக்கிறது. இந்த கட்டுரை இந்த தற்காலிக சேமிப்பு பொறிமுறைக்குள் உங்களை ஆழமாக அழைத்துச் செல்லும், அது என்ன, ஏன் முக்கியமானது, மேலும் அதன் முழு திறனையும் பயன்படுத்தும் குறியீட்டை எவ்வாறு எழுதலாம் என்பதை விளக்குகிறது.

உலாவி ரெண்டரிங் பைப்லைனுக்கான ஒரு அறிமுகம்

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

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

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

உள்ளார்ந்த அளவு என்றால் என்ன? ஒரு உறுப்பின் இயற்கையான பரிமாணங்களை நீக்குதல்

CSS உலகில், ஒரு உறுப்பின் அளவு இரண்டு முக்கிய வழிகளில் தீர்மானிக்கப்படலாம்: வெளிப்புறமாக அல்லது உள்ளார்ந்தமாக.

வெளிப்புற அளவு

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

உதாரணங்கள்:

• div { width: 500px; height: 250px; } - நிலையான அளவு.
• div { width: 100%; } - அளவு அதன் பெற்றோர் கொள்கலனின் அகலத்தால் தீர்மானிக்கப்படுகிறது.
• div { width: 50vw; } - அளவு வியூபோர்ட்டின் அகலத்தால் தீர்மானிக்கப்படுகிறது.

உள்ளார்ந்த அளவு

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

உதாரணங்கள்:

• ஒரு <img> உறுப்பின் உள்ளார்ந்த அளவு படக் கோப்பின் உண்மையான அகலம் மற்றும் உயரம் (எடுத்துக்காட்டாக, 1200x800 பிக்சல் புகைப்படம்).
• ஒரு <span>Hello World</span> உறுப்பின் உள்ளார்ந்த அளவு உரை உள்ளடக்கம், `font-size`, `font-family`, `letter-spacing` மற்றும் பிற தட்டச்சு பண்புகளால் தீர்மானிக்கப்படுகிறது.
• ஒரு <video> உறுப்பின் உள்ளார்ந்த அளவு வீடியோ பாதையின் பரிமாணம்.
• ஒரு பொத்தானின் உள்ளார்ந்த அளவு அதன் உரை லேபிள், பேடிங் மற்றும் எல்லையைப் பொறுத்தது.

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

எங்கள் கதையின் ஹீரோ: உள்ளார்ந்த அளவு கணக்கீட்டு தற்காலிக சேமிப்பகம்

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

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

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

தற்காலிக சேமிப்பகத்தை செல்லாததாக மாற்றுவது எது?

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

• உள்ளடக்க மாற்றங்கள்: ஒரு <div> க்குள் உரையை மாற்றுவது, <img> இன் src பண்புக்கூறை மாற்றுவது அல்லது ஒரு கொள்கலனில் குழந்தைகளைச் சேர்ப்பது தற்காலிக சேமிப்பகத்தை செல்லாததாக்கும்.
• CSS பண்பு மாற்றம்: உள்ளார்ந்த அளவை நேரடியாக பாதிக்கும் CSS பண்புகளை மாற்றுவது ஒரு மறு கணக்கீட்டை கட்டாயப்படுத்தும். ஒரு உரை உறுப்புக்கு, இது font-size, font-weight, letter-spacing அல்லது white-space ஆக இருக்கலாம்.
• பண்பு மாற்றம்: உள்ளடக்கத்தை வரையறுக்கும் பண்புகளை மாற்றுவது, ஒரு உள்ளீட்டின் value அல்லது ஒரு <textarea> இன் cols மற்றும் rows போன்றவை.

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

நடைமுறை தாக்கங்கள் மற்றும் செயல்திறன் ஆதாயங்கள்

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

தளவமைப்பு தகராறுகளை குறைத்தல்

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

            // BAD: Causes Layout Thrashing
function resizeElements(elements) {
  for (let i = 0; i < elements.length; i++) {
    // READ: This forces the browser to perform a layout to get the accurate width.
    const currentWidth = elements[i].offsetWidth;

    // WRITE: This invalidates the layout, because the width is changing.
    elements[i].style.width = (currentWidth / 2) + 'px';
  }
}
            

              
                Copy
              
            
          

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

முக்கிய வலை முக்கியத்துவத்தை (CWV) மேம்படுத்துதல்

உள்ளார்ந்த அளவு கருத்து கூகிளின் முக்கிய வலை முக்கியத்துவத்துடன் ஆழமாக இணைக்கப்பட்டுள்ளது, இது நிஜ உலக பயனர் அனுபவத்தை அளவிடும் அளவீடுகளின் தொகுப்பாகும்.

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

டெவலப்பர்கள் எவ்வாறு தற்காலிக சேமிப்பகத்தை மேம்படுத்தலாம் (அல்லது தடுக்கலாம்)

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

"செய்ய வேண்டியவை": ஆரோக்கியமான தற்காலிக சேமிப்பகத்திற்கான சிறந்த நடைமுறைகள்

1. மீடியாவிற்கு வெளிப்படையான பரிமாணங்களை வழங்கவும்

CLS ஐத் தடுப்பதற்கும் உலாவி தளவமைப்பு இயந்திரத்திற்கு உதவுவதற்கும் இது மிகவும் முக்கியமான நடைமுறையாகும். உங்கள் <img> மற்றும் <video> உறுப்புகளில் எப்போதும் width மற்றும் height பண்புக்கூறுகளை வழங்கவும்.

            <!-- GOOD -->
<img src="path/to/image.jpg" width="1200" height="800" alt="...">
            

              
                Copy
              
            
          

நவீன உலாவிகள் புத்திசாலித்தனமானவை. படம் ஏற்றும் முன்பே, இந்த பண்புக்கூறுகளைப் பயன்படுத்தி அவை உள்ளார்ந்த ஆஸ்பெக்ட் விகிதத்தை (1200 / 800 = 1.5) கணக்கிடும். உங்கள் CSS இல் `height: auto;` உடன் இணைந்து, இது சரியான அளவு செங்குத்து இடத்தை ஒதுக்க உலாவியை அனுமதிக்கிறது, படம் தோன்றும் போது தளவமைப்பு மாற்றத்தை முழுமையாக நீக்குகிறது.

2. `aspect-ratio` CSS பண்பைப் பயன்படுத்தவும்

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

            .responsive-iframe-container {
  width: 100%;
  aspect-ratio: 16 / 9; /* Tells the browser the intrinsic ratio */
}

.responsive-iframe-container iframe {
  width: 100%;
  height: 100%;
}
            

              
                Copy
              
            
          

இந்த குறியீடு கொள்கலனுக்கு 16: 9 இட ஒதுக்கீட்டை ஒதுக்குகிறது, iframe இன் உள்ளடக்கம் ஏற்றப்படும்போது, பக்க தளவமைப்பு நிலையாக இருப்பதை உறுதி செய்கிறது.

3. `contain` CSS பண்புடன் துணை மரங்களை தனிமைப்படுத்தவும்

`contain` பண்பு உலாவியில் ஒரு உயர் செயல்திறன் குறிப்பு. ஒரு உறுப்பு மற்றும் அதன் உள்ளடக்கம் ஆவண மரத்தின் மற்ற பகுதிகளிலிருந்து முடிந்தவரை சுயாதீனமாக இருப்பதாக அறிவிக்க இது உங்களை அனுமதிக்கிறது. நமக்கான மிகவும் பொருத்தமான மதிப்பு `size`.

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

            .complex-widget {
  contain: content;
  /* You must provide an explicit size for contain:size to work */
  width: 300px;
  height: 500px;
}
            

              
                Copy
              
            
          

4. ஜாவாஸ்கிரிப்டில் தொகுதி DOM புதுப்பிப்புகள்

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

            // GOOD: Batched reads and writes
function resizeElements(elements) {
  // 1. READ phase
  const newWidths = [];
  for (let i = 0; i < elements.length; i++) {
    newWidths.push(elements[i].offsetWidth / 2);
  }

  // 2. WRITE phase
  for (let i = 0; i < elements.length; i++) {
    elements[i].style.width = newWidths[i] + 'px';
  }
}
            

              
                Copy
              
            
          

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

"செய்யக்கூடாதவை": தற்காலிக சேமிப்பகத்தை செல்லாததாக்கி செயல்திறனை பாதிக்கும் நடைமுறைகள்

1. தளவமைப்பைத் தூண்டும் பண்புகளை அனிமேஷன் செய்வது

மிகவும் பொதுவான செயல்திறன் தவறுகளில் ஒன்று ஒரு உறுப்பின் வடிவியலை பாதிக்கும் பண்புகளை அனிமேஷன் செய்வது. width, height, margin, padding, top, மற்றும் left போன்ற பண்புகள் அனைத்தும் ரெண்டரிங் பைப்லைனின் தளவமைப்பு கட்டத்தைத் தூண்டுகின்றன. அவற்றை அனிமேஷன் செய்வது প্রতিটি ചട്ടத்தின் ലേഔട്ട് கணக்கீடுகளை இயக்க உலாவியை கட்டாயப்படுத்துகிறது.

பதிலாக, இசையமைப்பாளரால் கையாளக்கூடிய பண்புகளை அனிமேஷன் ചെയ്യുക: `transform` மற்றும் `opacity`. இந்த பண்புகள் தளவமைப்பைத் தூண்டாது. உலாவி பெரும்பாலும் அனிமேஷனை ஜி.பீ.யூவுக்கு ஆஃப்லோட் செய்ய முடியும், இதன் விளைவாக பட்டு மென்மையான 60fps அனிமேஷன்கள் મુખ્ય நூலைத் தடுக்காது.

            /* BAD: Animates layout */
.box.animate {
  animation: move-bad 2s infinite;
}
@keyframes move-bad {
  from { left: 0; }
  to { left: 200px; }
}

/* GOOD: Animates on the compositor */
.box.animate {
  animation: move-good 2s infinite;
}
@keyframes move-good {
  from { transform: translateX(0); }
  to { transform: translateX(200px); }
}
            

              
                Copy
              
            
          

2. அடிக்கடி மற்றும் தேவையற்ற உள்ளடக்க மாற்றங்கள்

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

ஹூட்டின் கீழ் உற்று நோக்குதல்: உலாவி டெவலப்பர் கருவிகள்

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

செயல்திறன் குழுவைப் பயன்படுத்துதல்

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

• தளவமைப்பு தகராறு: "தளவமைப்பு" என்று பெயரிடப்பட்ட நீண்ட, மீண்டும் மீண்டும் வரும் ஊதா நிற கம்பிகளைத் தேடுங்கள். நீங்கள் ஒரு கட்டாய ரெஃப்ளோ எச்சரிக்கையைப் பார்த்தால் (ஒரு சிறிய சிவப்பு முக்கோணம்), அது தளவமைப்பு தகராறின் தெளிவான அறிகுறியாகும்.
• அனிமேஷன் செயல்திறன்: "மோசமான" `left` அனிமேஷன் மற்றும் "நல்ல" `transform` அனிமேஷனைப் பதிவுசெய்க. `left` அனிமேஷனின் சுயவிவரத்தில், દરેક చട്ടத்தின் ലേഔട്ട് மற்றும் பெயிண்ட் பணிகளின் தொடர்ச்சியான தொடர் இருக்கும். `transform` அனிமேஷனின் சுயவிவரத்தில், મુખ્ય நூல் பெரும்பாலும் செயலற்றதாக இருக்கும், மேலும் வேலை "கலவை" நூலில் நடக்கும்.

தளவமைப்பு மாற்றங்களை காட்சிப்படுத்துதல்

DevTools ரெண்டரிங் தாவலில் (மூன்று-புள்ளி மெனு > மேலும் கருவிகள் > ரெண்டரிங் என்பதிலிருந்து நீங்கள் அதை இயக்க வேண்டியிருக்கலாம்), "தளவமைப்பு ஷிஃப்ட் ரீஜியன்ஸ்" பெட்டியை சரிபார்க்கலாம். தளவமைப்பு மாற்றம் ஏற்படும்போதெல்லாம் இது திரையின் பகுதிகளை நீல நிறத்தில் முன்னிலைப்படுத்தும். ஒரு உறுப்பின் உள்ளார்ந்த அளவு முன்கூட்டியே தெரியாததால் ஏற்படும் CLS சிக்கல்களை பிழைத்திருத்துவதற்கு ഇത് ഒരു അമൂല്യമായ கருவியாகும்.

எதிர்காலம்: வளர்ந்து வரும் உலாவி மேம்பாடுகள்

வேகமாகவும் புத்திசாலித்தனமாகவும் ரெண்டரிங் செய்வதற்காக உலாவி விற்பனையாளர்கள் தொடர்ந்து பணியாற்றி வருகின்றனர். Chromium இன் RenderingNG (அடுத்த தலைமுறை) போன்ற திட்டங்கள் ரெண்டரிங் இயந்திரத்தின் அடிப்படை மறு கட்டமைப்பை மிகவும் நம்பகமானதாகவும், செயல்படக்கூடியதாகவும், கணிக்கக்கூடியதாகவும் பிரதிபலிக்கின்றன. `contain` பண்புகள் டெவலப்பர்களுக்கு அவர்களின் நோக்கத்தை உலாவி இயந்திரத்துடன் தொடர்பு கொள்ள அதிக வெளிப்படையான கருவிகளைக் கொடுக்கும் ஒரு பரந்த போக்கின் ஒரு பகுதியாகும்.

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

முடிவுரை

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

இந்த முக்கிய விஷயங்களை உள்வாங்குவதன் மூலம், நீங்கள் அதிக செயல்திறன் மற்றும் தொழில்முறை முன்-இறுதி குறியீட்டை எழுதலாம்:

• தளவமைப்பு விலை அதிகம்: தளவமைப்பு கணக்கீடுகளைத் தூண்டும் செயல்பாடுகளைப் பற்றி எப்போதும் கவனமாக இருங்கள்.
• அளவு தகவலை முன்கூட்டியே வழங்கவும்: தளவமைப்பு மாற்றங்களைத் தடுக்கவும், அதன் தளவமைப்பை திறமையாகத் திட்டமிட உலாவிக்கு உதவவும் மீடியாவில் `width` / `height` பண்புக்கூறுகள் மற்றும் `aspect-ratio` பண்புகளைப் பயன்படுத்தவும்.
• புத்திசாலித்தனமாக அனிமேஷன் ചെയ്യുക: ஒவ்வொரு சட்டகத் தளவமைப்பு மற்றும் பெயிண்ட் வேலையைத் தவிர்க்க வடிவியலைப் பாதிக்கும் பண்புகளின் மீது `transform` மற்றும் `opacity` ஆகியவற்றை அனிமேஷன் ചെയ്യാൻ விரும்புகிறேன்.
• சிக்கலான தன்மையைத் தனிமைப்படுத்தவும்: உங்கள் தளவமைப்பின் எந்தப் பகுதிகள் தன்னிறைவானவை என்பது பற்றிய குறிப்புகளை உலாவிக்கு வழங்க CSS `contain` பண்பைப் பயன்படுத்தவும், மேலும் लक्ष്യமிட்ட மேம்பாடுகளுக்கு ಅನುಮತಿಸಿ.
• உங்கள் குறியீட்டை தணிக்கை செய்யுங்கள்: கட்டாய ರೆಫ್ளோஸ், தளவமைப்பு தகராறுகள் மற்றும் தேவையற்ற தளவமைப்பு மாற்றங்களை வேட்டையாட உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்தவும்.

உலாவி அளவு మరియు தளவமைப்பை எவ்வாறு കൈകാര്യം செய்கிறது என்பதைப் பற்றிய மன மாதிரியை உருவாக்குவதன் மூலம், നിങ്ങൾ வெறுமனே வேலை செய்யும் CSS ஐ எழுதுவதிலிருந்து ലോകവ്യാപക പ്രേക്ഷകർക്ക് வேகம், நிலைத்தன்மை மற்றும் സന്തോഷம் നൽകുന്ന വെബ് അനുഭവങ്ങൾക്കായി എഞ്ചിനീയറിംഗിലേക്ക് മാറുക.