உலாவி ரெண்டரிங் பைப்லைனில் தேர்ச்சி பெறுதல்: ஜாவாஸ்கிரிப்ட்டின் செயல்திறன் தாக்கத்தின் மீது ஒரு ஆழமான பார்வை

டிஜிட்டல் உலகில், வேகம் என்பது ஒரு அம்சம் மட்டுமல்ல; அது ஒரு சிறந்த பயனர் அனுபவத்தின் அடித்தளம். ஒரு மெதுவான, பதிலளிக்காத வலைத்தளம் பயனர் விரக்தி, அதிகரித்த பவுன்ஸ் விகிதங்கள், மற்றும் இறுதியில், வணிக இலக்குகளில் எதிர்மறையான தாக்கத்திற்கு வழிவகுக்கும். வலை உருவாக்குநர்களாக, நாம் இந்த அனுபவத்தின் சிற்பிகள், மேலும் நம்முடைய குறியீட்டை ஒரு காட்சி, ஊடாடும் பக்கமாக உலாவி எவ்வாறு மாற்றுகிறது என்பதன் முக்கிய இயக்கவியலைப் புரிந்துகொள்வது மிக முக்கியமானது. இந்த செயல்முறை, பெரும்பாலும் சிக்கலானதாகக் கருதப்படுவது, உலாவி ரெண்டரிங் பைப்லைன் (Browser Rendering Pipeline) என்று அழைக்கப்படுகிறது.

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

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

வலையின் வரைபடம்: உலாவி ரெண்டரிங் பைப்லைனைப் பிரித்தெடுத்தல்

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

உலாவி என்ஜின்களுக்கு இடையில் (Chrome/Edge-க்கு Blink, Firefox-க்கு Gecko, மற்றும் Safari-க்கு WebKit போன்றவை) பிரத்தியேகங்கள் சற்று மாறுபடலாம் என்றாலும், அடிப்படை நிலைகள் கருத்தியல் ரீதியாக ஒரே மாதிரியானவை. இந்த அசெம்பிளி லைன் வழியாக நடப்போம்.

படி 1: பாகுபடுத்துதல் (Parsing) - குறியீட்டிலிருந்து புரிதலுக்கு

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

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

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

படி 2: ரெண்டர் மரம் (Render Tree) - காட்சி வரைபடம்

உலாவி DOM (உள்ளடக்கம்) மற்றும் CSSOM (ஸ்டைல்கள்) இரண்டையும் பெற்றவுடன், அது இரண்டையும் இணைத்து ரெண்டர் மரத்தை (Render Tree) உருவாக்குகிறது. இந்த மரம் பக்கத்தில் உண்மையில் என்ன காட்டப்படும் என்பதன் பிரதிநிதித்துவமாகும்.

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

• <head>, <script>, அல்லது <meta> போன்ற காட்சி வெளியீடு இல்லாத நோட்கள் தவிர்க்கப்படுகின்றன.
• CSS மூலம் வெளிப்படையாக மறைக்கப்பட்ட நோட்கள் (எ.கா., display: none; உடன்) ரெண்டர் மரத்திலிருந்து வெளியேற்றப்படுகின்றன. (குறிப்பு: visibility: hidden; கொண்ட உறுப்புகள் சேர்க்கப்பட்டுள்ளன, ஏனெனில் அவை இன்னும் லேஅவுட்டில் இடத்தை ஆக்கிரமிக்கின்றன).

ரெண்டர் மரத்தில் உள்ள ஒவ்வொரு நோடும் DOM-இலிருந்து அதன் உள்ளடக்கத்தையும் CSSOM-இலிருந்து கணக்கிடப்பட்ட ஸ்டைல்களையும் கொண்டுள்ளது.

படி 3: லேஅவுட் (அல்லது ரிஃப்ளோ) - வடிவவியலைக் கணக்கிடுதல்

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

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

படி 4: பெயின்ட் (Paint) - பிக்சல்களை நிரப்புதல்

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

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

படி 5: கம்போசிட்டிங் (Compositing) - இறுதிப் படத்தை ஒன்றிணைத்தல்

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

