Werfspoed en asinchrone Javascript

asynchrone

Alhoewel ek baie ontwikkel, klassifiseer ek myself nie as 'n ware ontwikkelaar nie. Ek kan dinge op 'n bladsy programmeer en rondskuif en laat werk. 'N Ware ontwikkelaar verstaan ​​hoe om die kode te ontwikkel sodat dit geskaal kan word, nie baie hulpbronne kan opneem nie, vinnig kan laai, later maklik kan verander en steeds kan werk.

Die moeilike plek wat bemarkers plaas, is om albei 'n baie vinnige webwerf en neem steeds integrasies en sosiale elemente in wat afhanklik kan wees van hoe vinnig u werf sal laai. Een so 'n voorbeeld is sosiale knoppies. Op Martech het ons sosiale knoppies op elke bladsy op die webwerf. Dus ... as Facebook-bronne eendag stadig laai, vertraag dit ons webwerf. Voeg dan Twitter, Pinterest, Buffer, ens. Daarby en die kans dat u webwerf vinnig laai, word tot feitlik niks verminder nie.

Dit staan ​​bekend as sinchrone laai. U moet een element laai voor jy laai die volgende element. As u items asynchroon kan laai, kan u items laai sonder om van mekaar afhanklik te wees. U kan die spoed van u werf drasties verbeter deur elemente asinchronies te laai. Die probleem is dat die out-of-the-box-skrifte wat hierdie ondernemings u bied, byna nooit geoptimaliseer is om asynchroon te werk nie.
asynchrone

U kan sien wat u bladsye beïnvloed deur 'n toets op Pingdom uit te voer:
pingdom bladsy laai

Asinchrone Javascript stel u in staat om kode te skryf wat elemente vertel om te laai na die bladsy is heeltemal gelaai. Geen afhanklikhede nie! Dus, u bladsy laai en sodra dit voltooi is, begin 'n script wat die ander elemente laai - in hierdie geval ons sosiale knoppies. As u 'n ontwikkelaar is, kan u 'n wonderlike artikel lees, Lazy Asynchrone Javascript laai.

Hier is 'n uittreksel oor hoe u dit ordentlik kan doen van Emil Stenström:

(funksie () {funksie async_load () {var s = document.createElement ('script'); s.type = 'text / javascript'; s.async = waar; 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); anders window.addEventListener ('load', async_load, false);}) ();

Die resultaat is as hierdie derdeparty-integrasies afneem of stadig loop, dit nooit beïnvloed dat u kernbladsy-inhoud verskyn nie. As u die bron van ons bladsy sien, sien u dat ek al die bykomende sosiale skrifte laai wat hierdie tegniek gebruik. Die proses het ons werf se spoedsekondes verbeter - en verstik nie tydens die laai nie. Ons het nie al ons eksterne afhanklikhede omgeskakel na Asinchrone Javascript, maar ons sal.

Wat dink jy?

Hierdie webwerf gebruik Akismet om spam te verminder. Leer hoe jou opmerking verwerk is.