Bilis ng Site at Asynchronous Javascript

asynchronous

Habang gumagawa ako ng maraming pag-unlad, hindi ko inuri ang aking sarili bilang isang tunay na developer. Maaari kong program at ilipat ang mga bagay-bagay sa isang pahina at gawin itong gumana. Naiintindihan ng isang totoong developer kung paano paunlarin ang code upang ma-scale ito, hindi kumuha ng maraming mapagkukunan, mabilis na mai-load, madaling mabago sa paglaon at gagana pa rin.

Ang matigas na lugar na inilalagay ng mga marketer ay ang parehong magkaroon ng napakabilis na web site at isinasama pa rin ang mga pagsasama at mga elementong panlipunan na maaaring lumikha ng mga pagtitiwala sa kung gaano kabilis mag-load ang iyong site. Ang isang tulad halimbawa ay mga pindutan ng lipunan. Sa Martech, mayroon kaming mga social button sa bawat solong pahina sa site. Kaya ... kung mabagal ang pag-load ng mga mapagkukunan ng Facebook isang araw, pinapabagal nito ang aming site. Pagkatapos ay idagdag ang Twitter, Pinterest, Buffer, atbp. At ang mga pagkakataong mag-load ng mabilis ng iyong site ay nabawasan sa halos wala.

Kilala iyon bilang kasabay na paglo-load. Kailangan mong tapusin ang pag-load ng isang elemento bago load mo ang susunod na elemento. Kung ang iyong kakayahang mag-load ng mga item nang hindi magkakasabay, nagagawa mong mag-load ng mga item nang walang pagtitiwala sa isa't isa. Maaari mong lubos na mapabuti ang bilis ng iyong site sa pamamagitan ng pag-load ng mga elemento nang hindi magkakasabay. Ang problema ay ang mga out-of-the-box na script na ibinibigay sa iyo ng mga kumpanyang ito ay halos hindi na-optimize upang magpatakbo ng hindi magkakasabay.
asynchronous

Maaari mong makita kung ano ang nakakaapekto sa bilis ng iyong pahina sa pamamagitan ng pagpapatakbo ng isang pagsubok sa Pingdom:
pag-load ng pahina ng pingdom

Hindi magkakaugnay na Javascript Pinapayagan kang magsulat ng code na nagsasabi sa mga elemento na mag-load pagkatapos ang pahina ay ganap na na-load. Walang dependencies! Kaya, naglo-load ang iyong pahina at sa sandaling nakumpleto na ito, isang iskrip na nagpasimula na naglo-load ng iba pang mga elemento - sa kasong ito ang aming mga social button. Kung ikaw ay isang developer, maaari mong basahin ang isang mahusay na artikulo, Tamad sa Pag-load ng Asynchronous Javascript.

Narito ang isang snippet kung paano ito gawin nang maayos mula sa Emil Stenström:

(function () {function async_load () {var s = document.createElement ('script'); s.type = 'text / javascript'; s.async = true; s.src = 'http://buttondomain.com /script.js '; var x = document.getE ElementByTagName (' script ') [0]; x.parentNode.insertBefore (s, x);} kung (window.attachEvent) window.attachEvent (' onload ', async_load); iba pa window.addEventListener ('load', async_load, false);}) ();

Ang resulta ay kung ang mga pagsasama ng third party na ito ay bumaba o tumatakbo ng mabagal, hindi ito nakakaapekto sa paglabas ng nilalaman ng iyong pangunahing pahina. Kung titingnan mo ang mapagkukunan ng aming pahina, makikita mo na ako ay nakakarga ng lahat ng mga karagdagang mga social script na gumagamit ng diskarteng ito. Ang proseso pinahusay ang segundo ng bilis ng aming site - at hindi mabulunan habang naglo-load. Hindi namin na-convert ang lahat ng aming panlabas na mga dependency sa Hindi magkakaugnay na Javascript, ngunit gagawin namin.

Ano sa tingin ninyo?

Ang site na ito ay gumagamit ng Akismet upang mabawasan ang spam. Alamin kung paano naproseso ang data ng iyong komento.