கரோசல் ஏற்றுவதில் முன்முனை நினைவகப் பயன்பாட்டை 30 மடங்கு மேம்படுத்துதல்

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

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

நினைவகம் சுயவிவரம்

இந்தச் சிக்கலைப் பகுப்பாய்வு செய்ய நாம் குரோம் டெவலப்பர் டூல்ஸைப் பயன்படுத்தலாம். பக்கம் முதலில் ஏற்றப்படும்போது முதல் ஸ்னாப்ஷாட் எடுக்கப்படுகிறது, மேலும் ஒரு கரோசலில் பயனர் அடுத்த ஸ்க்ரோலை 12 முறை கிளிக் செய்த பிறகு இரண்டாவது ஸ்னாப்ஷாட் எடுக்கப்படுகிறது. 100-க்கும் மேற்பட்ட ஸ்டிரிங் நோடுகள் மற்றும் அதிகரித்த தம்ப்நெயில் ரெண்டரிங் ஆகியவற்றால் நினைவகப் பயன்பாட்டில் கிட்டத்தட்ட 9.7MB அதிகரிப்பைக் காண்கிறோம்.

தீர்வு

கரோசல் ஸ்க்ரோல் செய்யும்போது, பயனர்கள் கரோசல் ஜன்னலில் உள்ள உருப்படிகளை மட்டுமே பார்க்கிறார்கள். உதாரணமாக, 1920×1080 ரெசல்யூஷன் கொண்ட மடிக்கணினியில், முழுத்திரை உலாவியில், ஒவ்வொரு முறையும் சுமார் 9 உருப்படிகள் மட்டுமே தெரியும். எனவே, தெரியாத அனைத்து நோடுகள் மற்றும் சிறுபடங்களையும் ஒன்றாக ரெண்டர் செய்வதும் அல்லது கோரிக்கையிலிருந்து திரும்பிய அதிகப்படியான தரவை DOM-க்குள் எடுத்துச் செல்வதும் தேவையற்றது.

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

மெமரி சுயவிவரம்

நாம் மீண்டும் குரோம் டெவலப்பர் டூல்ஸைப் பார்ப்போம். முன்பைப் போலவே, முதல் ஸ்னாப்ஷாட், துவக்கப்பட்ட நேரத்தில் எடுக்கப்படுகிறது, இரண்டாவது, 12 முறை வலதுபுறம் ஸ்க்ரோல் செய்த பிறகு எடுக்கப்படுகிறது. இப்போது, 100+ உருப்படிகளை ஏற்றுவது, முன்பு இருந்த 9.7MB-க்கு மாறாக, கூடுதலாக 0.3MB நினைவகத்தை மட்டுமே எடுத்துக்கொள்கிறது.

அடுத்து என்ன?

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

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