Хуткасць сайта і асінхронны Javascript

асінхронны

Хоць я шмат займаюся распрацоўкай, я не адношу сябе да сапраўдных распрацоўшчыкаў. Я магу праграмаваць і перамяшчаць рэчы на ​​старонцы і прымушаць яе працаваць. Сапраўдны распрацоўшчык разумее, як распрацаваць код, каб яго можна было маштабаваць, не займаць шмат рэсурсаў, хутка загружаць, потым лёгка мадыфікаваць і ўсё яшчэ працаваць.

Цяжкае месца, якое ставяць маркетолагі, - гэта мець абодва вельмі хуткі вэб-сайт і па-ранейшаму ўключае інтэграцыі і сацыяльныя элементы, якія могуць стварыць залежнасць ад хуткасці загрузкі вашага сайта. Адзін з такіх прыкладаў сацыяльныя кнопкі. У Martech мы маем сацыяльныя кнопкі на кожнай старонцы сайта. Такім чынам ... калі рэсурсы Facebook адзін дзень загружаюцца павольна, гэта прыводзіць да запаволення нашага сайта. Затым дадайце да гэтага Twitter, Pinterest, буфер і г.д., і шанцы вашага сайта хутка загрузіцца практычна да нуля.

Гэта вядома як сінхронная загрузка. Вы павінны скончыць загрузку аднаго элемента да вы загружаеце наступны элемент. Калі вы можаце загружаць элементы асінхронна, вы можаце загружаць элементы без залежнасці адзін ад аднаго. Вы можаце значна палепшыць хуткасць вашага сайта, загружаючы элементы асінхронна. Праблема ў тым, што гатовыя сцэнарыі, якія прадастаўляюць вам гэтыя кампаніі, амаль ніколі не аптымізуюцца для працы ў асінхронным рэжыме.
асінхронны

Вы можаце ўбачыць, што ўплывае на хуткасць вашай старонкі, правёўшы тэст на Pingdom:
загрузка старонкі pingdom

Асінхронны Javascript дазваляе напісаць код, які кажа элементам загружацца пасля старонка цалкам загружана. Ніякіх залежнасцей! Такім чынам, ваша старонка загружаецца, і калі яна будзе завершана, запускаецца сцэнар, які загружае іншыя элементы - у гэтым выпадку нашы сацыяльныя кнопкі. Калі вы распрацоўшчык, вы можаце прачытаць выдатны артыкул, Лянівая загрузка асінхроннага Javascript.

Вось фрагмент таго, як гэта правільна зрабіць, ад Эміля Стэнстрэма:

(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); інакш window.addEventListener ('загрузіць', async_load, ілжыва);}) ();

Вынік заключаецца ў тым, што, калі гэтыя інтэграцыйныя працэсы не працуюць альбо працуюць павольна, гэта ніколі не паўплывае на тое, каб змест вашай асноўнай старонкі з'яўляўся. Калі вы праглядзіце крыніцу нашай старонкі, вы ўбачыце, што я загружаю ўсе дадатковыя сацыяльныя сцэнарыі, выкарыстоўваючы гэты метад. Працэс палепшыла хуткасць секунд нашага сайта - і не задыхаецца падчас загрузкі. Мы не пераўтварылі ўсе нашы знешнія залежнасці Асінхронны Javascript, але мы будзем.

Што вы думаеце?

Гэты сайт выкарыстоўвае Akismet для барацьбы са спамам. Даведайцеся, як дадзеныя апрацоўваюцца каментар.