ஜாவாஸ்கிரிப்டில் அல்காரிதம் செயல்திறனைப் புரிந்துகொள்வது மற்றும் மேம்படுத்துவது எப்படி

ஜாவாஸ்கிரிப்டில் அல்காரிதம் செயல்திறனைப் புரிந்துகொள்வது மற்றும் மேம்படுத்துவது எப்படி

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

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

முதல் யூகம் நெட்வொர்க் தான். அது எப்போதுமே அப்படித்தான். ஏபிஐ மெதுவாகத்தான் இருக்கும், இல்லையா? ஆனால் ஏபிஐ பதில் சுமார் 280 மில்லி விநாடிகளில் வந்தது. பிரமாதமும் இல்லை, மோசமும் இல்லை. தரவு வந்த பிறகும், பக்கம் நான்கு அல்லது ஐந்து விநாடிகளுக்கு உறைந்து போனது. அந்த இடைவெளிதான், அதாவது பிரவுசர் எந்த வேலையும் செய்யாமல் அமைதியாக இருந்த அந்தத் தருணம்தான், உண்மையான துப்பு.

எல்லோரும் குறை சொன்னது அந்த மெதுவான பகுதி அல்ல.

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

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

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

உண்மையான பயனர்கள் உண்மையான தரவைக் கொண்டு வருகிறார்கள், உண்மையான தரவு முரட்டுத்தனமானது.

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

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

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

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

கட்டமைப்பைக் குறை கூறுவதற்கு முன் என்ன சரிபார்க்க வேண்டும்

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

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

ஜாவாஸ்கிரிப்ட்டை அதன் உண்மையான எடையை விடச் சிக்கலானதாக உணரவைக்கும் பொதுவான தவறுகள்.

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

மற்றொரு தந்திரமான விஷயம்: சிக்கலின் வடிவத்தைப் பற்றி சிந்திக்காமல் அணி முறைகளைப் பயன்படுத்துவது. map , filter , reduce , மற்றும் find போன்ற முறைகள் படிக்கக்கூடியவை, மேலும் படிக்கக்கூடியதாக இருப்பது நல்லது. ஆனால், பெரிய அணிகளில் அவற்றைச் சங்கிலித் தொடராகப் பயன்படுத்துவது, தரவின் வழியாகப் பல முழுமையான சுற்றுகளைக் கடக்க வேண்டியிருக்கும். சில நேரங்களில் அது பரவாயில்லை. சில நேரங்களில், அது ஒரே அறைக்குள் மீண்டும் மீண்டும் நடமாடுவது போன்ற ஒரு தேவையற்ற வேலையாக இருக்கும்.

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

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

பிற்காலத்தில் வலியைத் தவிர்க்க உதவும் நடைமுறைப் பழக்கங்கள்

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

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

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

சலிப்பூட்டும் முடிவுதான் பயனுள்ள பகுதி.

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

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