Na-load ang JavaScript async SRC. Asynchronous Download Javascript - Pabilisin ang Pag-load ng Pahina. Ang pagdaragdag ng mga katangian ay nagpapabaya o async sa WordPress.
29.06.2020
Pagbati, mga kaibigan! Alam mo ba na ang pag-download ng JavaScript ay isa sa mga pinaka-makitid na lugar sa pagganap ng site? Ngayon, ang aking pangunahing gawain ay upang ipaliwanag kung ano ang script at kung paano ito nakakaapekto sa bilis at pagganap ng site.
Ang pag-load ng browser Ang tag ng script ay hihinto ang pag-render ng pahina hanggang sa ma-download ang script at hindi natupad. Naka-block ang pahina at hindi tumutugon ang browser sa mga pagkilos ng gumagamit. Ang oras ng pagkaantala ay depende sa maraming mga kadahilanan:
mga kumpigurasyon
bilis ng koneksyon sa internet
sukat ng file at iba pang ...
Para sa kadahilanang ito, ang Google PageSpeed \u200b\u200bInsights Ang pag-download ng Site Speed \u200b\u200bAnalyzer ay inirerekomenda ang pag-alis ng JavaScript code mula sa tuktok ng pahina na nagharang sa display nito. Ang mabuting pagsasanay ay ang paglalagay ng mga script sa ilalim ng site, halimbawa, sa harap ng tag ng pagsasara
o pagtatakda ng asynchronous loading.
Kung ang script code ay nakakaapekto sa pagpapakita ng tuktok ng site - huwag dalhin ito sa isang hiwalay na file, ngunit direktang naka-embed sa HTML.
Maaaring baguhin ng JS ang mga nilalaman ng site at kahit na i-redirect sa isa pang URL. Sa kasong ito, ang koneksyon ng script sa dulo ng dokumento ay hahantong sa "twitching" na epekto ng pahina, naglo-load ng bago o pagbabago ng mga umiiral na elemento sa itaas.
Ilapat ang async at defer na mga katangian para sa script tag.
Ipaalam ito na ito ay isang asynchronous at ipinagpaliban JavaScript trabaho at kung saan ay ang pangunahing pagkakaiba sa pagitan ng Async at Defer mga katangian. Ngunit unang isaalang-alang ang pagkakasunud-sunod ng pagpoproseso ng dokumento sa karaniwang koneksyon ng tag ng script.
< src \u003d "example.js"\u003e
Sa isang visual na halimbawa, gagamitin ko ang sumusunod na kondisyon na notasyon:
- Page Processing. - I-download ang script - Pagpapatupad ng script
Kaya, ang pagkakasunud-sunod ng pagpoproseso ay nangyayari ayon sa sumusunod na pamamaraan:
Ang pagtatasa ng HTML-code ay nagambala sa oras ng paglo-load at pagsasagawa ng script, pagkatapos nito ay patuloy. Ang display ng webpage ay nangyayari sa pagkaantala.
Attribute defer.
Ang defer attribute ay nagpapahintulot sa browser na simulan ang paglo-load ng mga file ng JS kahanay nang hindi humihinto sa karagdagang pagproseso ng pahina. Ang kanilang pagpapatupad ay nangyayari pagkatapos ng isang kumpletong pag-parse ng modelo ng object ng dokumento (mula sa modelong Object ng Ingles, na pinaikli ng DOM), habang ang browser ay nagbibigay ng isang pagkakasunod-sunod batay sa pagkakasunud-sunod ng pagkonekta ng mga file.
< defer src \u003d "example.js"\u003e
Attribute async.
Ang suporta ng async attribute ay lumitaw sa HTML5, pinapayagan nito ang browser na mag-download ng mga file ng JS kahanay at gumanap kaagad pagkatapos mag-load, nang hindi naghihintay para sa pagproseso ng natitirang pahina.
< async src \u003d "example.js"\u003e
Pagproseso ng Pagkakasunud-sunod ng Diagram:
Ito ay isang asynchronous loading. Ang katangian ay inirerekomenda para sa naturang mga script na walang malaking epekto sa pagpapakita ng dokumento. Kabilang dito ang mga counter ng koleksyon ng istatistika (Google Analytics, Yandex Metric), mga code ng network ng advertising (Yandex advertising network, Google Adsense), mga pindutan ng social network, at iba pa.
Ang bilis ng pag-download ng site ay isa sa mga kadahilanan ng pagraranggo ng Google.
Ang Asynchronous Connection of JavaScript ay binabawasan ang oras ng pag-load ng pahina dahil sa kakulangan ng pagkaantala. Kasama nito, inirerekumenda ko ang pag-compress at pagsasama ng mga file ng JS sa isa, halimbawa, gamit ang library. Mga gumagamit tulad ng mabilis na mga site 😎.
Async at Defer - Mga Istratehiya sa pag-download ng JavaScript.
Ang JavaScript ay isang mahalagang bahagi ng anumang modernong web application, at estratehiya na desisyon naming gamitin upang i-download nang direkta makaapekto sa pagganap ng application na ito mismo. Sa artikulong ito, susubukan naming maunawaan ang mahahalagang pagkakaiba sa pagitan ng bawat diskarte, mga kalamangan at kahinaan. Kasama ang mga epekto ng pagganap at mga paraan upang ma-optimize ang pakikipag-ugnayan sa pahina at oras ng pag-download.
Upang ipakita, lilikha ako ng isang website na binubuo ng mga sumusunod na panlabas na dependency. Magbayad ng espesyal na pansin sa naaangkop na mga laki ng mga file, dahil ang oras ng pag-download ng mga file ay direktang proporsyonal dito.
HTML - Pahina ~ 1 MB. Naglalaman ng aktwal na pagmamarka / nilalaman upang ipakita ang ilang mga dynamic na output mula sa JavaScript.
Image - image1.png ~ 5 Mb.
JavaScript - File1.js ~ 3 MB ay isang kernel (pangunahing file) javascript at depende sa html syntactic analysis. Ito ay kinakailangan upang ipakita ang ilang mga dynamic na nilalaman o i-mount ang isang reaksyon / angular bahagi sa pahina.
JavaScript - File2.js ~ 460B ay isang maliit, independiyenteng javascript file na nakikipag-ugnayan sa DOM.
JavaScript - File3.js ~ 1.5 MB ay isang pangalawang js secondary file at depende sa file1.js upang magsagawa ng ilan na may mas mababang priority code. Ang code na ito ay hindi kinakailangan kaagad para sa pag-render ng pahina at makipag-ugnay sa gumagamit; Ipinapakita nito ang mga icon ng mga social network, komento, online na tulong, ilunsad ang ilang mga gawain sa analytics, atbp.
Ngayon ay oras na upang pag-aralan ang iba't ibang mga diskarte
Diskarte-1 [mga script sa seksyon ng ulo]
Sa unang kaso, i-download namin ang lahat ng mga tag ng script sa seksyon ng ulo ng aming HTML. Nasa ibaba ang isang screenshot ng tab ng Network ng Chrome, handa nang makipag-ugnay sa user.
Mga pros:
Ang pagkakasunud-sunod ng code ng iba't ibang mga JS file ay isi-save sa pagkakasunud-sunod kung saan ang mga file ay kasama sa HTML. Sa kasalukuyang halimbawa, kahit na na-download ang File2 at File3 sa File1, ang order ng pagpapatupad ay tama.
Minus:
Sa sitwasyong ito, ang pag-aaral ng HTML syntax ay masuspinde hanggang sa ang lahat ng 3 script ay na-load sa seksyon ng ulo, pinag-aralan at isinagawa. Ang isang walang laman na puting screen ay ipapakita sa user, kahit na ang HTML file ay na-load na [ngunit hindi pinag-aralan]. Ito ay tiyak na hindi mabuti para sa kakayahang magamit.
Wala sa mga script sa itaas ang maaaring ma-access / manipulahin ang pahina ng HTML, bilang DOM ay hindi pa handa. Ang isa sa mga posibleng solusyon para sa pagpoproseso ng problemang ito ay ang pakikinig ng domcontentloaded event, at pagkatapos ay ang pagpapatupad ng code pagkatapos nito. Ang DomContentLoeedDigital ay na-trigger kapag ang source HTML na dokumento ay ganap na na-load at pinag-aralan, nang hindi naghihintay para sa pag-upload upang i-download ang mga talahanayan ng estilo, mga imahe.
Diskarte-2 [mga script sa dulo]
Upang mapagtagumpayan ang 2 mga problema na kinakaharap natin sa unang diskarte, hibayin natin ang lahat ng 3 script sa ilalim ng tag ng katawan.
Mga pros: Sinuri ang HTML bago mag-download ng mga script, kaya makakakita agad ang user ng aktwal na nilalaman sa halip na naghihintay ng mga script.
Dahil ang lahat ng mga script ay ginaganap pagkatapos ng pag-parse ng HTML, maaari nilang ma-access ang DOM para sa anumang mga manipulasyon. Ang pagkakasunud-sunod ng mga script ay nai-save.
Minus:
Walang paglago ng pagiging produktibo.
Diskarte-3 [gamit ang async attribute]
Ipinakilala ng HTML5 ang script ng katangian ng ASYNC, na tumutulong sa pag-download ng may-katuturang mga file ng script nang parallel sa isa pang stream nang hindi naaapektuhan ang pagtatasa ng HTML syntax.
Gayunpaman, ang katumbas na script ay susuriin at isagawa sa lalong madaling makumpleto ang pag-download, hindi alintana kung ang pagtatasa ng HTML syntax ay nakumpleto, at magkakaroon ng sanggunian sa elemento ng DOM sa partikular na puntong ito.
Dito maaari mong malinaw na makita na file2.js ay na-load sa HTML file. Gayunpaman, habang ang browser ay naglo-load ng file2, hindi ito suspindihin ang syntactic html analysis at dahil dito, sa oras ng pagpapatupad nito, nagkaroon siya ng reference sa placeholder ng HTML upang makapasok sa dynamic na nilalaman.
Mga pros: Dahil ang mga script ay na-load sa isa pang stream, ang html syntax analysis ay hindi suspendido, at ang user ay makakakita ng agarang nilalaman sa halip na isang puting walang laman na screen. Ang pangunahing pagtaas sa pagganap, i.e. Domcontentloaded oras nabawasan mula sa 47.68 segundo hanggang 21.12 segundo at 55% pagtaas.
Minus:
Ang pagkakasunud-sunod ng pagpapatupad ng JS ay hindi nai-save. Ginagawa ito sa naaangkop na order ng boot, at hindi pinagana ang pagkakasunud-sunod ng mga script sa loob ng HTML. Ang suporta sa browser ay hindi suportado sa mga lumang web browser, iyon ay, ibig sabihin 9 at sa ibaba.
Ano ang mangyayari kung ang JS ay na-load bago ang elemento ng DOM ay magagamit? Ang isang error ay itatapon.
Tandaan: Ang paglalagay ng mga script sa attribute ng Async sa ilalim ng seksyon ng katawan ay walang silbi at katumbas na diskarte-2.
Diskarte-4 [gamit ang defer attribute]
Ang defer attribute ay gagawin lamang ang script pagkatapos lamang makumpleto ang pag-parse ng HTML. Ang isang napakahalagang punto na isinasaalang-alang dito ay hindi pa sinusuportahan ng Chrome ang pagkaantala at hindi nakakaapekto sa tagal ng domcontentloaded. Gayunpaman, gumaganap ito ng mga script sa dulo ng pagtatasa ng HTML syntax.
Mga pros:
Ang pagkakasunud-sunod ng mga script ng pag-import ay nai-save. Kaya, ang file3.js ay ginaganap lamang pagkatapos makumpleto ang pag-download at pagpapatupad ng file1, kahit na ang file3 ay na-load nang mas maaga.
Suporta sa Browser - Mas mahusay na suporta para sa mga browser kumpara sa attribute ng Asyns, i.e. bahagyang suportado sa IE v6-9
Maaaring ma-access ng mga script ang DOM, dahil ito ay ginaganap lamang pagkatapos ng buong pag-parse ng HTML.
Minus:
Sa una, naisip ko na ang pagkaantala ay ang pinakamahusay na pagpipilian kaysa sa Asynchrony, ngunit natagpuan na ang Chrome ay hindi pa rin sinusuportahan ito [Bersyon 71.0.3578.98] at hindi nakakaapekto sa tagal ng domcontentloaded.
Gayunpaman, ito ay gumagana tulad ng inaasahan, sa Firefox na may isang makabuluhang pagpapabuti sa pagganap.
Mga konklusyon
Mas mainam na ilagay ang mga tag ng script sa seksyon ng ulo sa attribute ng Async para sa mga aklatan ng third-party na nakasalalay sa Google Analytics, Google ReCapcha o iba pang bagay na hindi nangangailangan ng DOM access, dahil ang kaukulang mga script ay puno ng parallel, ngunit ginanap kaagad.
Gamitin ang Defer para sa lahat ng iba pang mga script na na-download sa seksyon ng ulo, dahil sila ay nai-download din sa kahanay, ngunit naisakatuparan lamang matapos ang pagtatasa ng HTML at DOM Syntax ay handa na para sa pag-access / pagmamanipula.
Maaari mo ring gamitin ang isang kumbinasyon ng domcontentloaded listener sa loob ng asynchronous script upang magsagawa ng pag-andar sa ibang pagkakataon. Mangyaring iwanan ang iyong mga opinyon at konklusyon sa mga komento, at natutuwa akong talakayin sila sa iyo.
Ang may-akda ng materyal na ito ay akin - Pahwanks Yuri. Nagbibigay ako ng mga serbisyo para sa pagsusulat ng mga programa sa mga wika ng Java, C ++, C # (pati na rin ang pagpapayo sa mga ito) at paglikha ng mga site. Nagtatrabaho ako sa mga site sa CMS OpenCart, WordPress, Modx at nakasulat sa sarili. Bilang karagdagan, nagtatrabaho ako nang direkta sa JavaScript, PHP, CSS, HTML - iyon ay, maaari kong baguhin ang iyong website o tulong sa web programming.
Ang mga nakakonektang script (JavaScript) ay hinaharangan ang paglo-load ng HTML code. Kapag ang browser (parser) ay dumating sa tag
At ang mga sumusunod na halimbawa ay nagpapakita kung paano ilagay (isang inline) na script sa loob ng
Module Fallback.
Mga browser na sumusuporta sa halaga ng module para sa uri ng katangian Huwag pansinin ang anumang script na may isang katangian ng nomodule. Na nagbibigay-daan sa iyo upang gamitin ang mga script ng module habang nagbibigay din ng nomodule -marked fallback script para sa mga di-sumusuporta sa mga browser.
Maraming tao ang nag-apela sa akin sa problema ng paglulunsad ng salita sa OS X Yosemite, na lumabas ng ilang mga araw na nakalipas. Ang problema ay...
Kamakailan lamang, ang administrasyon ng social network ay hindi tumigil sa mga gumagamit ng iba't ibang mga pagbabago, kapaki-pakinabang at hindi masyadong. Anyway, ...
Kung saan ang iTunes store ay nag-download ng firmware
Pagkonekta ng Apple Keyboard, Magic Trackpad at Magic Mouse sa Windows PC
Hissing, ingay, pagkaluskos at iba pang mga labis na tunog sa mga haligi at mga headphone - kung paano hanapin at alisin ang dahilan?
Ang laptop ay lumiliko pagkatapos ng paglilinis mula sa dust.
Ang processor ay pinainit, ano ang dahilan