JavaScript கட்டமைப்புகளின் விலை

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

• பிணையத்தில் கோப்பைப் பதிவிறக்குகிறது.
• பதிவிறக்கிய பிறகு தொகுக்கப்படாத மூலக் குறியீட்டைப் பாகுபடுத்துதல் மற்றும் தொகுத்தல்.
• ஜாவாஸ்கிரிப்ட் குறியீட்டை செயல்படுத்துதல்.
• நினைவக நுகர்வு.

இந்த கலவை மாறிவிடும் மிகவும் விலையுயர்ந்த.

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

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

இதை கண்டுபிடிக்க திட்டம் எனக்கு உதவியது. HTTP காப்பகம்.

தரவு

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

நான் மார்ச் 2020 தரவைச் சேகரித்தேன், இது எனக்கு அணுகப்பட்ட மிகச் சமீபத்திய தரவு.

மற்ற மூலப் பொருட்களையும் பயன்படுத்த நினைத்தாலும், அனைத்து தளங்களிலும் உள்ள ஒருங்கிணைந்த HTTP காப்பகத் தரவை, React, Vue மற்றும் Angular ஆகியவற்றைப் பயன்படுத்தும் தளங்களின் தரவுகளுடன் ஒப்பிட முடிவு செய்தேன்.

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

HTTP காப்பகத்தில் உள்ள இணைப்புகள் ஆர்வமுள்ள தொழில்நுட்பங்களைப் பயன்படுத்துவதாகக் கண்டறியப்பட்ட தளங்களைக் குறிக்கும்

கட்டமைப்பு அல்லது நூலகம்
மொபைல் தளங்களுக்கான இணைப்புகள்
வழக்கமான தளங்களுக்கான இணைப்புகள்

jQuery,
4615474
3714643

வினை
489827
241023

வியு
85649
43691

கோண
19423
18088

நம்பிக்கைகளும் கனவுகளும்

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

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

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

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

தரவுகளின் சராசரி மதிப்புகளை பகுப்பாய்வு செய்வது நமக்குத் தேவையான தகவலை வழங்காது. மேலும், உண்மையில், இந்த அணுகுமுறை நம் கவனத்தை விட்டு வெளியேறுகிறது முக்கியமான நிறைய. அதற்குப் பதிலாக, என்னிடம் இருந்த தரவுகளிலிருந்து சதவீதங்களைப் பெற்றேன். இவை 10, 25, 50 (சராசரி), 75, 90 சதவீதங்கள்.

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

ஜாவாஸ்கிரிப்ட் குறியீட்டின் தொகுதிகள்

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

மொபைல் சாதனங்களுக்கு மாற்றப்பட்ட JavaScript குறியீட்டின் (Kb) அளவு

சதங்கள்
10
25
50
75
90

அனைத்து தளங்களும்
93.4 
196.6 
413.5 
746.8 
1201.6 

jQuery தளங்கள்
110.3 
219.8 
430.4 
748.6 
1162.3 

வியூ தளங்கள்
244.7 
409.3 
692.1 
1065.5 
1570.7 

கோண தளங்கள்
445.1 
675.6 
1066.4 
1761.5 
2893.2 

எதிர்வினை தளங்கள்
345.8 
441.6 
690.3 
1238.5 
1893.6 

மொபைல் சாதனங்களுக்கு அனுப்பப்பட்ட JavaScript குறியீட்டின் அளவு

டெஸ்க்டாப் சாதனங்களுக்கு மாற்றப்பட்ட JavaScript குறியீட்டின் (Kb) அளவு

சதங்கள்
10
25
50
75
90

அனைத்து தளங்களும்
105.5 
226.6 
450.4 
808.8 
1267.3 

jQuery தளங்கள்
121.7 
242.2 
458.3 
803.4 
1235.3 

வியூ தளங்கள்
248.0 
420.1 
718.0 
1122.5 
1643.1 

கோண தளங்கள்
468.8 
716.9 
1144.2 
1930.0 
3283.1 

எதிர்வினை தளங்கள்
308.6 
469.0 
841.9 
1472.2 
2197.8 

டெஸ்க்டாப் சாதனங்களுக்கு அனுப்பப்பட்ட JavaScript குறியீட்டின் அளவு

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

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

குறியீட்டு அளவின் 15-18% அதிகரிப்பு குறிப்பிடத்தக்க எண்ணிக்கையாக இருந்தாலும், இதை மற்ற கட்டமைப்புகள் மற்றும் நூலகங்களுடன் ஒப்பிடுகையில், jQuery ஆல் விதிக்கப்படும் "வரி" மிகவும் குறைவு என்று ஒருவர் முடிவு செய்யலாம். 10வது சதவீதத்தில் உள்ள கோண தளங்கள் எல்லா தளங்களையும் விட டெஸ்க்டாப்பிற்கு 344% கூடுதல் தரவையும் மொபைலுக்கு 377% அதிகமாகவும் அனுப்புகின்றன. அனைத்து தளங்களையும் விட டெஸ்க்டாப்பிற்கு 193% கூடுதல் குறியீட்டையும் மொபைலுக்கு 270% கூடுதல் குறியீட்டையும் அனுப்பும் ரியாக்ட் தளங்கள் அடுத்த அதிக எடை கொண்டவை.

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

