Տեքստը javascript async src բեռնված է: Asynchronous JavaScript բեռնում - արագացնել էջի բեռնումը: WordPress-ում հետաձգման կամ համաժամացման ատրիբուտների ավելացում

Բարև ընկերներ: Գիտեի՞ք, որ JavaScript-ի բեռնումը վեբ կայքի աշխատանքի ամենամեծ խոչընդոտներից մեկն է: Այսօր իմ հիմնական խնդիրն է բացատրել, թե ինչ է սկրիպտը և ինչպես է այն ազդում կայքի արագության և աշխատանքի վրա։

Բրաուզերը, որը բեռնում է սկրիպտի պիտակը, դադարում է էջը մատուցել մինչև սկրիպտը բեռնվի և կատարվի: Էջն արգելափակված է, և զննարկիչը մի քանի վայրկյան չի արձագանքում օգտվողի գործողություններին: Հետաձգման ժամանակը կախված է մի քանի գործոններից.

• կոնֆիգուրացիա,
• ինտերնետ կապի արագություն,
• ֆայլի չափը և այլն...

Այս պատճառով Google PageSpeed ​​Insights-ը խորհուրդ է տալիս հեռացնել JavaScript-ը էջի վերևից, որն արգելափակում է ցուցադրումը: Լավ պրակտիկա է սկրիպտները տեղադրել կայքի ներքևում, օրինակ՝ փակման պիտակից առաջ:

կամ կարգավորելով ասինխրոն բեռնումը:

Եթե ​​սկրիպտի կոդը ազդում է կայքի վերին մասի ցուցադրման վրա, մի դրեք այն առանձին ֆայլի մեջ, այլ ուղղակիորեն տեղադրեք HTML-ի մեջ։

JS-ը կարող է փոխել կայքի բովանդակությունը և նույնիսկ վերահղել այլ url: Այս դեպքում փաստաթղթի վերջում սկրիպտի ընդգրկումը կհանգեցնի էջի «կտրվածքի» էֆեկտին, վերևում նոր բեռնելու կամ գոյություն ունեցող տարրերի փոփոխմանը:

Async և defer ատրիբուտների կիրառում սցենարի պիտակի վրա

Եկեք տեսնենք, թե որն է ասինխրոն և հետաձգված JavaScript աշխատանքը, և որն է հիմնարար տարբերությունը async-ի և defer ատրիբուտների միջև: Բայց նախ, եկեք նայենք փաստաթղթերի մշակման հաջորդականությանը script tag-ի սովորական միացմամբ:

< src = "example.js">

Պատկերավոր օրինակի համար ես կօգտագործեմ հետևյալ պայմանականությունները.

- էջի մշակում
- սցենարի բեռնում
- սցենարի կատարում

Այսպիսով, մշակման հաջորդականությունը հետևյալն է.

HTML կոդի վերլուծությունն ընդհատվում է, մինչ սկրիպտը բեռնվում և գործարկվում է, այնուհետև շարունակվում է: Վեբ էջի ցուցադրման ուշացում կա։

Հետաձգել հատկանիշը

Defer հատկանիշը թույլ է տալիս դիտարկիչին սկսել js ֆայլերի բեռնումը զուգահեռաբար՝ առանց էջի հետագա մշակումը դադարեցնելու։ Դրանք կատարվում են Document Object Model-ի (կարճ՝ DOM) ամբողջական վերլուծությունից հետո, մինչդեռ զննարկիչը երաշխավորում է հետևողականությունը՝ հիմնվելով ֆայլերի միացման հերթականության վրա:

< հետաձգել src = "example.js">

Async հատկանիշ

Async հատկանիշի աջակցությունը հայտնվել է HTML5-ում, այն թույլ է տալիս դիտարկիչին զուգահեռաբար բեռնել js ֆայլերը և կատարել բեռնումից անմիջապես հետո՝ չսպասելով էջի մնացած մասի մշակմանը:

< async src = "example.js">

Մշակման հաջորդականության դիագրամ.

Սա ասինխրոն ներբեռնում է: Հատկանիշը խորհուրդ է տրվում սկրիպտների համար, որոնք էապես չեն ազդում փաստաթղթի ցուցադրման վրա: Դրանք ներառում են վիճակագրության հավաքագրման հաշվիչներ (Google Analytics, Yandex Metrica), գովազդային ցանցի կոդեր (Yandex Advertising Network, Google AdSense), սոցիալական մեդիայի կոճակներ և այլն:

Կայքի բեռնման արագությունը Google-ի վարկանիշային գործոններից մեկն է:

