Webhelysebesség és aszinkron Javascript

aszinkron

Bár sokat fejlődök, nem sorolom magam igazi fejlesztőnek. Programozni és mozgatni tudom a dolgokat egy oldalon, és működőképessé tenni. Egy igazi fejlesztő megérti, hogyan kell úgy fejleszteni a kódot, hogy méretezhető legyen, ne vegyen igénybe sok erőforrást, gyorsan töltsön be, később könnyen módosítható és továbbra is működjön.

Az a nehéz pont, amelybe a marketingeseket beleteszik, hogy mindkettőnek van egy nagyon gyors weboldal és továbbra is tartalmaz integrációkat és közösségi elemeket, amelyek függőséget teremthetnek attól, hogy milyen gyorsan töltődik be webhelye. Ilyen például szociális gombok. A Martech esetében a webhely minden egyes oldalán találhatók szociális gombok. Tehát ... ha a Facebook erőforrásai egy napon lassan töltődnek be, lelassítja webhelyünket. Ezután adja hozzá ehhez a Twittert, a Pinterestet, a Puffert stb., És a webhely gyors betöltési esélyei gyakorlatilag semmire sem csökkennek.

Ezt szinkron betöltésnek nevezik. Be kell fejeznie egy elem betöltését előtt betölti a következő elemet. Ha az elemeket aszinkron módon tudja betölteni, akkor az elemeket egymástól függetlenül töltheti be. Drasztikusan javíthatja webhelye sebességét azáltal, hogy aszinkron módon tölti be az elemeket. A probléma az, hogy a dobozos szkripteket, amelyeket ezek a vállalatok biztosítanak Önnek, szinte soha nem optimalizálták aszinkron futtatásra.
aszinkron

A Pingdom teszt futtatásával megnézheti, hogy mi befolyásolja az oldal sebességét:
pingdom oldal betöltése

Aszinkron Javascript lehetővé teszi olyan kód írását, amely utasítja az elemeket a betöltésre után az oldal teljesen betöltve. Nincsenek függőségek! Tehát, az oldal betöltődik, és miután elkészült, elindul egy szkript, amely betölti a többi elemet - ebben az esetben a közösségi gombjainkat. Ha fejlesztő vagy, elolvashatsz egy remek cikket, Lusta betöltése aszinkron Javascript.

Itt van egy részlet arról, hogyan kell megfelelően csinálni Emil Stenström-től:

(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.getElementsByTagName (' script ') [0]; x.parentNode.insertBefore (s, x);} if (window.attachEvent) window.attachEvent (' onload ', async_load); else window.addEventListener ('betöltés', async_load, hamis);}) ();

Ennek eredményeként, ha ezek a harmadik felek integrációi leállnak vagy lassan futnak, ez soha nem befolyásolja az alapoldal tartalmának megjelenését. Ha megtekinti oldalunk forrását, akkor látni fogja, hogy az összes további közösségi szkriptet betöltöm ezzel a technikával. A folyamat javította webhelyünk másodpercjeit - és nem fuldoklik a rakodás során. Nem alakítottuk át az összes külső függőségünket Aszinkron Javascript, de fogunk.

Mit gondolsz?

Ez az oldal Akismet-et használ a levélszemét csökkentése érdekében. Ismerje meg, hogyan dolgozik a megjegyzésed.