சுவாரஸ்யமாக, jQuery தளங்கள் இந்த யோசனையைப் பின்பற்றுகின்றன. அவை 10வது சதவிகிதத்தில் (15-18%) எல்லா தளங்களையும் விட சற்று கனமாக இருந்தாலும், டெஸ்க்டாப் மற்றும் மொபைல் இரண்டிலும் 90வது சதவிகிதத்தில் 3% சற்று இலகுவாக இருக்கும். இது மிகவும் குறிப்பிடத்தக்க நன்மை என்று சொல்ல முடியாது, ஆனால் jQuery தளங்கள், குறைந்தபட்சம், பெரிய ஜாவாஸ்கிரிப்ட் குறியீடு அளவுகளைக் கொண்டிருக்கவில்லை, அவற்றின் மிகப்பெரிய பதிப்புகளில் கூட.

ஆனால் மற்ற கட்டமைப்புகளைப் பற்றி இதைச் சொல்ல முடியாது.

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

90வது சதவீதத்தில், கோண தளங்கள் எல்லா தளங்களையும் விட மொபைலுக்கு 141% கூடுதல் தரவையும் டெஸ்க்டாப்பிற்கு 159% அதிகமாகவும் அனுப்புகின்றன. எதிர்வினை தளங்கள் எல்லா தளங்களையும் விட டெஸ்க்டாப்பிற்கு 73% அதிகமாகவும், மொபைலுக்கு 58% அதிகமாகவும் அனுப்புகின்றன. 90வது சதவிகிதத்தில் ரியாக்ட் தளங்களின் குறியீடு அளவு 2197.8 KB ஆகும். Vue அடிப்படையிலான தங்களின் நெருங்கிய போட்டியாளர்களை விட, அத்தகைய தளங்கள் மொபைல் சாதனங்களுக்கு 322.9 KB கூடுதல் தரவை அனுப்புகின்றன. கோண மற்றும் எதிர்வினை மற்றும் பிற தளங்களின் அடிப்படையிலான டெஸ்க்டாப் தளங்களுக்கு இடையே உள்ள இடைவெளி இன்னும் பெரியது. எடுத்துக்காட்டாக, டெஸ்க்டாப் ரியாக்ட் தளங்கள் சமமான Vue தளங்களை விட 554.7 KB கூடுதல் JS குறியீட்டை சாதனங்களுக்கு அனுப்புகின்றன.

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

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

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

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

மொபைல் சாதனங்களில் ஸ்கிரிப்ட் செயலாக்கத்துடன் தொடர்புடைய செயலி நேரம் (மில்லி விநாடிகளில்).

சதங்கள்
10
25
50
75
90

அனைத்து தளங்களும்
356.4
959.7
2372.1
5367.3
10485.8

jQuery தளங்கள்
575.3
1147.4
2555.9
5511.0
10349.4

வியூ தளங்கள்
1130.0
2087.9
4100.4
7676.1
12849.4

கோண தளங்கள்
1471.3
2380.1
4118.6
7450.8
13296.4

எதிர்வினை தளங்கள்
2700.1
5090.3
9287.6
14509.6
20813.3

மொபைல் சாதனங்களில் ஸ்கிரிப்ட் செயலாக்கம் தொடர்பான செயலி நேரம்

டெஸ்க்டாப் சாதனங்களில் ஸ்கிரிப்ட் செயலாக்கம் தொடர்பான செயலி நேரம் (மில்லி விநாடிகளில்).

சதங்கள்
10
25
50
75
90

அனைத்து தளங்களும்
146.0
351.8
831.0
1739.8
3236.8

jQuery தளங்கள்
199.6
399.2
877.5
1779.9
3215.5

வியூ தளங்கள்
350.4
650.8
1280.7
2388.5
4010.8

கோண தளங்கள்
482.2
777.9
1365.5
2400.6
4171.8

எதிர்வினை தளங்கள்
508.0
1045.6
2121.1
4235.1
7444.3

டெஸ்க்டாப் சாதனங்களில் ஸ்கிரிப்ட் செயலாக்கம் தொடர்பான செயலி நேரம்

இங்கே நீங்கள் மிகவும் பழக்கமான ஒன்றைக் காணலாம்.

