టెక్స్ట్ javascript async src లోడ్ చేయబడింది. అసమకాలిక జావాస్క్రిప్ట్ లోడింగ్ - పేజీ లోడ్‌ను వేగవంతం చేయండి. WordPress లో వాయిదా లేదా అసింక్ లక్షణాలను జోడిస్తోంది
29.06.2020
హలో ఫ్రెండ్స్! వెబ్‌సైట్ పనితీరులో జావాస్క్రిప్ట్ లోడింగ్ అనేది ఒక పెద్ద అడ్డంకి అని మీకు తెలుసా? ఈ రోజు నా ప్రధాన పని ఏమిటంటే స్క్రిప్ట్ అంటే ఏమిటి మరియు అది సైట్ యొక్క వేగం మరియు పనితీరును ఎలా ప్రభావితం చేస్తుందో వివరించడం.
స్క్రిప్ట్ ట్యాగ్‌ను లోడ్ చేస్తున్న బ్రౌజర్ స్క్రిప్ట్ లోడ్ అయ్యే వరకు మరియు పేజీని అమలు చేయడం ఆపివేస్తుంది. పేజీ బ్లాక్ చేయబడింది మరియు కొన్ని సెకన్ల పాటు యూజర్ చర్యలకు బ్రౌజర్ స్పందించదు. ఆలస్యం సమయం అనేక అంశాలపై ఆధారపడి ఉంటుంది:
ఆకృతీకరణ,
ఇంటర్నెట్ కనెక్షన్ వేగం,
ఫైల్ పరిమాణం మరియు ఇతరులు ...
ఈ కారణంగా, ప్రదర్శనను నిరోధించే పేజీ ఎగువ నుండి జావాస్క్రిప్ట్‌ను తీసివేయాలని Google పేజ్‌స్పీడ్ అంతర్దృష్టులు సిఫార్సు చేస్తున్నాయి. సైట్ దిగువన స్క్రిప్ట్‌లను ఉంచడం మంచి పద్ధతి, ఉదాహరణకు, ముగింపు ట్యాగ్‌కు ముందు.
లేదా అసమకాలిక లోడింగ్‌ను ఏర్పాటు చేయడం.
స్క్రిప్ట్ కోడ్ సైట్ ఎగువ భాగం యొక్క ప్రదర్శనను ప్రభావితం చేస్తే, దానిని ప్రత్యేక ఫైల్‌లో ఉంచవద్దు, కానీ నేరుగా HTML లోకి పొందుపరచండి.
JS సైట్ యొక్క కంటెంట్‌ను మార్చగలదు మరియు వేరే url కి కూడా దారి మళ్ళించవచ్చు. ఈ సందర్భంలో, డాక్యుమెంట్ చివర స్క్రిప్ట్‌ను కనెక్ట్ చేయడం వలన పేజీ "జెర్కింగ్" ప్రభావానికి దారి తీస్తుంది, ఎగువన కొత్త లేదా ఇప్పటికే ఉన్న ఎలిమెంట్‌లను లోడ్ చేస్తుంది.
స్క్రిప్ట్ ట్యాగ్‌కు అసమర్థత మరియు వాయిదా లక్షణాలను వర్తింపజేయడం
అసమకాలిక మరియు వాయిదా వేసిన జావాస్క్రిప్ట్ పని ఏమిటి మరియు అసమకాలిక మరియు వాయిదా లక్షణాల మధ్య ప్రాథమిక వ్యత్యాసం ఏమిటో చూద్దాం. అయితే ముందుగా, స్క్రిప్ట్ ట్యాగ్ యొక్క సాధారణ కనెక్షన్‌తో డాక్యుమెంట్ ప్రాసెసింగ్ క్రమాన్ని చూద్దాం.
< src = "example.js">
దృష్టాంత ఉదాహరణ కోసం, నేను ఈ క్రింది సంప్రదాయాలను ఉపయోగిస్తాను:
- పేజీ ప్రాసెసింగ్ - స్క్రిప్ట్ లోడింగ్ - స్క్రిప్ట్ అమలు
అందువలన, ప్రాసెసింగ్ క్రమం క్రింది విధంగా ఉంది:
స్క్రిప్ట్ లోడ్ అవుతున్నప్పుడు మరియు అమలు చేస్తున్నప్పుడు HTML కోడ్ యొక్క పార్సింగ్ అంతరాయం కలిగిస్తుంది, ఆపై కొనసాగుతుంది. వెబ్ పేజీని ప్రదర్శించడంలో ఆలస్యం ఉంది.
లక్షణాన్ని వాయిదా వేయండి
వాయిదా లక్షణం బ్రౌజర్ పేజీ యొక్క తదుపరి ప్రాసెసింగ్‌ను ఆపకుండా సమాంతరంగా js ఫైల్‌లను లోడ్ చేయడం ప్రారంభించడానికి అనుమతిస్తుంది. డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ (సంక్షిప్తంగా DOM) పూర్తి పార్సింగ్ తర్వాత అవి అమలు చేయబడతాయి, అయితే బ్రౌజర్ ఫైల్‌లు కనెక్ట్ చేయబడిన క్రమం ఆధారంగా స్థిరత్వానికి హామీ ఇస్తుంది.
< వాయిదా వేయండి src = "example.js">
అసమర్థ లక్షణం
ఎసింక్ లక్షణానికి మద్దతు HTML5 లో కనిపించింది, బ్రౌజర్ js ఫైళ్లను సమాంతరంగా లోడ్ చేయడానికి మరియు లోడ్ చేసిన వెంటనే అమలు చేయడానికి, మిగిలిన పేజీని ప్రాసెస్ చేయడానికి వేచి ఉండకుండా అనుమతిస్తుంది.
< async src = "example.js">
ప్రాసెసింగ్ సీక్వెన్స్ రేఖాచిత్రం:
ఇది అసమకాలిక డౌన్‌లోడ్. పత్రం యొక్క ప్రదర్శనను గణనీయంగా ప్రభావితం చేయని స్క్రిప్ట్‌ల కోసం లక్షణం సిఫార్సు చేయబడింది. వీటిలో గణాంకాల సేకరణ కౌంటర్లు (Google Analytics, Yandex Metrica), ప్రకటన నెట్‌వర్క్ కోడ్‌లు (Yandex అడ్వర్టైజింగ్ నెట్‌వర్క్, Google Adsense), సోషల్ మీడియా బటన్‌లు మొదలైనవి ఉన్నాయి.
వెబ్‌సైట్ లోడింగ్ వేగం Google లో ర్యాంకింగ్ కారకాలలో ఒకటి.
అసమకాలిక జావాస్క్రిప్ట్ కనెక్టివిటీ జాప్యాన్ని తొలగించడం ద్వారా పేజీ లోడ్ సమయాన్ని తగ్గిస్తుంది. దీనితో పాటుగా, js ఫైళ్లను ఒకటిగా కుదించడానికి మరియు విలీనం చేయడానికి నేను సిఫార్సు చేస్తున్నాను, ఉదాహరణకు లైబ్రరీని ఉపయోగించడం. వినియోగదారులు వేగవంతమైన సైట్‌లను ఇష్టపడతారు 😎
అసింక్ మరియు వాయిదా - జావాస్క్రిప్ట్ లోడింగ్ వ్యూహాలు
జావాస్క్రిప్ట్ అనేది ఏదైనా ఆధునిక వెబ్ అప్లికేషన్‌లో ఒక ముఖ్యమైన భాగం, మరియు లోడింగ్ కోసం మనం ఉపయోగించుకునే వ్యూహాలు నేరుగా ఆ అప్లికేషన్ పనితీరును ప్రభావితం చేస్తాయి. ఈ ఆర్టికల్లో, ప్రతి విధానం మధ్య ముఖ్యమైన తేడాలు, పనితీరు చిక్కులతో పాటు లాభాలు మరియు నష్టాలు మరియు పేజీ పరస్పర చర్య మరియు లోడ్ సమయాలను ఎలా ఆప్టిమైజ్ చేయాలో అర్థం చేసుకోవడానికి ప్రయత్నిస్తాము.
ప్రదర్శన కోసం, నేను ఈ క్రింది బాహ్య డిపెండెన్సీలతో కూడిన వెబ్‌సైట్‌ను సృష్టిస్తాను. సంబంధిత ఫైలు సైజులపై ప్రత్యేక శ్రద్ధ వహించండి, ఎందుకంటే ఫైల్‌ల డౌన్‌లోడ్ సమయాలు దీనికి నేరుగా అనులోమానుపాతంలో ఉంటాయి.
HTML - పేజీ ~ 1 MB. జావాస్క్రిప్ట్ నుండి కొంత డైనమిక్ అవుట్‌పుట్ చూపించడానికి వాస్తవ మార్కప్ / కంటెంట్‌ను కలిగి ఉంటుంది.
చిత్రం - image1.png M 5 Mb
JavaScript - file1.JS ~ 3MB అనేది కోర్ (ప్రధాన ఫైల్) జావాస్క్రిప్ట్ మరియు HTML పార్సింగ్‌పై ఆధారపడి ఉంటుంది. కొంత డైనమిక్ కంటెంట్‌ను చూపించడానికి లేదా పేజీలో రియాక్ట్ / కోణీయ భాగాన్ని మౌంట్ చేయడానికి ఇది అవసరం.
జావాస్క్రిప్ట్ - file2.js ~ 460B అనేది చిన్న, స్వతంత్ర జావాస్క్రిప్ట్ ఫైల్, ఇది డోమ్‌తో సంకర్షణ చెందుతుంది.
జావాస్క్రిప్ట్ - file3.js ~ 1.5 MB అనేది సెకండరీ js ఫైల్ మరియు కొంత తక్కువ ప్రాధాన్యత కోడ్‌ను అమలు చేయడానికి file1.js పై ఆధారపడి ఉంటుంది. పేజీ రెండరింగ్ మరియు వినియోగదారు పరస్పర చర్య కోసం ఈ కోడ్ తక్షణమే అవసరం లేదు; ఇది సోషల్ మీడియా చిహ్నాలు, వ్యాఖ్యలు, ఆన్‌లైన్ సహాయం, కొన్ని విశ్లేషణ పనులను ప్రారంభించడం మొదలైనవి చూపుతుంది.
ఇప్పుడు విభిన్న విధానాలను విశ్లేషించే సమయం వచ్చింది
అప్రోచ్ -1 [హెడ్ సెక్షన్‌లో స్క్రిప్ట్‌లు]
మొదటి సందర్భంలో, మేము అన్ని స్క్రిప్ట్‌ల ట్యాగ్‌లను మా HTML యొక్క హెడ్ సెక్షన్‌లో లోడ్ చేస్తాము. వినియోగదారు పరస్పర చర్య కోసం సిద్ధంగా ఉన్న క్రోమ్ పేజీ యొక్క నెట్‌వర్క్ ట్యాబ్ యొక్క విశ్లేషణ యొక్క స్క్రీన్ షాట్ క్రింద ఉంది.
ప్రోస్:
HTML లో ఫైల్‌లు చేర్చబడిన క్రమంలో వివిధ JS ఫైల్‌ల కోడ్ అమలు యొక్క క్రమం సేవ్ చేయబడుతుంది. ప్రస్తుత ఉదాహరణలో, ఫైల్ 1 కి ముందు ఫైల్ 2 మరియు ఫైల్ 3 లోడ్ చేయబడినప్పటికీ, అమలు చేసే క్రమం సరిగ్గా ఉంటుంది.
మైనస్‌లు:
ఈ దృష్టాంతంలో, హెడ్ సెక్షన్‌లోని 3 స్క్రిప్ట్‌లు లోడ్, పార్స్ మరియు ఎగ్జిక్యూట్ అయ్యే వరకు HTML పార్సింగ్ పాజ్ చేయబడుతుంది. HTML ఫైల్ ఇప్పటికే లోడ్ అయినప్పటికీ [కానీ అన్వయించబడలేదు] ఖాళీ వైట్ స్క్రీన్ వినియోగదారుకు చూపబడుతుంది. వినియోగానికి ఇది ఖచ్చితంగా మంచిది కాదు.
DOM ఇంకా సిద్ధంగా లేనందున పై స్క్రిప్ట్‌లు ఏవీ HTML పేజీని యాక్సెస్ / మానిప్యులేట్ చేయలేవు. ఈ సమస్యను పరిష్కరించడానికి ఒక సాధ్యమైన పరిష్కారం DOMContentLoded ఈవెంట్ కోసం వినడం మరియు ఆ తర్వాత కోడ్‌ను అమలు చేయడం. DOMContentLoaded అసలు HTML పత్రం పూర్తిగా లోడ్ చేయబడినప్పుడు మరియు స్టైల్‌షీట్‌లు, చిత్రాలు లోడింగ్ పూర్తయ్యే వరకు వేచి ఉండకుండా అన్వయించబడినప్పుడు ఈ ఈవెంట్ ప్రారంభించబడింది.
అప్రోచ్ -2 [చివర స్క్రిప్ట్‌లు]
మొదటి విధానంలో మనం ఎదుర్కొనే 2 సమస్యలను అధిగమించడానికి, మొత్తం 3 స్క్రిప్ట్‌లను బాడీ ట్యాగ్ దిగువన లోడ్ చేద్దాం.
ప్రోస్:స్క్రిప్ట్‌లు లోడ్ కావడానికి ముందే HTML పార్స్ చేయబడుతుంది, కాబట్టి స్క్రిప్ట్‌ల కోసం వేచి ఉండకుండా వినియోగదారు అసలు కంటెంట్‌ను వెంటనే చూడగలుగుతారు.
HTML పార్స్ చేసిన తర్వాత అన్ని స్క్రిప్ట్‌లు అమలు చేయబడతాయి కాబట్టి, అవన్నీ ఏవైనా తారుమారు కోసం DOM ని యాక్సెస్ చేయవచ్చు. స్క్రిప్ట్ అమలు క్రమం భద్రపరచబడింది.
మైనస్‌లు:
అలాంటి పనితీరు లాభం లేదు.
విధానం -3 [అసింక్ లక్షణాన్ని ఉపయోగించి]
HTML5 అసైన్ స్క్రిప్ట్ లక్షణాన్ని ప్రవేశపెట్టింది, ఇది HTML పార్సింగ్‌ని ప్రభావితం చేయకుండా తగిన స్క్రిప్ట్ ఫైల్‌లను మరొక స్ట్రీమ్‌లో సమాంతరంగా లోడ్ చేయడానికి సహాయపడుతుంది.
ఏదేమైనా, HTML పార్సింగ్ పూర్తయినా, పూర్తి చేయకపోయినా, సంబంధిత స్క్రిప్ట్ లోడింగ్ పూర్తయిన వెంటనే పార్స్ చేయబడుతుంది మరియు అమలు చేయబడుతుంది మరియు DOM మూలకాన్ని నిర్దిష్ట పాయింట్ వరకు సూచిస్తుంది.
HTML2 ఫైల్‌కు ముందు file2.js లోడ్ చేయబడిందని ఇక్కడ మీరు స్పష్టంగా చూడవచ్చు. అయితే, బ్రౌజర్ ఫైల్ 2 ని లోడ్ చేస్తున్నప్పుడు, ఇది HTML పార్సింగ్‌ను పాజ్ చేయలేదు మరియు దీని కారణంగా, అది అమలు చేయబడే సమయానికి, డైనమిక్ కంటెంట్‌ను ఇంజెక్ట్ చేయడానికి html ప్లేస్‌హోల్డర్‌కు లింక్‌ను కలిగి ఉంది.
ప్రోస్:స్క్రిప్ట్‌లు వేరొక థ్రెడ్‌లో లోడ్ చేయబడినందున, HTML పార్సింగ్ పాజ్ చేయబడదు మరియు యూజర్ వైట్ ఖాళీ స్క్రీన్‌కు బదులుగా తక్షణ కంటెంట్‌ను చూడగలుగుతారు. ప్రధాన పనితీరు లాభం, అంటే DOMContentLoded సమయం 47.68 సెకన్ల నుండి 21.12 సెకన్లకు మాత్రమే తగ్గిపోయింది మరియు లాభంలో ~ 55%.
మైనస్‌లు:
JS అమలు క్రమం భద్రపరచబడలేదు. ఇది సరైన లోడ్ క్రమంలో అమలు చేయబడుతుంది, HTML లో చేర్చబడిన స్క్రిప్ట్ సీక్వెన్స్ కాదు. బ్రౌజర్ మద్దతు - పాత వెబ్ బ్రౌజర్‌లలో అంటే IE 9 మరియు దిగువన మద్దతు లేదు.
DOM మూలకం అందుబాటులోకి రాకముందే JS ని లోడ్ చేస్తే ఏమి జరుగుతుంది? లోపం విసిరివేయబడుతుంది.
గమనిక: అసింక్ లక్షణంతో స్క్రిప్ట్‌లను బాడీ సెక్షన్ దిగువన ఉంచడం పనికిరానిది మరియు అప్రోచ్ -2 కు సమానం.
విధానం -4 [వాయిదా లక్షణాన్ని ఉపయోగించి]
HTML పార్సింగ్ పూర్తయిన తర్వాత మాత్రమే స్క్రిప్ట్ అమలు చేయడానికి డిఫర్ లక్షణం కారణమవుతుంది. ఇక్కడ గుర్తుంచుకోవలసిన ఒక ముఖ్యమైన విషయం ఏమిటంటే, Chrome ఇంకా వాయిదాకు మద్దతు ఇవ్వలేదు మరియు DOMContentLoaded వ్యవధిపై ఎలాంటి ప్రభావం చూపదు. అయితే, ఇది HTML పార్సింగ్ చివరిలో స్క్రిప్ట్‌లను అమలు చేస్తుంది.
ప్రోస్:
దిగుమతి స్క్రిప్ట్‌ల క్రమం భద్రపరచబడింది. ఫైల్ 3.js డౌన్‌లోడ్ పూర్తయిన తర్వాత మాత్రమే అమలు చేయబడుతుంది మరియు ఫైల్ 1 ఎగ్జిక్యూట్ అయిన తర్వాత, ఫైల్ 3 ముందుగా లోడ్ చేయబడినప్పటికీ.
బ్రౌజర్ సపోర్ట్ - ఎసింక్ లక్షణంతో పోలిస్తే దీనికి మెరుగైన బ్రౌజర్ సపోర్ట్ ఉంది, అనగా ఇది IE v6-9 లో పాక్షికంగా మద్దతు ఇస్తుంది
పూర్తి HTML పార్స్ చేసిన తర్వాత మాత్రమే అమలు చేయబడినందున స్క్రిప్ట్‌లు DOM ని యాక్సెస్ చేయగలవు.
మైనస్‌లు:
అసైన్‌క్ కంటే వాయిదా మంచి ఎంపిక అని నేను మొదట భావించాను, కానీ తర్వాత Chrome ఇంకా దీనికి మద్దతు ఇవ్వలేదని కనుగొన్నారు [వెర్షన్ 71.0.3578.98] మరియు DOMContentLoaded వ్యవధిపై ఎలాంటి ప్రభావం ఉండదు.
అయితే, ఇది ఫైర్‌ఫాక్స్‌లో ఆశించిన విధంగా పనిచేస్తుంది.
తీర్మానాలు
Google Analytics, Google reCAPTCHA లేదా DOM యాక్సెస్ అవసరం లేని దేనిపైనైనా ఆధారపడే మూడవ పార్టీ లైబ్రరీల కోసం అసైన్డ్ లక్షణంతో స్క్రిప్ట్ ట్యాగ్‌లను హెడ్ సెక్షన్‌లో ఉంచడం ఉత్తమం, ఎందుకంటే సంబంధిత స్క్రిప్ట్‌లు సమాంతరంగా లోడ్ అవుతాయి కానీ వెంటనే అమలు చేయబడతాయి .
హెడ్ విభాగంలో లోడ్ చేయబడిన అన్ని ఇతర స్క్రిప్ట్‌ల కోసం వాయిదా వేయండి, అవి కూడా సమాంతరంగా లోడ్ చేయబడతాయి, కానీ HTML పార్సింగ్ పూర్తయిన తర్వాత మాత్రమే అమలు చేయబడుతుంది మరియు DOM యాక్సెస్ / తారుమారు చేయడానికి సిద్ధంగా ఉంది.
మీరు తరువాత కార్యాచరణను అమలు చేయడానికి అసమకాలిక స్క్రిప్ట్‌ల లోపల DOMContentLoaded వినేవారి కలయికను కూడా ఉపయోగించవచ్చు. దయచేసి మీ అభిప్రాయాలు మరియు తీర్మానాలను వ్యాఖ్యలలో ఉంచండి, వాటిని మీతో చర్చించినందుకు నేను సంతోషిస్తాను.
ఈ విషయం యొక్క రచయిత I - యూరి పఖోల్కోవ్. నేను జావా, C ++, C # (అలాగే వాటిపై సంప్రదింపులు) మరియు వెబ్‌సైట్‌లను రూపొందించడంలో ప్రోగ్రామ్‌లను వ్రాయడానికి సేవలను అందిస్తాను. నేను CMS OpenCart, WordPress, ModX మరియు స్వీయ-వ్రాతపై సైట్‌లతో పని చేస్తాను. అదనంగా, నేను నేరుగా జావాస్క్రిప్ట్, PHP, CSS, HTML తో పని చేస్తాను - అంటే, నేను మీ సైట్‌ను సవరించగలను లేదా వెబ్ ప్రోగ్రామింగ్‌కి సహాయపడగలను.
ప్లగ్-ఇన్ స్క్రిప్ట్‌లు (జావాస్క్రిప్ట్) HTML కోడ్‌ను లోడ్ చేయడాన్ని బ్లాక్ చేస్తుంది. బ్రౌజర్ (పార్సర్) ట్యాగ్‌కు చేరుకున్నప్పుడు
మరియు కింది ఉదాహరణలు (ఇన్‌లైన్) స్క్రిప్ట్‌ను ఎలా ఉంచాలో చూపుతాయి
మాడ్యూల్ ఫాల్‌బ్యాక్
రకం లక్షణం కోసం మాడ్యూల్ విలువకు మద్దతు ఇచ్చే బ్రౌజర్లు నామోడ్యూల్ లక్షణంతో ఏ స్క్రిప్ట్‌ను విస్మరిస్తాయి. మద్దతు లేని బ్రౌజర్‌ల కోసం నోమోడ్యూల్ -మార్క్డ్ ఫాల్‌బ్యాక్ స్క్రిప్ట్‌లను అందించేటప్పుడు మాడ్యూల్ స్క్రిప్ట్‌లను ఉపయోగించడానికి ఇది మిమ్మల్ని అనుమతిస్తుంది.
తరచుగా విచ్ఛిన్నాలు, సమస్యలు లేదా ఫర్మ్‌వేర్‌ను మార్చాలనే సాధారణ కోరిక ఉన్నాయి. ఒక నిర్దిష్ట సమయం వరకు, అధికారిక హామీ కింద ఉన్న పరికరాన్ని అప్‌డేట్ చేయవచ్చు ...
Vkontakte సమూహాన్ని నిర్వహించడం చాలా క్లిష్టమైన ప్రక్రియ మరియు తప్పుడు విధానంతో, మీరు అన్ని పనులను స్క్రూ చేయవచ్చు. ఈ ఆర్టికల్లో నేను ముఖ్యమైన వాటి గురించి మాట్లాడతాను ...
VKontakte లో స్నేహితులను ఉచితంగా మోసం చేయండి
ప్రారంభకులకు పెట్టుబడులు లేకుండా ఇంటర్నెట్‌లో నిజంగా డబ్బు ఎలా సంపాదించాలి పెట్టుబడి లేకుండా ఇంటర్నెట్‌లో డబ్బు సంపాదించడానికి నిజమైన మార్గాలు
ప్రమోషన్‌లో ప్రవర్తనా కారకాలు మరియు వాటిని మెరుగుపరచడానికి పని చేసే పద్ధతులు
VKontakte పేజీకి ట్రాఫిక్‌ను ఎలా కనుగొనాలి మరియు పెంచాలి
హానర్ ఫోన్‌లో ఫాస్ట్ ఛార్జింగ్ వర్తిస్తోంది