தனது சொந்த லேயரில் உள்ள ஒரு உறுப்பை நீங்கள் அனிமேட் செய்தால் (உதாரணமாக, transform: translateX(10px); ஐப் பயன்படுத்தி), உலாவி முழுப் பக்கத்திற்கும் லேஅவுட் அல்லது பெயின்ட் நிலைகளை மீண்டும் இயக்கத் தேவையில்லை. அது ஏற்கனவே பெயின்ட் செய்யப்பட்ட லேயரை நகர்த்த முடியும். இந்த வேலை பெரும்பாலும் கிராபிக்ஸ் செயலாக்க அலகுக்கு (GPU) மாற்றப்படுகிறது, இது நம்பமுடியாத அளவிற்கு வேகமாகவும் திறமையாகவும் செய்கிறது. இது மென்மையான, வினாடிக்கு 60 பிரேம்கள் (fps) அனிமேஷன்களுக்குப் பின்னால் உள்ள ரகசியம்.

ஜாவாஸ்கிரிப்ட்டின் பிரமாண்ட நுழைவு: ஊடாடலின் இயந்திரம்

அப்படியானால், இந்த நேர்த்தியாக வரிசைப்படுத்தப்பட்ட பைப்லைனில் ஜாவாஸ்கிரிப்ட் எங்கே பொருந்துகிறது? எல்லா இடங்களிலும். ஜாவாஸ்கிரிப்ட் என்பது DOM மற்றும் CSSOM-ஐ அவை உருவாக்கப்பட்ட பிறகு எந்த நேரத்திலும் மாற்றக்கூடிய ஒரு டைனமிக் சக்தியாகும். இது அதன் முதன்மை செயல்பாடு மற்றும் அதன் மிகப்பெரிய செயல்திறன் அபாயம்.

இயல்பாக, ஜாவாஸ்கிரிப்ட் பாகுபடுத்தலை-தடுப்பது (parser-blocking) ஆகும். HTML பாகுபடுத்தி ஒரு <script> குறிச்சொல்லை (async அல்லது defer உடன் குறிக்கப்படாதது) சந்திக்கும்போது, அது DOM-ஐ உருவாக்கும் செயல்முறையை இடைநிறுத்த வேண்டும். பின்னர் அது ஸ்கிரிப்டை (அது வெளிப்புறமாக இருந்தால்) பெற்று, அதை இயக்கி, அதன் பின்னரே HTML-ஐ பாகுபடுத்துவதை மீண்டும் தொடங்கும். இந்த ஸ்கிரிப்ட் உங்கள் ஆவணத்தின் <head>-இல் அமைந்திருந்தால், அது உங்கள் பக்கத்தின் ஆரம்ப ரெண்டரை கணிசமாக தாமதப்படுத்தலாம், ஏனெனில் DOM கட்டுமானம் நிறுத்தப்படுகிறது.

தடுப்பதா வேண்டாமா: `async` மற்றும் `defer`

இந்த தடுப்பு நடத்தையைத் தணிக்க, <script> குறிச்சொல்லுக்கு இரண்டு சக்திவாய்ந்த பண்புக்கூறுகள் உள்ளன:

• defer: இந்த பண்புக்கூறு HTML பாகுபடுத்துதல் தொடரும்போது பின்னணியில் ஸ்கிரிப்டை பதிவிறக்கம் செய்ய உலாவிக்குச் சொல்கிறது. பின்னர் ஸ்கிரிப்ட் HTML பாகுபடுத்தல் முடிந்த பிறகு, ஆனால் DOMContentLoaded நிகழ்வு தூண்டப்படுவதற்கு முன்பு இயக்கப்படும் என்று உத்தரவாதம் அளிக்கப்படுகிறது. உங்களிடம் பல defer செய்யப்பட்ட ஸ்கிரிப்டுகள் இருந்தால், அவை ஆவணத்தில் தோன்றும் வரிசையில் இயக்கப்படும். இது முழு DOM-ம் கிடைக்க வேண்டிய மற்றும் இயக்கும் வரிசை முக்கியத்துவம் வாய்ந்த ஸ்கிரிப்டுகளுக்கு ஒரு சிறந்த தேர்வாகும்.
• async: இந்த பண்புக்கூறும் HTML பாகுபடுத்தலைத் தடுக்காமல் பின்னணியில் ஸ்கிரிப்டை பதிவிறக்கம் செய்ய உலாவிக்குச் சொல்கிறது. இருப்பினும், ஸ்கிரிப்ட் பதிவிறக்கம் செய்யப்பட்டவுடன், HTML பாகுபடுத்தல் இடைநிறுத்தப்பட்டு, ஸ்கிரிப்ட் இயக்கப்படும். Async ஸ்கிரிப்டுகளுக்கு உத்தரவாதமான இயக்க வரிசை இல்லை. இது அனலிட்டிக்ஸ் அல்லது விளம்பரங்கள் போன்ற சுயாதீனமான, மூன்றாம் தரப்பு ஸ்கிரிப்டுகளுக்கு ஏற்றது, அங்கு இயக்க வரிசை முக்கியமில்லை மற்றும் அவை விரைவில் இயங்க வேண்டும் என்று நீங்கள் விரும்புகிறீர்கள்.