தொடக்கத்தில், jQuery கொண்ட தளங்கள் மற்ற தளங்களைக் காட்டிலும் பிரதான நூலில் ஜாவாஸ்கிரிப்ட் செயலாக்கத்தில் கணிசமாகக் குறைவாகவே செலவிடுகின்றன. 10வது சதவீதத்தில், எல்லா தளங்களுடனும் ஒப்பிடும்போது, ​​மொபைலில் உள்ள jQuery தளங்கள், பிரதான தொடரிழையில் JS குறியீட்டைச் செயலாக்குவதற்கு 61% அதிக நேரம் செலவிடுகின்றன. டெஸ்க்டாப் jQuery தளங்களில், செயலாக்க நேரம் 37% அதிகரிக்கிறது. 90வது சதவீதத்தில், jQuery தளங்கள் மொத்த மதிப்பெண்களுக்கு மிக அருகில் மதிப்பெண் பெறுகின்றன. குறிப்பாக, மொபைல் சாதனங்களில் உள்ள jQuery தளங்கள் எல்லா தளங்களையும் விட 1.3% குறைவான நேரத்தை முக்கிய தொடரில் செலவிடுகின்றன, மேலும் டெஸ்க்டாப் சாதனங்களில் 0.7% குறைவான நேரத்தை செலவிடுகின்றன.

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

10வது சதவீதத்தில், டெஸ்க்டாப் கோண தளங்கள் அனைத்து தளங்களையும் விட 230% கூடுதல் நேரத்தை முக்கிய நூல் செயலாக்க JS குறியீட்டில் செலவிடுகின்றன. மொபைல் தளங்களைப் பொறுத்தவரை, இந்த எண்ணிக்கை 313% ஆகும். எதிர்வினை தளங்கள் மோசமான செயல்திறன் கொண்டவை. டெஸ்க்டாப்பில், எல்லா தளங்களையும் விட 248% கூடுதல் நேரத்தைச் செயலாக்கக் குறியீட்டையும் மொபைலில் 658% அதிகமாகவும் செலவிடுகிறார்கள். 658% எழுத்துப் பிழை அல்ல. 10வது சதவிகிதத்தில், ரியாக்ட் தளங்கள் தங்கள் குறியீட்டைச் செயலாக்க 2.7 வினாடிகள் முக்கிய நூல் நேரத்தை செலவிடுகின்றன.

90வது சதவிகிதம், இந்த பெரிய எண்களுடன் ஒப்பிடும்போது, ​​குறைந்தபட்சம் கொஞ்சம் நன்றாகவே தெரிகிறது. எல்லா தளங்களுடனும் ஒப்பிடும்போது, ​​கோணத் திட்டப்பணிகள் பிரதான நூலில் உள்ள டெஸ்க்டாப் சாதனங்களில் 29% அதிக நேரத்தையும், மொபைல் சாதனங்களில் 27% அதிக நேரத்தையும் செலவிடுகின்றன. எதிர்வினை தளங்களின் விஷயத்தில், அதே புள்ளிவிவரங்கள் முறையே 130% மற்றும் 98% ஆக இருக்கும்.

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

இங்கே ஒரு சாத்தியமான சிக்கல் உள்ளது (நன்றி எரேமியா இந்த அம்சத்திற்கு எனது கவனத்தை ஈர்ப்பதற்காகவும், இந்தக் கண்ணோட்டத்தில் இருந்து தரவை கவனமாக பரிசீலிப்பதற்காகவும்). உண்மை என்னவென்றால், பல தளங்கள் பல முன்-இறுதி கருவிகளைப் பயன்படுத்துகின்றன. குறிப்பாக, ரியாக்ட் அல்லது வ்யூ உடன் jQuery ஐப் பயன்படுத்தும் பல தளங்களை நான் பார்த்திருக்கிறேன், ஏனெனில் அந்த தளங்கள் jQuery இலிருந்து மற்ற கட்டமைப்புகள் அல்லது நூலகங்களுக்கு இடம்பெயர்கின்றன. இதன் விளைவாக, நான் மீண்டும் தரவுத்தளத்தைத் தாக்கினேன், இந்த முறை React, jQuery, Angular அல்லது Vue ஆகியவற்றைப் பயன்படுத்தும் தளங்களுடன் தொடர்புடைய இணைப்புகளை மட்டுமே தேர்ந்தெடுத்தேன், ஆனால் அவற்றின் எந்த கலவையும் இல்லை. இதோ எனக்கு கிடைத்தது.

தளங்கள் ஒரே ஒரு கட்டமைப்பை அல்லது ஒரே ஒரு நூலகத்தை மட்டுமே பயன்படுத்தும் சூழ்நிலையில் மொபைல் சாதனங்களில் ஸ்கிரிப்ட்களை செயலாக்குவது தொடர்பான செயலி நேரம் (மில்லி விநாடிகளில்)