Asynchronous JavaScript-ի միացումը նվազեցնում է էջի բեռնման ժամանակը` վերացնելով հետաձգումը: Դրա հետ մեկտեղ, ես խորհուրդ եմ տալիս սեղմել և միացնել js ֆայլերը մեկի մեջ, օրինակ՝ օգտագործելով գրադարան: Օգտատերերը սիրում են արագ կայքեր

Async և Defer - JavaScript-ի բեռնման ռազմավարություններ

JavaScript-ը ցանկացած ժամանակակից վեբ հավելվածի էական մասն է, և այն ռազմավարությունները, որոնք մենք ընտրում ենք օգտագործել բեռնման համար, ուղղակիորեն ազդում են հենց այդ հավելվածի աշխատանքի վրա: Այս հոդվածում մենք կփորձենք հասկանալ յուրաքանչյուր մոտեցման կարևոր տարբերությունները, դրական և բացասական կողմերը, ինչպես նաև կատարողականի հետևանքները և ինչպես օպտիմալացնել էջի փոխազդեցությունը և բեռնման ժամանակները:

Ցուցադրման համար ես կստեղծեմ կայք, որը բաղկացած է հետևյալ արտաքին կախվածություններից. Հատուկ ուշադրություն դարձրեք համապատասխան ֆայլերի չափերին, քանի որ ֆայլերի ներբեռնման ժամանակներն ուղիղ համեմատական ​​են դրան:

• HTML - էջ ~ 1 ՄԲ. Պարունակում է իրական նշում / բովանդակություն՝ JavaScript-ից որոշ դինամիկ արդյունք ցույց տալու համար:
• Պատկեր - image1.png ~ 5 Մբ
• JavaScript - file1.JS ~ 3MB-ը հիմնական (հիմնական ֆայլ) javascript-ն է և կախված է HTML վերլուծությունից: Այն անհրաժեշտ է որոշ դինամիկ բովանդակություն ցուցադրելու կամ էջի վրա ռեակտիվ/անկյունային բաղադրիչ տեղադրելու համար:
• JavaScript - file2.js ~ 460B-ը փոքր, անկախ javascript ֆայլ է, որը փոխազդում է dom-ի հետ:
• JavaScript - file3.js ~ 1,5 ՄԲ-ը երկրորդական js ֆայլ է և կախված է file1.js-ից՝ ավելի ցածր առաջնահերթության կոդ գործարկելու համար: Այս կոդը անհապաղ չի պահանջվում էջի մատուցման և օգտատիրոջ փոխազդեցության համար. այն ցույց է տալիս սոցիալական լրատվամիջոցների պատկերակները, մեկնաբանությունները, առցանց օգնությունը, որոշ վերլուծական առաջադրանքների գործարկում և այլն:

Հիմա ժամանակն է վերլուծել տարբեր մոտեցումները

Մոտեցում-1 [սկրիպտները գլխի բաժնում]

Առաջին դեպքում մենք բեռնելու ենք բոլոր սցենարների պիտակները մեր HTML-ի գլխի բաժնում: Ստորև ներկայացված է քրոմի էջի ցանցային ներդիրի վերլուծության սքրինշոթը, որը պատրաստ է օգտատերերի փոխազդեցությանը:

Կողմերը:

Տարբեր JS ֆայլերի կոդի կատարման հաջորդականությունը կպահվի այն հերթականությամբ, որով ֆայլերը ներառվել են HTML-ում: Ընթացիկ օրինակում, նույնիսկ եթե file2-ը և file3-ը բեռնված են մինչև file1-ը, կատարման կարգը ճիշտ կլինի:

Մինուսները:

Այս սցենարում HTML վերլուծությունը կդադարեցվի այնքան ժամանակ, մինչև գլխի բաժնի բոլոր 3 սկրիպտները բեռնվեն, վերլուծվեն և գործարկվեն: Օգտագործողին կցուցադրվի դատարկ սպիտակ էկրան, նույնիսկ եթե HTML ֆայլն արդեն բեռնված է [բայց ոչ վերլուծված]: Սա միանշանակ լավ չէ օգտագործելիության համար:

Վերոնշյալ սկրիպտներից և ոչ մեկը չի կարողանա մուտք գործել / շահարկել HTML էջը, քանի որ DOM-ը դեռ պատրաստ չէ: Այս խնդրի լուծման հնարավոր լուծումներից մեկն այն է, որ լսեք DOMContentLoaded իրադարձությունը և դրանից հետո գործարկեք կոդը: DOMContentLoaded Այս իրադարձությունը գործարկվում է, երբ բնօրինակ HTML փաստաթուղթը ամբողջությամբ բեռնված է և վերլուծվում՝ չսպասելով ոճաթերթերի, պատկերների բեռնման ավարտին:

Մոտեցում-2 [սկրիպտները վերջում]

Առաջին մոտեցման ժամանակ մեր առջև ծառացած 2 խնդիրները հաղթահարելու համար եկեք բեռնենք բոլոր 3 սկրիպտները մարմնի պիտակի ներքևում:

Կողմերը: HTML-ը վերլուծվում է նախքան սկրիպտների բեռնումը, այնպես որ օգտվողը կկարողանա անմիջապես տեսնել իրական բովանդակությունը՝ սկրիպտներին սպասելու փոխարեն:

Քանի որ բոլոր սկրիպտները կատարվում են HTML-ի վերլուծությունից հետո, նրանք բոլորը կարող են մուտք գործել DOM ցանկացած տեսակի մանիպուլյացիայի համար: Սցենարի կատարման հաջորդականությունը պահպանված է։

Մինուսները:

Որպես այդպիսին կատարողականի շահույթ չկա:

Մոտեցում-3 [օգտագործելով Async հատկանիշը]

HTML5-ը ներկայացրեց async script հատկանիշը, որն օգնում է բեռնել համապատասխան սցենարային ֆայլերը մեկ այլ հոսքին զուգահեռ՝ չազդելով HTML վերլուծության վրա:

Այնուամենայնիվ, համապատասխան սկրիպտը կվերլուծվի և կկատարվի հենց որ այն ավարտի բեռնումը, անկախ նրանից, թե HTML վերլուծությունն ավարտված է, թե ոչ, և կհղվի DOM տարրին մինչև այդ կոնկրետ կետը:

Այստեղ դուք կարող եք հստակ տեսնել, որ file2.js-ը բեռնվել է HTML ֆայլից առաջ: Այնուամենայնիվ, մինչ զննարկիչը բեռնում էր file2-ը, այն չդադարեցրեց HTML-ի վերլուծությունը և դրա պատճառով այն գործարկվելու պահին այն ուներ հղում դեպի html տեղապահ՝ դինամիկ բովանդակություն ներարկելու համար:

Կողմերը:Քանի որ սկրիպտները բեռնված են այլ թեմայի վրա, HTML վերլուծությունը չի դադարեցվի, և օգտագործողը կկարողանա տեսնել անմիջական բովանդակությունը սպիտակ դատարկ էկրանի փոխարեն: Հիմնական կատարողականի շահույթը, այսինքն՝ DOMContentLoaded ժամանակը նվազել է 47,68 վայրկյանից մինչև ընդամենը 21,12 վայրկյան և կազմում է շահույթի ~ 55%-ը:

Մինուսները:

JS-ի կատարման հաջորդականությունը չի պահպանվել: Այն կատարվում է բեռնման պատշաճ կարգով, այլ ոչ թե HTML-ում ներառված սցենարի հաջորդականությամբ: Բրաուզերի աջակցություն - Չի աջակցվում ավելի հին վեբ բրաուզերներում, օրինակ՝ IE 9 և ավելի ցածր:

Ի՞նչ է պատահում, եթե JS-ը բեռնվի մինչև DOM տարրի հասանելիությունը: Սխալ կհայտնվի:

Նշում. async հատկանիշով սկրիպտների տեղադրումը մարմնի հատվածի ներքևում կլինի անօգուտ և համարժեք Approach-2-ին:

Մոտեցում-4 [օգտագործելով Defer հատկանիշը]

Defer հատկանիշը կհանգեցնի, որ սկրիպտը կկատարվի միայն HTML վերլուծության ավարտից հետո: Շատ կարևոր կետ, որը պետք է հիշել այստեղ, այն է, որ Chrome-ը դեռ չի աջակցում հետաձգմանը և որևէ ազդեցություն չունի DOMContentLoaded-ի տևողության վրա: Այնուամենայնիվ, այն կատարում է սկրիպտներ HTML վերլուծության վերջում:

Կողմերը:

Սցենարների ներմուծման հաջորդականությունը պահպանված է։ Այսպիսով, file3.js-ը կատարվում է միայն ներբեռնումն ավարտվելուց և file1-ը կատարելուց հետո, նույնիսկ եթե file3-ը բեռնվել է ավելի վաղ:

Բրաուզերի աջակցություն. այն ունի ավելի լավ բրաուզերի աջակցություն՝ համեմատած async հատկանիշի հետ, այսինքն՝ մասամբ աջակցվում է IE v6-9-ում:

Սկրիպտները կարող են մուտք գործել DOM, քանի որ այն կատարվում է միայն ամբողջական HTML-ի վերլուծությունից հետո:

Մինուսները:

Ես ի սկզբանե կարծում էի, որ հետաձգումն ավելի լավ ընտրություն կլինի, քան համաժամացումը, բայց ավելի ուշ պարզեցի, որ Chrome-ը դեռ չի աջակցում այն ​​[71.0.3578.98 տարբերակ] և չի ազդում DOMContentLoaded-ի տևողության վրա:

Այնուամենայնիվ, այն աշխատում է այնպես, ինչպես սպասվում էր Firefox-ում՝ կատարողականի զգալի բարելավումներով:

եզրակացություններ

Նախընտրելի է սկրիպտի պիտակները գլխի բաժնում տեղադրել async հատկանիշով երրորդ կողմի գրադարանների համար, որոնք կախված են Google Analytics-ից, Google reCAPTCHA-ից կամ որևէ այլ բանից, որը չի պահանջում DOM մուտք, քանի որ համապատասխան սկրիպտները բեռնվում են զուգահեռ, բայց անմիջապես կատարվում են: .

Օգտագործեք հետաձգում գլխի բաժնում բեռնված բոլոր մյուս սկրիպտների համար, քանի որ դրանք նույնպես կբեռնվեն զուգահեռ, բայց կկատարվեն միայն այն բանից հետո, երբ HTML-ն ավարտի վերլուծությունը, և DOM-ը պատրաստ կլինի մուտքի/շահագործման համար:

Դուք կարող եք նաև օգտագործել DOMContentLoaded լսողի համակցությունը ասինխրոն սկրիպտների ներսում՝ ֆունկցիոնալությունը հետագայում գործարկելու համար: Խնդրում ենք թողնել ձեր կարծիքներն ու եզրակացությունները մեկնաբանություններում, և ես ուրախ կլինեմ դրանք քննարկել ձեզ հետ:

Այս նյութի հեղինակը ես եմ՝ Յուրի Պախոլկովը: Տրամադրում եմ Java, C ++, C # ծրագրեր գրելու ծառայություններ (նաև դրանց վերաբերյալ խորհրդատվություն) և կայքեր ստեղծելու համար։ Ես աշխատում եմ CMS OpenCart, WordPress, ModX և ինքնուրույն գրված կայքերի հետ: Բացի այդ, ես ուղղակիորեն աշխատում եմ JavaScript, PHP, CSS, HTML-ի հետ, այսինքն՝ կարող եմ փոփոխել ձեր կայքը կամ օգնել վեբ ծրագրավորման հարցում:

Plug-in scripts (JavaScript) արգելափակում է HTML կոդի բեռնումը: Երբ բրաուզերը (վերլուծիչը) հասնում է պիտակին

Атрибут async

, использовать async или defer не имеет смысла поскольку к этому моменту парсер уже проанализировал весь HTML код.

Является ли скрипт самодостаточным?

Для файлов (скриптов), которые не нужны для работы других скриптов и сами не имеют зависимостей от других скриптов, атрибут async особенно полезен. Поскольку в этом случае все равно, в какой именно момент выполняется скрипт, асинхронная загрузка является наиболее подходящим вариантом.

Нужен ли полностью загруженный DOM для работы скрипта?

Если это необходимо, то использование async уместно только в случае если скрипт рассчитан на асинхронную загрузку - т.е. он ждет события пока загрузиться DOM и только потом начинает свою работу.

Или можно использовать атрибут defer . В этом случае размещать вызов script можно в любом месте HTML.

Маленький ли скрипт?

Если скрипт относительно мал и от него зависят или он зависит от других скриптов, то его можно встроить прямо в HTML (подключить inline).

Поддержка браузерами 97%

Добавление атрибутов defer или async в WordPress

Штатных способов сделать это нет, поэтому будем пользоваться хуком script_loader_tag :

Add_action("wp_enqueue_scripts", "my_scripts_method"); function my_scripts_method(){ // подключаем скрипт wp_enqueue_script("my-script", get_template_directory_uri() . "/js/my-script.js"); // Добавляем атрибут defer к скрипту с id `my-script` add_filter("script_loader_tag", "change_my_script", 10, 3); function change_my_script($tag, $handle, $src){ if("my-script" === $handle){ // return str_replace(" src", " async src", $tag); return str_replace(" src", " defer src", $tag); } return $tag; } }

The HTML

Եվ հետևյալ օրինակները ցույց են տալիս, թե ինչպես կարելի է (ներկառուցված) սկրիպտը ներս դնել

Մոդուլի հետադարձ կապ

Բրաուզերները, որոնք աջակցում են մոդուլի արժեքը type հատկանիշի համար, անտեսում են nomodule հատկանիշով ցանկացած սցենար: Դա ձեզ հնարավորություն է տալիս օգտագործել մոդուլի սկրիպտներ՝ միաժամանակ տրամադրելով nomodule-ով նշված հետադարձ սցենարներ չաջակցող բրաուզերների համար:

Տեխնիկական պայմաններ

Հստակեցում	Կարգավիճակ	Մեկնաբանություններ
HTML Living Standard սահմանումը « Առնչվող հոդվածներ Հիբրիդ հեռուստացույց և FM լարող GOTVIEW PCI Hybrid - հետաքրքիր բյուջետային լուծում DVB-T աջակցությամբ Հակադարձ վարպետություն. կարելի՞ է ավելացնել սեղմված ձայնագրությունների դինամիկ տիրույթը: Լավագույն խոցելիության սկաներները Linux-ի համար Tuner GoTwiew PCI DVD. TV plus hardware MPEG2 կոդավորման Element բազային նորարարություններ Հեռախոսի վերանորոգում կենտրոնում ASP-ի գործարկում ձեր համակարգչի վրա Windows վեբ սերվերի տարբերակները Վերջին հոդվածները 2021-10-27 13:58:02 Գիտե՞ք ինչպես ընտրել համակարգչային համակարգի միավոր տան և խաղերի համար: 2021-10-22 16:51:17 Բացեք Valle d'Aosta-ի ձախ ընտրացանկը 2021-10-22 16:51:17 Ռաբակի ո՞ր հյուրանոցներն ունեն գեղեցիկ տեսարան: Հանրաճանաչ հոդվածներ Վալե դ'Աոստա. Իտալիա. Բացեք ձախ մենյու Valle d'Aosta Heroes of the Vine Էլեկտրական վարդակների տեսակներն ու լարումները ամբողջ աշխարհում Որոնք են լարման ստանդարտները, հաճախականությունները և վարդակների տեսակները աշխարհի տարբեր երկրներում Ինչպես է փոխվել ապառազմականացված գոտին Հյուսիսային և Հարավային Կորեաների միջև Անջատեք ավտոմատ թարմացումները Windows-ում Խմբագրի ընտրություն 2021-10-13 11:52:18 Ծեր ձին, չի փչացնում ակոսը D-Link DIR-320 NRU երթուղիչը երկար ժամանակ առկա է SOHO սարքավորումների շուկայում, բայց ես ինչ-որ կերպ անարժանաբար շրջանցել եմ այն: Հիմա որոշեցի... 2021-10-13 11:52:18 Wi-Fi երթուղիչի ընտրացանկ մուտք գործելու համար գաղտնաբառը փոխելը Հարցը, թե ինչպես միացնել wi-fi երթուղիչը համակարգչին, օգտվողներին հարցնում են, երբ նրանք ցանկանում են օգտվել ինտերնետից ամբողջ բնակարանում և ունենալ ... 2021-10-13 11:52:18 Ինչու ձեզ հարկավոր չէ դատարկել Windows թափոնարկղը Եթե ​​Ձեզ անհրաժեշտ է կանոնավոր կերպով ինքնաբերաբար դատարկել Աղբարկղը, դա անելու մի քանի եղանակ կա, որը թույլ կտա ձեզ հեռացնել ավելորդ ֆայլերը ... 2021-10-13 11:52:18 Ինչի համար են թաքնված Windows համակարգի միջնորմները և կարո՞ղ են դրանք ջնջվել Ինչպե՞ս միացնել թաքնված ֆայլերի ցուցադրումը: Լռելյայնորեն, Windows-ը թաքցնում է համակարգի կարևոր ֆայլերը, որպեսզի օգտագործողը սխալմամբ չջնջի դրանք: 2021-10-09 12:32:37 Լավագույն ծառայությունները «Vkontakte»-ի կառավարման համար Ինչպես կատարել ձեր սեփական ծառայությունը VK-ում Ծանր աշխատանք. Բարեբախտաբար, այսօր մշակվել են հսկայական թվով ծրագրեր և ծառայություններ, որոնք ուղղված են այս աշխատանքը պարզեցնելուն։ Բայց ինչպես չմոլորվել... rzdoro.ru Երկաթ Windows 10 Սկանավորում Windows 7 Windows XP Տպիչների վարորդներ Նոթբուքեր Windows 8 Աուդիո Տեսանյութ Գաջեթներ Տարբեր Linux