Rychlost webu a asynchronní Javascript

asynchronní

I když hodně vyvíjím, neklasifikuji se jako skutečný vývojář. Mohu programovat a přesouvat věci na stránce a zajistit, aby fungovala. Skutečný vývojář rozumí tomu, jak vyvíjet kód tak, aby jej bylo možné škálovat, nezabírat spoustu zdrojů, rychle načítat, snadno se později upravovat a stále fungovat.

Těžké místo, do kterého se obchodníci zapojují, je mít velmi rychlý web a stále začleňovat integrace a sociální prvky, které mohou vytvářet závislosti na tom, jak rychle se váš web načte. Jeden takový příklad je sociální tlačítka. V Martech máme sociální tlačítka na každé stránce na webu. Takže… pokud se zdroje Facebooku jednoho dne načtou pomalu, zpomalí to náš web. Pak k tomu přidejte Twitter, Pinterest, Buffer atd. A šance na rychlé načítání vašeho webu se sníží prakticky na nic.

To je známé jako synchronní načítání. Musíte dokončit načítání jednoho prvku před načtete další prvek. Pokud je možné načíst položky asynchronně, můžete načíst položky bez vzájemné závislosti. Rychlost webu můžete drasticky zlepšit asynchronním načítáním prvků. Problém je v tom, že hotové skripty, které vám tyto společnosti poskytují, jsou téměř nikdy optimalizovány pro asynchronní běh.
asynchronní

Spuštěním testu na Pingdomu můžete zjistit, co ovlivňuje rychlost vaší stránky:
načtení stránky pingdom

Asynchronní Javascript umožňuje napsat kód, který říká elementům, aby se načetly po stránka je zcela načtena. Žádné závislosti! Vaše stránka se tedy načte a po dokončení se spustí skript, který načte další prvky - v tomto případě naše sociální tlačítka. Pokud jste vývojář, můžete si přečíst skvělý článek, Líné načítání asynchronního Javascript.

Zde je ukázka toho, jak to udělat správně, od Emila Stenströma:

(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 ('load', async_load, false);}) ();

Výsledkem je, že pokud tyto integrace třetích stran nefungují nebo běží pomalu, nikdy to nebude mít vliv na to, že se váš obsah hlavní stránky objeví. Pokud si prohlédnete zdroj naší stránky, uvidíte, že načítám všechny další sociální skripty využívající tuto techniku. Proces vylepšila rychlost našich stránek o sekundy - a během nakládání se neudusí. Nepřevedli jsme všechny naše externí závislosti na Asynchronní Javascript, ale budeme.

Co si myslíte?

Tyto stránky používají Akismet k omezení spamu. Zjistěte, jak jsou vaše údaje komentářů zpracovávány.