எல்லாவற்றையும் மாற்றும் சக்தி: DOM மற்றும் CSSOM-ஐ கையாளுதல்

இயக்கப்பட்டவுடன், ஜாவாஸ்கிரிப்ட் DOM மற்றும் CSSOM இரண்டிற்கும் முழு API அணுகலைக் கொண்டுள்ளது. இது உறுப்புகளைச் சேர்க்கலாம், அவற்றை அகற்றலாம், அவற்றின் உள்ளடக்கத்தை மாற்றலாம் மற்றும் அவற்றின் ஸ்டைல்களை மாற்றலாம். உதாரணமாக: document.getElementById('welcome-banner').style.display = 'none'; இந்த ஒற்றை வரி ஜாவாஸ்கிரிப்ட் 'welcome-banner' உறுப்புக்கான CSSOM-ஐ மாற்றுகிறது. இந்த மாற்றம் ஏற்கனவே உள்ள ரெண்டர் மரத்தை செல்லாததாக்கி, திரையில் புதுப்பிப்பைப் பிரதிபலிக்க ரெண்டரிங் பைப்லைனின் பகுதிகளை மீண்டும் இயக்க உலாவியைக் கட்டாயப்படுத்தும்.

செயல்திறன் குற்றவாளிகள்: ஜாவாஸ்கிரிப்ட் பைப்லைனை எவ்வாறு தடுக்கிறது

ஒவ்வொரு முறையும் ஜாவாஸ்கிரிப்ட் DOM அல்லது CSSOM-ஐ மாற்றும்போது, அது ஒரு ரிஃப்ளோ மற்றும் ரிபெயின்ட்டைத் தூண்டும் அபாயத்தை ஏற்படுத்துகிறது. ஒரு டைனமிக் வலைக்கு இது அவசியமானாலும், இந்த செயல்பாடுகளை திறமையற்ற முறையில் செய்வது உங்கள் பயன்பாட்டை ஒரு முடங்கிய நிலைக்கு கொண்டு வரலாம். மிகவும் பொதுவான செயல்திறன் பொறிகளை ஆராய்வோம்.

நச்சுச் சுழற்சி: ஒத்திசைவான லேஅவுட்களை (Synchronous Layouts) கட்டாயப்படுத்துதல் மற்றும் லேஅவுட் த்ராஷிங் (Layout Thrashing)

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

இருப்பினும், நீங்கள் இந்த மேம்படுத்தலை உடைக்கலாம். உங்கள் ஜாவாஸ்கிரிப்ட் ஒரு ஸ்டைலை மாற்றி, பின்னர் உடனடியாக ஒரு வடிவியல் மதிப்பைக் கேட்டால் (ஒரு உறுப்பின் offsetHeight, offsetWidth, அல்லது getBoundingClientRect() போன்றவை), நீங்கள் உலாவியை லேஅவுட் படியை ஒத்திசைவாக (synchronously) செய்யும்படி கட்டாயப்படுத்துகிறீர்கள். உலாவி நிறுத்தப்பட வேண்டும், நிலுவையில் உள்ள அனைத்து ஸ்டைல் மாற்றங்களையும் பயன்படுத்த வேண்டும், முழு லேஅவுட் கணக்கீட்டையும் இயக்க வேண்டும், பின்னர் கோரப்பட்ட மதிப்பை உங்கள் ஸ்கிரிப்டுக்குத் திருப்பித் தர வேண்டும். இது ஒரு கட்டாய ஒத்திசைவான லேஅவுட் (Forced Synchronous Layout) என்று அழைக்கப்படுகிறது.

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

