Javascript async src உரை ஏற்றப்பட்டது. ஒத்திசைவற்ற ஜாவாஸ்கிரிப்ட் ஏற்றுதல் - பக்க ஏற்றத்தை விரைவுபடுத்தவும். வேர்ட்பிரஸில் ஒத்திவைத்தல் அல்லது ஒத்திசைவு பண்புகளைச் சேர்த்தல்
29.06.2020
வணக்கம் நண்பர்களே! வலைத்தள செயல்திறனில் ஜாவாஸ்கிரிப்ட் ஏற்றுவது மிகப்பெரிய இடையூறுகளில் ஒன்று என்பது உங்களுக்குத் தெரியுமா? ஸ்கிரிப்ட் என்றால் என்ன, அது தளத்தின் வேகம் மற்றும் செயல்திறனை எவ்வாறு பாதிக்கிறது என்பதை விளக்குவதே இன்று எனது முக்கிய பணி.
ஸ்கிரிப்ட் டேக்கை ஏற்றும் உலாவி ஸ்கிரிப்ட் ஏற்றப்பட்டு செயல்படுத்தப்படும் வரை பக்கத்தை வழங்குவதை நிறுத்துகிறது. பக்கம் தடுக்கப்பட்டது மற்றும் உலாவி சில வினாடிகளுக்கு பயனர் செயல்களுக்கு பதிலளிக்காது. தாமத நேரம் பல காரணிகளைப் பொறுத்தது:
உள்ளமைவு,
இணைய இணைப்பு வேகம்,
கோப்பின் அளவு மற்றும் பிற ...
இந்த காரணத்திற்காக, கூகிள் பேஜ்ஸ்பீட் நுண்ணறிவு காட்சியைத் தடுக்கும் பக்கத்தின் மேலிருந்து ஜாவாஸ்கிரிப்டை அகற்ற பரிந்துரைக்கிறது. தளத்தின் கீழே ஸ்கிரிப்ட்களை வைப்பது நல்ல நடைமுறை, எடுத்துக்காட்டாக, மூடுவதற்கு முன்.
அல்லது ஒத்திசைவற்ற ஏற்றுதல் அமைத்தல்.
ஸ்கிரிப்ட் குறியீடு தளத்தின் மேல் பகுதியை காட்சிப்படுத்தினால், அதை ஒரு தனி கோப்பில் போடாதீர்கள், ஆனால் அதை நேரடியாக HTML இல் உட்பொதிக்கவும்.
JS தளத்தின் உள்ளடக்கத்தை மாற்றலாம் மற்றும் வேறு URL க்கு திருப்பிவிடலாம். இந்த வழக்கில், ஆவணத்தின் முடிவில் ஸ்கிரிப்டை இணைப்பது, பக்கத்தை "ஜெர்கிங்" செய்வதற்கு வழிவகுக்கும், மேலே உள்ள புதிய அல்லது ஏற்கனவே உள்ள கூறுகளை ஏற்றும்.
ஸ்கிரிப்ட் டேக்கில் ஒத்திசைவு மற்றும் ஒத்திவைக்கும் பண்புகளைப் பயன்படுத்துதல்
ஒத்திசைவற்ற மற்றும் ஒத்திவைக்கப்பட்ட ஜாவாஸ்கிரிப்ட் வேலை என்ன மற்றும் ஒத்திசைவு மற்றும் ஒத்திவைக்கும் பண்புகளுக்கு இடையிலான அடிப்படை வேறுபாடு என்ன என்பதைப் பார்ப்போம். ஆனால் முதலில், ஸ்கிரிப்ட் டேக்கின் வழக்கமான இணைப்புடன் ஆவண செயலாக்க வரிசையைப் பார்ப்போம்.
< src = "example.js">
ஒரு எடுத்துக்காட்டுக்கு, நான் பின்வரும் மரபுகளைப் பயன்படுத்துவேன்:
- பக்க செயலாக்கம் - ஸ்கிரிப்ட் ஏற்றுதல் - ஸ்கிரிப்ட் செயல்படுத்தல்
எனவே, செயலாக்க வரிசை பின்வருமாறு:
ஸ்கிரிப்ட் ஏற்றப்பட்டு செயல்படும் போது HTML குறியீட்டை அலசுவது தடைபடுகிறது, பின்னர் தொடர்கிறது. வலைப்பக்கத்தை காண்பிப்பதில் தாமதம் ஏற்படுகிறது.
பண்புகளை ஒத்திவைக்கவும்
ஒத்திவைக்கும் பண்பு, பக்கத்தின் மேலும் செயலாக்கத்தை நிறுத்தாமல் இணையாக js கோப்புகளை ஏற்றுவதற்கு உலாவியை அனுமதிக்கிறது. ஆவணப் பொருள் மாதிரியை (சுருக்கமாக DOM) முழுமையாகப் பாகுபடுத்திய பிறகு அவை செயல்படுத்தப்படும், உலாவி கோப்புகள் இணைக்கப்பட்ட வரிசையின் அடிப்படையில் நிலைத்தன்மையை உறுதி செய்கிறது.
< ஒத்திவைக்கவும் src = "example.js">
அசின்க் பண்பு
ஒத்திசைவு பண்புக்கூறுக்கான ஆதரவு HTML5 இல் தோன்றியது, இது உலாவியை js கோப்புகளை இணையாக ஏற்றவும் மற்றும் ஏற்றப்பட்ட உடனேயே இயக்கவும் அனுமதிக்கிறது, மீதமுள்ள பக்கத்தை செயலாக்க காத்திருக்காமல்.
< async src = "example.js">
செயலாக்க வரிசை வரைபடம்:
இது ஒத்திசைவற்ற பதிவிறக்கம். ஆவணத்தின் காட்சியை கணிசமாக பாதிக்காத ஸ்கிரிப்டுகளுக்கு பண்புக்கூறு பரிந்துரைக்கப்படுகிறது. இதில் புள்ளியியல் சேகரிப்பு கவுண்டர்கள் (கூகுள் அனலிட்டிக்ஸ், யாண்டெக்ஸ் மெட்ரிகா), விளம்பர நெட்வொர்க் குறியீடுகள் (யாண்டெக்ஸ் விளம்பர நெட்வொர்க், கூகுள் அட்சென்ஸ்), சமூக ஊடக பொத்தான்கள் மற்றும் பல.
இணையதள ஏற்றும் வேகம் கூகுள் தரவரிசை காரணிகளில் ஒன்றாகும்.
ஒத்திசைவற்ற ஜாவாஸ்கிரிப்ட் இணைப்பு தாமதத்தை நீக்குவதன் மூலம் பக்க ஏற்ற நேரத்தை குறைக்கிறது. இதனுடன், js கோப்புகளை ஒன்றில் சுருக்கவும், ஒன்றிணைக்கவும் பரிந்துரைக்கிறேன், எடுத்துக்காட்டாக நூலகத்தைப் பயன்படுத்துதல். பயனர்கள் வேகமான தளங்களை விரும்புகிறார்கள்
ஒத்திசைவு மற்றும் ஒத்திவைத்தல் - ஜாவாஸ்கிரிப்ட் ஏற்றுதல் உத்திகள்
ஜாவாஸ்கிரிப்ட் என்பது எந்த நவீன இணைய பயன்பாட்டிலும் இன்றியமையாத பகுதியாகும், மேலும் ஏற்றுவதற்கு நாம் பயன்படுத்தும் உத்திகள் அந்த பயன்பாட்டின் செயல்திறனை நேரடியாக பாதிக்கும். இந்த கட்டுரையில், ஒவ்வொரு அணுகுமுறைக்கும், நன்மை தீமைகள் மற்றும் செயல்திறன் தாக்கங்கள் மற்றும் பக்க தொடர்பு மற்றும் சுமை நேரங்களை எவ்வாறு மேம்படுத்துவது ஆகியவற்றுக்கு இடையேயான முக்கியமான வேறுபாடுகளைப் புரிந்துகொள்ள முயற்சிப்போம்.
ஆர்ப்பாட்டத்திற்காக, பின்வரும் வெளிப்புற சார்புகளைக் கொண்ட ஒரு வலைத்தளத்தை உருவாக்குவேன். கோப்புகளின் பதிவிறக்க நேரங்கள் இதற்கு நேரடியாக விகிதாசாரமாக இருப்பதால், அந்தந்த கோப்பு அளவுகளில் சிறப்பு கவனம் செலுத்துங்கள்.
HTML - பக்கம் ~ 1 MB. ஜாவாஸ்கிரிப்டிலிருந்து சில மாறும் வெளியீட்டை காண்பிக்க உண்மையான மார்க்அப் / உள்ளடக்கம் உள்ளது.
படம் - image1.png M 5 Mb
ஜாவாஸ்கிரிப்ட் - file1.JS ~ 3MB என்பது முக்கிய (முக்கிய கோப்பு) ஜாவாஸ்கிரிப்ட் மற்றும் HTML பாகுபடுத்தலைப் பொறுத்தது. சில மாறும் உள்ளடக்கத்தைக் காண்பிப்பது அல்லது பக்கத்தில் எதிர்வினை / கோணக் கூறுகளை ஏற்றுவது அவசியம்.
ஜாவாஸ்கிரிப்ட் - file2.js ~ 460B என்பது ஒரு சிறிய, சுயாதீன ஜாவாஸ்கிரிப்ட் கோப்பாகும்.
ஜாவாஸ்கிரிப்ட் - file3.js ~ 1.5 MB என்பது இரண்டாம் நிலை js கோப்பு மற்றும் சில குறைந்த முன்னுரிமை குறியீட்டை இயக்க file1.js ஐ சார்ந்துள்ளது. பக்க ஒழுங்கமைவு மற்றும் பயனர் தொடர்புக்கு இந்த குறியீடு உடனடியாக தேவையில்லை; இது சமூக ஊடக சின்னங்கள், கருத்துகள், ஆன்லைன் உதவி, சில பகுப்பாய்வு பணிகளைத் தொடங்குவது போன்றவற்றைக் காட்டுகிறது.
இப்போது வெவ்வேறு அணுகுமுறைகளை பகுப்பாய்வு செய்ய வேண்டிய நேரம் வந்துவிட்டது
அணுகுமுறை -1 [தலை பிரிவில் உள்ள ஸ்கிரிப்டுகள்]
முதல் வழக்கில், எங்கள் HTML இன் தலைப் பிரிவில் அனைத்து ஸ்கிரிப்ட் குறிச்சொற்களையும் ஏற்றுவோம். பயனர் தொடர்புக்குத் தயாராக உள்ள குரோம் பக்கத்தின் நெட்வொர்க் தாவலின் பகுப்பாய்வின் ஸ்கிரீன்ஷாட் கீழே உள்ளது.
நன்மை:
HTML இல் கோப்புகள் சேர்க்கப்பட்ட வரிசையில் பல்வேறு JS கோப்புகளின் குறியீட்டைச் செயல்படுத்தும் வரிசை சேமிக்கப்படும். தற்போதைய எடுத்துக்காட்டில், file1 மற்றும் file3 ஆகியவை file1 க்கு முன் ஏற்றப்பட்டிருந்தாலும், செயல்படுத்தும் வரிசை சரியாக இருக்கும்.
கழித்தல்:
இந்த சூழ்நிலையில், தலை பிரிவில் உள்ள 3 ஸ்கிரிப்டுகளும் ஏற்றப்பட்டு, பாகுபடுத்தப்பட்டு, செயல்படுத்தப்படும் வரை HTML பாகுபடுத்தல் இடைநிறுத்தப்படும். HTML கோப்பு ஏற்கனவே ஏற்றப்பட்டிருந்தாலும் ஒரு வெற்று வெள்ளைத் திரை பயனருக்குக் காட்டப்படும் [ஆனால் பாகுபடுத்தப்படவில்லை]. இது நிச்சயமாக பயன்பாட்டிற்கு நல்லதல்ல.
DOM இன்னும் தயாராக இல்லாததால் மேலே உள்ள எந்த ஸ்கிரிப்டும் HTML பக்கத்தை அணுக / கையாள முடியாது. இந்த சிக்கலைக் கையாள ஒரு சாத்தியமான தீர்வு DOMContentLoded நிகழ்வைக் கேட்டு அதன் பிறகு குறியீட்டை இயக்க வேண்டும். DOMContentLoded அசல் HTML ஆவணம் முழுமையாக ஏற்றப்பட்டு ஸ்டைல்ஷீட்கள், படங்கள் ஏற்றும் வரை காத்திருக்காமல் பாகுபடுத்தப்பட்டபோது இந்த நிகழ்வு தூண்டப்படுகிறது.
அணுகுமுறை -2 [இறுதியில் ஸ்கிரிப்டுகள்]
முதல் அணுகுமுறையில் நாம் எதிர்கொள்ளும் 2 பிரச்சனைகளை சமாளிக்க, உடல் குறியின் கீழே 3 ஸ்கிரிப்டுகளையும் ஏற்றுவோம்.
நன்மை:ஸ்கிரிப்டுகள் ஏற்றப்படுவதற்கு முன்பு HTML பாகுபடுத்தப்படுகிறது, எனவே பயனர் ஸ்கிரிப்டுகளுக்காக காத்திருப்பதற்குப் பதிலாக உண்மையான உள்ளடக்கத்தை இப்போதே பார்க்க முடியும்.
அனைத்து ஸ்கிரிப்டுகளும் HTML பாகுபடுத்தப்பட்ட பிறகு செயல்படுத்தப்படுவதால், அவை எந்தவிதமான கையாளுதலுக்கும் DOM ஐ அணுகலாம். ஸ்கிரிப்ட் செயல்பாட்டின் வரிசை பாதுகாக்கப்படுகிறது.
கழித்தல்:
செயல்திறன் ஆதாயம் இல்லை.
அணுகுமுறை -3 [அசின்க் பண்புகளைப் பயன்படுத்தி]
HTML5 அசிங்க் ஸ்கிரிப்ட் பண்புகளை அறிமுகப்படுத்தியது, இது HTML பாகுபாட்டை பாதிக்காமல் பொருத்தமான ஸ்கிரிப்ட் கோப்புகளை மற்றொரு ஸ்ட்ரீமில் இணையாக ஏற்ற உதவுகிறது.
எவ்வாறாயினும், HTML பாகுபடுத்தல் முடிந்தாலும், ஏற்றாவிட்டாலும் தொடர்புடைய ஸ்கிரிப்ட் பாகுபடுத்தப்பட்டு செயல்படுத்தப்படும், மேலும் குறிப்பிட்ட புள்ளி வரை DOM உறுப்பைக் குறிப்பிடும்.
HTML2 கோப்புக்கு முன் file2.js ஏற்றப்பட்டதை இங்கே நீங்கள் தெளிவாகக் காணலாம். இருப்பினும், உலாவி file2 ஐ ஏற்றும்போது, அது HTML பாகுபாட்டை இடைநிறுத்தவில்லை, இதன் காரணமாக, அது செயல்படுத்தப்படும் நேரத்தில், மாறும் உள்ளடக்கத்தை புகுத்துவதற்கு html ஒதுக்கிடத்துடன் ஒரு இணைப்பைக் கொண்டிருந்தது.
நன்மை:ஸ்கிரிப்டுகள் வேறு திரியில் ஏற்றப்பட்டதால், HTML பாகுபாடு இடைநிறுத்தப்படாது மற்றும் பயனர் வெற்று வெற்றுத் திரைக்குப் பதிலாக உடனடி உள்ளடக்கத்தைப் பார்க்க முடியும். முக்கிய செயல்திறன் ஆதாயம், அதாவது DOMContentLoded நேரம் 47.68 வினாடிகளில் இருந்து 21.12 வினாடிகளாக குறைந்து ~ 55% லாபமாக உள்ளது.
கழித்தல்:
JS மரணதண்டனை வரிசை பாதுகாக்கப்படவில்லை. இது சரியான சுமை வரிசையில் செயல்படுத்தப்படுகிறது, HTML இல் உள்ள ஸ்கிரிப்ட் வரிசை அல்ல. உலாவி ஆதரவு - பழைய வலை உலாவிகளில் ஆதரிக்கப்படவில்லை அதாவது IE 9 மற்றும் அதற்குக் கீழே.
DOM உறுப்பு கிடைக்கும் முன் JS ஏற்றப்பட்டால் என்ன ஆகும்? ஒரு பிழை எறியப்படும்.
கவனம்
அணுகுமுறை -4 [ஒத்திவைக்கும் பண்பைப் பயன்படுத்தி]
HTML பாகுபடுத்தல் முடிந்தபிறகுதான் ஸ்கிரிப்ட் செயல்படுத்தப்படுவதை டிஃபர் பண்புக்கூறு ஏற்படுத்தும். இங்கே நினைவில் கொள்ள வேண்டிய ஒரு முக்கியமான விஷயம் என்னவென்றால், குரோம் இன்னும் ஒத்திவைப்பை ஆதரிக்கவில்லை மற்றும் DOMContentLoaded காலத்தின் மீது எந்த விளைவையும் ஏற்படுத்தாது. இருப்பினும், இது HTML பாகுபடுத்தலின் முடிவில் ஸ்கிரிப்ட்களை இயக்குகிறது.
நன்மை:
ஸ்கிரிப்ட்களை இறக்குமதி செய்யும் வரிசை பாதுகாக்கப்படுகிறது. எனவே file3.js பதிவிறக்கம் முடிந்ததும் மற்றும் file1 செயல்படுத்தப்பட்ட பின்னரே, File3 முன்பு ஏற்றப்பட்டிருந்தாலும் செயல்படுத்தப்படும்.
உலாவி ஆதரவு - ஒத்திசைவற்ற பண்புடன் ஒப்பிடும்போது இது சிறந்த உலாவி ஆதரவைக் கொண்டுள்ளது, அதாவது இது IE v6-9 இல் ஓரளவு ஆதரிக்கப்படுகிறது
முழு HTML பாகுபடுத்தப்பட்ட பின்னரே செயல்படுத்தப்படும் என்பதால் ஸ்கிரிப்டுகள் DOM ஐ அணுகலாம்.
கழித்தல்:
ஒத்திசைவை விட ஒத்திவைப்பு ஒரு சிறந்த தேர்வாக இருக்கும் என்று நான் முதலில் நினைத்தேன், ஆனால் பின்னர் Chrome அதை ஆதரிக்கவில்லை [பதிப்பு 71.0.3578.98] மற்றும் DOMContentLoaded காலத்திற்கு எந்த விளைவையும் ஏற்படுத்தவில்லை.
இருப்பினும், இது பயர்பாக்ஸில் எதிர்பார்த்தபடி குறிப்பிடத்தக்க செயல்திறன் மேம்பாடுகளுடன் வேலை செய்கிறது.
முடிவுரை
Google Analytics, Google reCAPTCHA அல்லது DOM அணுகல் தேவையில்லாத மூன்றாம் தரப்பு நூலகங்களுக்கான ஒத்திசைவற்ற பண்புடன் தலை பிரிவில் ஸ்கிரிப்ட் குறிச்சொற்களை வைப்பது விரும்பத்தக்கது, ஏனெனில் தொடர்புடைய ஸ்கிரிப்ட்கள் இணையாக ஏற்றப்பட்டாலும் உடனடியாக செயல்படுத்தப்படும் .
ஹெட் பிரிவில் ஏற்றப்பட்ட மற்ற அனைத்து ஸ்கிரிப்டுகளுக்கும் ஒத்திசைவைப் பயன்படுத்துங்கள், ஏனெனில் அவை இணையாக ஏற்றப்படும், ஆனால் HTML பாகுபடுத்தி முடிந்ததும் மற்றும் DOM அணுக / கையாளுவதற்குத் தயாரான பின்னரே செயல்படுத்தப்படும்.
பின்னர் செயல்பாட்டைச் செய்ய நீங்கள் ஒத்திசைவற்ற ஸ்கிரிப்ட்களுக்குள் DOMContentLoded கேட்பவர் கலவையைப் பயன்படுத்தலாம். கருத்துகளில் உங்கள் கருத்துக்களையும் முடிவுகளையும் தயவுசெய்து விடுங்கள், அவற்றை உங்களுடன் விவாதிப்பதில் நான் மகிழ்ச்சியடைவேன்.
இந்த பொருளின் ஆசிரியர் நான் - யூரி பகோல்கோவ். ஜாவா, சி ++, சி # (மற்றும் அவற்றைப் பற்றிய ஆலோசனை) மற்றும் வலைத்தளங்களை உருவாக்குதல் போன்ற நிகழ்ச்சிகளை எழுதுவதற்கான சேவைகளை நான் வழங்குகிறேன். நான் CMS OpenCart, WordPress, ModX மற்றும் சுயமாக எழுதிய தளங்களில் வேலை செய்கிறேன். கூடுதலாக, நான் நேரடியாக ஜாவாஸ்கிரிப்ட், PHP, CSS, HTML உடன் வேலை செய்கிறேன் - அதாவது, நான் உங்கள் தளத்தை மாற்றியமைக்கலாம் அல்லது வலை நிரலாக்கத்திற்கு உதவலாம்.
செருகு நிரல்கள் (ஜாவாஸ்கிரிப்ட்) HTML குறியீட்டை ஏற்றுவதைத் தடுக்கிறது. உலாவி (பாகுபடுத்தி) குறிச்சொல்லை அடையும் போது
பின்வரும் எடுத்துக்காட்டுகள் (இன்லைன்) ஸ்கிரிப்டை உள்ளே வைப்பது எப்படி என்பதைக் காட்டுகிறது
தொகுதி வீழ்ச்சி
வகை பண்புக்கூறுக்கான தொகுதி மதிப்பை ஆதரிக்கும் உலாவிகள், பெயரிடப்பட்ட பண்புடன் எந்த ஸ்கிரிப்டையும் புறக்கணிக்கின்றன. ஆதரிக்காத உலாவிகளுக்கு நோமோடூல் -குறிக்கப்பட்ட வீழ்ச்சி ஸ்கிரிப்டுகளையும் வழங்கும்போது, தொகுதி ஸ்கிரிப்ட்களைப் பயன்படுத்த இது உங்களுக்கு உதவுகிறது.
உங்கள் சொந்த வலைத்தளம் அல்லது தனிப்பட்ட நிதியை முதலீடு செய்யாமல் ஆன்லைனில் பணம் சம்பாதிக்க முடியாது என்ற பரவலான நம்பிக்கை உள்ளது. இது உண்மையல்ல. டன் உள்ளன ...
பெரும்பாலும் முறிவுகள், சிக்கல்கள் அல்லது ஃபார்ம்வேரை மாற்றுவதற்கான எளிய விருப்பம் ஆகியவை உள்ளன. ஒரு குறிப்பிட்ட நேரம் வரை, அதிகாரப்பூர்வ உத்தரவாதத்தின் கீழ் சாதனம் புதுப்பிக்கப்படலாம் ...
Vkontakte குழுவை பராமரிப்பது மிகவும் சிக்கலான செயல்முறையாகும் மற்றும் தவறான அணுகுமுறையுடன், நீங்கள் அனைத்து வேலைகளையும் திருகலாம். இந்த கட்டுரையில் நான் முக்கியமானவற்றைப் பற்றி பேசுவேன் ...
VKontakte இல் நண்பர்களை இலவசமாக ஏமாற்றுங்கள்
தொடக்கக்காரர்களுக்கு முதலீடுகள் இல்லாமல் இணையத்தில் உண்மையில் பணம் சம்பாதிப்பது எப்படி முதலீடுகள் இல்லாமல் இணையத்தில் பணம் சம்பாதிக்க உண்மையான வழிகள்
மேம்படுத்துவதில் நடத்தை காரணிகள் மற்றும் அவற்றை மேம்படுத்துவதற்கான வேலை முறைகள்
VKontakte பக்கத்திற்கு போக்குவரத்தை கண்டுபிடித்து அதிகரிப்பது எப்படி
கெளரவ தொலைபேசியில் வேகமாக சார்ஜ் செய்யும் முறை