சதங்கள்
10
25
50
75
90

jQuery மட்டுமே பயன்படுத்தும் தளங்கள்
542.9
1062.2
2297.4
4769.7
8718.2

Vueஐ மட்டுமே பயன்படுத்தும் தளங்கள்
944.0
1716.3
3194.7
5959.6
9843.8

கோணத்தை மட்டுமே பயன்படுத்தும் தளங்கள்
1328.9
2151.9
3695.3
6629.3
11607.7

ரியாக்டை மட்டுமே பயன்படுத்தும் தளங்கள்
2443.2
4620.5
10061.4
17074.3
24956.3

தளங்கள் ஒரே ஒரு கட்டமைப்பை அல்லது ஒரே ஒரு நூலகத்தை மட்டுமே பயன்படுத்தும் சூழ்நிலையில் மொபைல் சாதனங்களில் ஸ்கிரிப்ட்களை செயலாக்குவது தொடர்பான செயலி நேரம்

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

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

இது கொஞ்சம் விசித்திரமானது, ஆனால் இந்த விசித்திரத்திற்கான விளக்கத்தைத் தேட முயற்சிப்பேன்.

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

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

மொபைல் மற்றும் டெஸ்க்டாப் சாதனங்களுக்கு இடையே உள்ள இடைவெளி

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

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

டெஸ்க்டாப்புடன் ஒப்பிடும்போது மொபைல் சாதனங்களில் ஸ்கிரிப்ட்களை செயலாக்குவது தொடர்பான நேரம் (சதவீதம்) அதிகரிப்பு

சதங்கள்
10
25
50
75
90

அனைத்து தளங்களும்
144.1
172.8
185.5
208.5
224.0

jQuery தளங்கள்
188.2
187.4
191.3
209.6
221.9

வியூ தளங்கள்
222.5
220.8
220.2
221.4
220.4

கோண தளங்கள்
205.1
206.0
201.6
210.4
218.7

எதிர்வினை தளங்கள்
431.5
386.8
337.9
242.6
179.6

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

முடிவுகளை

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

இது வலைத் திட்டங்களின் செயல்திறனுக்குப் பொருந்தாது (மற்றும் மறைமுகமாக அவற்றிற்கு அல்ல அணுகல்).

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

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

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

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

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

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

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

• பொது அறிவு மூலம் உங்களை நீங்களே சோதித்துக் கொள்ளுங்கள். தேர்ந்தெடுக்கப்பட்ட கட்டமைப்பை நீங்கள் உண்மையில் பயன்படுத்த வேண்டுமா? தூய ஜாவாஸ்கிரிப்ட் இன்று நிறைய திறன் கொண்டது.
• இந்த கட்டமைப்பின் 90% திறன்களை உங்களுக்கு வழங்கக்கூடிய, தேர்ந்தெடுக்கப்பட்ட கட்டமைப்பிற்கு (ப்ரீக்ட், ஸ்வெல்ட் அல்லது வேறு ஏதாவது போன்றவை) இலகுவான மாற்று உள்ளதா?
• நீங்கள் ஏற்கனவே ஒரு கட்டமைப்பைப் பயன்படுத்துகிறீர்கள் என்றால், சிறந்த, மிகவும் பழமைவாத, நிலையான விருப்பங்கள் (எ.கா. Vue க்கு பதிலாக Nuxt.js, React க்குப் பதிலாக Next.js மற்றும் பல) ஏதேனும் உள்ளதா என்பதைக் கவனியுங்கள்.
• உங்கள் என்ன பட்ஜெட் ஜாவாஸ்கிரிப்ட் செயல்திறன்?
• உங்களால் எப்படி முடியும் அளவு ஒரு திட்டத்தில் மிகவும் அவசியமானதை விட அதிகமான ஜாவாஸ்கிரிப்ட் குறியீட்டை உட்செலுத்துவதை கடினமாக்குவதற்கான ஒரு வளர்ச்சி செயல்முறை?
• நீங்கள் எளிதாக வளர்ச்சிக்காக ஒரு கட்டமைப்பைப் பயன்படுத்துகிறீர்கள் என்றால், கருத்தில் கொள்ளுங்கள் உங்களுக்கு தேவையா வாடிக்கையாளர்களுக்கு கட்டமைப்பின் குறியீட்டை அனுப்பவும். சேவையகத்தில் உள்ள அனைத்து சிக்கல்களையும் நீங்கள் தீர்க்க முடியுமா?

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

அன்புள்ள வாசகர்கள்! சிறந்த ஜாவாஸ்கிரிப்ட் கட்டமைப்பை நீங்கள் எவ்வாறு பார்க்கிறீர்கள்?

ஆதாரம்: www.habr.com