லேஅவுட் த்ராஷிங்கின் உதாரணம் (செய்யக்கூடாதது):

            
function resizeAllParagraphs() {
  const paragraphs = document.querySelectorAll('p');
  for (let i = 0; i < paragraphs.length; i++) {
    // READ: gets the width of the container (forces layout)
    const containerWidth = document.body.offsetWidth;
    
    // WRITE: sets the paragraph's width (invalidates layout)
    paragraphs[i].style.width = (containerWidth / 2) + 'px';
  }
}

            

              
                Copy
              
            
          

இந்தக் குறியீட்டில், லூப்பின் ஒவ்வொரு சுழற்சியிலும், நாம் offsetWidth-ஐ (லேஅவுட்டை-தூண்டும் ஒரு வாசிப்பு) படிக்கிறோம், பின்னர் உடனடியாக style.width-இல் (லேஅவுட்டை-செல்லாததாக்கும் ஒரு எழுத்து) எழுதுகிறோம். இது ஒவ்வொரு பத்தியிலும் ஒரு ரிஃப்ளோவை கட்டாயப்படுத்துகிறது.

மேம்படுத்தப்பட்ட பதிப்பு (படித்தல் மற்றும் எழுதுதலை தொகுப்பாக்குதல்):

            
function resizeAllParagraphsOptimized() {
  const paragraphs = document.querySelectorAll('p');
  
  // First, READ all the values you need
  const containerWidth = document.body.offsetWidth;
  
  // Then, WRITE all the changes
  for (let i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.width = (containerWidth / 2) + 'px';
  }
}

            

              
                Copy
              
            
          

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

முக்கிய த்ரெட் முற்றுகை: நீண்ட நேரம் இயங்கும் ஜாவாஸ்கிரிப்ட் பணிகள்

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

50ms-க்கு மேல் எடுக்கும் எந்தப் பணியும் ஒரு 'நீண்ட பணி' (Long Task) ஆகக் கருதப்படுகிறது மற்றும் பயனர் அனுபவத்தை, குறிப்பாக Interaction to Next Paint (INP) Core Web Vital-ஐ எதிர்மறையாக பாதிக்கலாம். பொதுவான குற்றவாளிகளில் சிக்கலான தரவு செயலாக்கம், பெரிய API மறுமொழி கையாளுதல் அல்லது தீவிரமான கணக்கீடுகள் ஆகியவை அடங்கும்.

தீர்வு என்னவென்றால், நீண்ட பணிகளை சிறிய துண்டுகளாக உடைத்து, இடையில் முக்கிய த்ரெட்டிற்கு 'வழிவிடுவது'. இது உலாவிக்கு மற்ற நிலுவையில் உள்ள வேலைகளைக் கையாள ஒரு வாய்ப்பை வழங்குகிறது. இதைச் செய்வதற்கான ஒரு எளிய வழி setTimeout(callback, 0) ஆகும், இது உலாவிக்கு சுவாசிக்க ஒரு வாய்ப்பு கிடைத்த பிறகு, எதிர்காலப் பணியில் கால்பேக்கை இயக்க திட்டமிடுகிறது.

ஆயிரம் வெட்டுகளால் மரணம்: அதிகப்படியான DOM கையாளுதல்கள்

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

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

DocumentFragment-ஐப் பயன்படுத்துவதற்கான உதாரணம்:

            
const list = document.getElementById('my-list');
const data = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];

// Create a DocumentFragment
const fragment = document.createDocumentFragment();

data.forEach(itemText => {
  const li = document.createElement('li');
  li.textContent = itemText;
  // Append to the fragment, not the live DOM
  fragment.appendChild(li);
});

// Append the entire fragment in one operation
list.appendChild(fragment);

            

              
                Copy
              
            
          

தடுமாறும் அசைவுகள்: திறனற்ற ஜாவாஸ்கிரிப்ட் அனிமேஷன்கள்

ஜாவாஸ்கிரிப்ட் மூலம் அனிமேஷன்களை உருவாக்குவது பொதுவானது, ஆனால் அதை திறமையற்ற முறையில் செய்வது தடுமாற்றம் மற்றும் 'ஜாங்க்'-க்கு வழிவகுக்கிறது. ஒரு பொதுவான எதிர்-முறை ஒரு லூப்பில் உறுப்பு ஸ்டைல்களைப் புதுப்பிக்க setTimeout அல்லது setInterval-ஐப் பயன்படுத்துவதாகும்.

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

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

