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 webhelye esélye a gyors betöltésre gyakorlatilag semmire sem csökken.

Ezt szinkron betöltésnek nevezik. Be kell fejeznie egy elem betöltését előtt betölti a következő elemet. Ha képes elemeket aszinkron módon betölteni, akkor egymástól függetlenül tölthet be elemeket. Drasztikusan javíthatja webhelye sebességét az elemek aszinkron betöltésével. A probléma az, hogy az e cégek által biztosított dobozon kívüli szkripteket szinte soha nem optimalizálták aszinkron futtatásra.
aszinkron

Láthatja, mi befolyásolja az oldal sebességét, ha tesztet futtat a Pingdom használatával:
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 helyesen 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 fél 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, látni fogja, hogy az összes további közösségi szkriptet betöltem ezzel a technikával. A folyamat javította webhelyünk másodperceit - é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.