மேலும், நீங்கள் எதை அனிமேட் செய்கிறீர்கள் என்பது எப்படி அனிமேட் செய்கிறீர்கள் என்பதைப் போலவே முக்கியமானது. width, height, top, அல்லது left போன்ற பண்புகளை மாற்றுவது லேஅவுட் நிலையைத் தூண்டும், இது மெதுவானது. மென்மையான அனிமேஷன்களுக்கு, நீங்கள் கம்போசிட்டரால் மட்டுமே கையாளக்கூடிய பண்புகளில் ஒட்டிக்கொள்ள வேண்டும், இது பொதுவாக GPU-இல் இயங்கும். இவை முதன்மையாக:

• transform (நகர்த்துதல், அளவிடுதல், சுழற்றுதல்)
• opacity (மங்குதல்/தெளிவாக்குதல்)

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

கோட்பாட்டிலிருந்து நடைமுறைக்கு: செயல்திறன் மேம்படுத்தலுக்கான ஒரு கருவித்தொகுப்பு

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

ஸ்கிரிப்டுகளை புத்திசாலித்தனமாக ஏற்றுதல்

உங்கள் ஜாவாஸ்கிரிப்டை நீங்கள் எவ்வாறு ஏற்றுகிறீர்கள் என்பது முதல் தற்காப்புக் கோடு. ஒரு ஸ்கிரிப்ட் ஆரம்ப ரெண்டருக்கு உண்மையிலேயே முக்கியமானதா என்று எப்போதும் கேளுங்கள். இல்லையென்றால், DOM தேவைப்படும் ஸ்கிரிப்டுகளுக்கு defer-ஐப் பயன்படுத்தவும் அல்லது சுயாதீனமானவற்றுக்கு async-ஐப் பயன்படுத்தவும். நவீன பயன்பாடுகளுக்கு, டைனமிக் import()-ஐப் பயன்படுத்தி கோட்-ஸ்பிளிட்டிங் (code-splitting) போன்ற நுட்பங்களைப் பயன்படுத்துங்கள், இது தற்போதைய பார்வை அல்லது பயனர் தொடர்புக்குத் தேவையான ஜாவாஸ்கிரிப்டை மட்டுமே ஏற்றும். Webpack அல்லது Rollup போன்ற கருவிகள் உங்கள் இறுதி பண்டல்களில் இருந்து பயன்படுத்தப்படாத குறியீட்டை அகற்ற ட்ரீ-ஷேக்கிங் (tree-shaking)-ஐ வழங்குகின்றன, இது கோப்பு அளவைக் குறைக்கிறது.

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

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

• த்ராட்லிங் (Throttling): உங்கள் செயல்பாடு ஒரு குறிப்பிட்ட காலத்திற்கு ஒரு முறைக்கு மேல் இயக்கப்படாது என்பதை உறுதி செய்கிறது. உதாரணமாக, 'இந்தச் செயல்பாட்டை ஒவ்வொரு 200ms-க்கும் ஒரு முறைக்கு மேல் இயக்க வேண்டாம்'. இது எல்லையற்ற ஸ்க்ரோல் கையாளுபவர்கள் போன்றவற்றுக்கு பயனுள்ளதாக இருக்கும்.
• டிபவுன்சிங் (Debouncing): உங்கள் செயல்பாடு ஒரு செயலற்ற காலத்திற்குப் பிறகு மட்டுமே இயக்கப்படுவதை உறுதி செய்கிறது. உதாரணமாக, 'பயனர் 300ms-க்கு தட்டச்சு செய்வதை நிறுத்திய பிறகு மட்டுமே இந்தத் தேடல் செயல்பாட்டை இயக்கவும்'. இது தன்னிரப்பு தேடல் பட்டிகளுக்குச் சரியானது.

சுமையை மாற்றுதல்: வெப் வொர்க்கர்களுக்கான ஒரு அறிமுகம்

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

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

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

1. DevTools-ஐத் திறந்து 'Performance' தாவலுக்குச் செல்லவும்.
2. ரெக்கார்டு பொத்தானைக் கிளிக் செய்து, உங்கள் தளத்தில் மெதுவாக இருப்பதாக நீங்கள் சந்தேகிக்கும் செயலைச் செய்யவும் (எ.கா., ஸ்க்ரோலிங், ஒரு பொத்தானைக் கிளிக் செய்தல்).
3. பதிவை நிறுத்தவும்.

உங்களுக்கு ஒரு விரிவான ஃபிளேம் சார்ட் வழங்கப்படும். இதைக் கவனிக்கவும்:

• நீண்ட பணிகள் (Long Tasks): இவை ஒரு சிவப்பு முக்கோணத்துடன் குறிக்கப்பட்டுள்ளன. இவை உங்கள் முக்கிய த்ரெட் தடுப்பிகள். தாமதத்தை ஏற்படுத்திய செயல்பாடு எது என்பதைக் காண அவற்றைக் கிளிக் செய்யவும்.
• ஊதா நிற 'Layout' கட்டங்கள்: ஒரு பெரிய ஊதா நிறக் கட்டம் லேஅவுட் நிலையில் கணிசமான அளவு நேரம் செலவிடப்பட்டதைக் குறிக்கிறது.
• கட்டாய ஒத்திசைவான லேஅவுட் எச்சரிக்கைகள்: கருவி பெரும்பாலும் கட்டாய ரிஃப்ளோக்கள் பற்றி வெளிப்படையாக உங்களை எச்சரிக்கும், பொறுப்பான குறியீட்டின் சரியான வரிகளைக் காட்டும்.
• பெரிய பச்சை 'Paint' கட்டங்கள்: இவை மேம்படுத்தப்படக்கூடிய சிக்கலான பெயின்ட் செயல்பாடுகளைக் குறிக்கலாம்.

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

முடிவுரை: ஒரு நேரத்தில் ஒரு ஃபிரேம், வேகமான வலையை உருவாக்குதல்

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

முக்கியமான பாடங்கள் விழிப்புணர்வு மற்றும் செயலின் கலவையாகும்:

• முக்கிய த்ரெட்டை மதிக்கவும்: முக்கியமானதல்லாத ஸ்கிரிப்டுகளை தாமதப்படுத்துதல், நீண்ட பணிகளை உடைத்தல் மற்றும் கனமான வேலைகளை வெப் வொர்க்கர்களுக்கு மாற்றுவதன் மூலம் அதை சுதந்திரமாக வைத்திருங்கள்.
• லேஅவுட் த்ராஷிங்கைத் தவிர்க்கவும்: DOM படித்தல் மற்றும் எழுதுதலை தொகுக்க உங்கள் குறியீட்டை கட்டமைக்கவும். இந்த எளிய மாற்றம் மிகப்பெரிய செயல்திறன் ஆதாயங்களை அளிக்க முடியும்.
• DOM உடன் புத்திசாலித்தனமாக இருங்கள்: நீங்கள் நேரடி DOM-ஐத் தொடும் எண்ணிக்கையைக் குறைக்க DocumentFragments போன்ற நுட்பங்களைப் பயன்படுத்தவும்.
• திறமையாக அனிமேட் செய்யவும்: பழைய டைமர் முறைகளை விட requestAnimationFrame-ஐ விரும்பவும் மற்றும் transform மற்றும் opacity போன்ற கம்போசிட்டர்-நட்பு பண்புகளில் ஒட்டிக்கொள்ளவும்.
• எப்போதும் அளவிடவும்: உங்கள் பயன்பாட்டை சுயவிவரப்படுத்த, நிஜ-உலக தடைகளைக் கண்டறிய மற்றும் உங்கள் மேம்படுத்தல்களைச் சரிபார்க்க உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்தவும்.

உயர் செயல்திறன் கொண்ட வலைப் பயன்பாடுகளை உருவாக்குவது என்பது முன்கூட்டிய மேம்படுத்தல் அல்லது தெளிவற்ற தந்திரங்களை மனப்பாடம் செய்வது பற்றியது அல்ல. இது நீங்கள் உருவாக்கும் தளத்தை അടിസ്ഥാനപരமாகப் புரிந்துகொள்வது பற்றியது. ஜாவாஸ்கிரிப்ட்டிற்கும் ரெண்டரிங் பைப்லைனுக்கும் இடையிலான தொடர்பில் தேர்ச்சி பெறுவதன் மூலம், நீங்கள் வேகமான, அதிக மீள்தன்மை கொண்ட, மற்றும் இறுதியில் அனைவருக்கும், எல்லா இடங்களிலும் மிகவும் மகிழ்ச்சியான வலை அனுபவங்களை உருவாக்க உங்களை सशक्तப்படுத்துகிறீர்கள்.