1. організація асинхронности
2. Асинхронний код віджету групи ВКонтакте
3. Асинхронний код рекламного блоку Google Adsense
4. Асинхронний код коментарів ВКонтакте

У середніх людей (таких, як я, наприклад), синхронність асоціюється з синхронним плаванням: коли ніжки дівчат над поверхнею води одночасно показують однакові фігури. Тобто слово «синхронно» стає синонімом слову «виконується одночасно», тому що дуже заворожують ці ніжки ...

Але для програміста синхронність - це послідовний ланцюг подій, коли за 1-м подією слід 2-е, а за 2-м - 3-е, але ніяк раптом 3-е подія не виконається раніше 2-го, навіть якщо втомиться чекати його закінчення. Відповідно, асинхронність для програміста означає, що події виконуються паралельно, і можливо, що 3-е подія виконається раніше 2-го і навіть раніше 1-го. Подивимося тепер, що синхронність і асинхронність значать для наших сайтів.

Якщо на вашому сайті використовується конструкція виду:

<Script src = "..."> </ script>

А вона напевно використовується раз 5-10. Те браузер затримує отрисовку сторінки на цьому місці і чекає завантаження скрипта за посиланням. Іноді це може бути корисно. Наприклад, у вас на сайті встановлений JS-лічильник переглядів статей:

<Script src = "..."> </ script> <script> document.write (view_count) </ script>

Ваш скрипт при виклику встановлює значення змінної view_count, яку ви далі виводите. Але, якщо ви будете використовувати асинхронний код, то отримаєте не кількість переглядів, а помилку. Тому що на завантаження вашого скрипта, зазначеного за посиланням src = "...", знадобиться час, так що document.write буде виконаний ще до того, як буде задана змінна view_count.

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

Припустимо, у вас такий макет сайту, як показано на зображенні. Десь в тексті статті або навіть в її початку ви встановили рекламу Google Adsense, тому що в цьому місці вона має максимальний CTR. Звичайно, реклама під час кожного показу сторінки запитується з адрес Google. Відбувається це зазвичай швидко, тому що більшість людей вже давно не користуються модемним інтернетом. Але у тих відвідувачів сайту, які мають нестабільний з'єднання, рекламний код завантажується іноді і по кілька хвилин. А якщо на сторінці кілька рекламних блоків, а в кінці ще й форма коментарів ВКонтакте? Хотілося б, щоб відвідувач не мав проблем з переглядом сайту, а певний віджет відображався б, як тільки буде завантажений його код.

Але відбувається інакше. Відвідувач бачить такий ось «зламаний» сайт до тих пір, поки не буде отримано код рекламного блоку. Зазвичай це лише кілька секунд (навіть цього хотілося б уникнути), а буває, що і кілька хвилин. Звичайно, така обставина не сприяє зменшенню показника відмов. Чи не вважаєте ви таку ціну занадто високою за сумнівну радість відвідувача будь-що-будь подивитися рекламне оголошення?

Однак, коли ми зробимо все скрипти нашого сайту асинхронними, відвідувач зможе переглядати основний вміст, поки додаткові блоки відображаються в міру завантаження.

організація асинхронности

У специфікації елемента script сказано, що досить вказати атрибут async, щоб скрипт завантажився асинхронно і виконався відразу ж після завантаження. Є ще атрибут defer - з ним скрипт теж завантажується асинхронно, але виконується після завантаження сторінки. Ура ?! Не зовсім. Поясню на прикладі віджета групи ВКонтакте. Ось його код, в якому я до виклику скрипта додав атрибут async:

<Script type = "text / javascript" src = "http://vk.com/js/api/openapi.js" async> </ script> <script type = "text / javascript"> VK.Widgets.Group ( "vk_groups _...", {mode: 0, width: "165", height: "360"}, 485 ...); </ Script>

Звичайно, приклад не робочий (і не тільки через крапок). Просто, до моменту обробки браузером рядка «VK.Widgets.Group (...)" не буде ще створено об'єкт «VK» - він буде створений тільки після завантаження і виконання «openapi.js», але тоді промальовування сторінки вже піде вперед. Якщо тільки ми не викличемо функцію VK.Widgets.Group (...) після того, як буде завантажений скрипт «openapi.js». Але як визначити цей момент? Навіть якщо ми помістимо виклик функції в самий кінець сторінки, не факт, що браузер встигне завантажити скрипт до того, як домалює сторінку до кінця. Скажу більше: ця стаття як раз створена для того, щоб браузер малював вашу сторінку за частки секунди!

Асинхронний код віджету групи ВКонтакте

Перемогти створену задачу допоможе ось цей код:

<Div id = "vk_groups"> </ div> <script type = "text / javascript" src = "http://vk.com/js/api/openapi.js" async> </ script> <script type = "text / javascript"> (function start () {if (window.VK) {VK.Widgets.Group ( "vk_groups", {ваші_параметри}, ваш_id);} else setTimeout (start, 500);}) (); </ Script>

Принцип простий, як перший радянський трактор. Ми виконуємо перевірку існування об'єкта «VK» в нашому вікні, і якщо його ще немає (значить, скрипт ВК ще не завантажився), то призначаємо повторну перевірку через півсекунди. А коли під час чергової перевірки ми виявимо об'єкт «VK», викличемо функцію відображення групи ВКонтакте. Якщо ви правильно вказали «ваші_параметри» і «ваш_id» (їх необхідно скопіювати з оригінального коду, отриманого на сайті vk.com), то код віджету групи ВКонтакте буде викликаний асинхронно, і промальовування сторінки не призупиниться на моменті виклику скрипта ні на секунду.

Тепер замінимо синхронний код рекламного блоку Google Adsense на асинхронний. Зараз він виглядає у нас якось ось так, і гальмує завантаження сторінки:

<Script type = "text / javascript"> google_ad_client = "ca-pub -..."; google_ad_slot = "..."; google_ad_width = x; google_ad_height = y; </ Script> <script type = "text / javascript" src = "http://pagead2.googlesyndication.com/pagead/show_ads.js">

Асинхронний код рекламного блоку Google Adsense

Тут я нічого придумувати не буду, а наведу приклад коду з довідкового розділу офіційного сайту Google:

<Ins class = "adsbygoogle" style = "display: block; width: 728px; height: 90px" data-ad-client = "ca-pub -..." data-ad-slot = "..."> < / ins> <script> (adsbygoogle = window.adsbygoogle || []) .push ({}); </ Script>

І ще обов'язково треба зробити асинхронну завантаження скрипта Google Adsense. Про всяк випадок, краще в кінці сторінки (тобто після самого останнього рекламного блоку в коді сторінки):

<Script type = "text / javascript" src = "http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async> </ script>

Якщо мені не вірите чи сумніваєтеся (все ж, справа стосується ваших грошей), ось офіційне джерело - подивіться там, заодно прочитайте відповіді на актуальні питання.

Отже, тепер ви самі можете зробити виклики всіх скриптів свого сайту асинхронними, і сторінка ваша з усім текстом буде отрисовать браузером моментально, а не малюватися блоками, лякаючи развалами вёрскі.

Вище я показав приклад виклику функції відображення віджета ВКонтакте при асинхронної завантаження скрипта за допомогою таймера. Але, при використанні сучасних технологій програмування, можна викликати будь-який код без таймера після того, як потрібний скрипт буде завантажений. Зрозуміло, навіть при асинхронної завантаження. Наприклад, можна використовувати для цього функцію фреймворка jQuery. Звичайно, в тому випадку, якщо ви вже підключили цей фрейморк для створення цікавих анімацій і інших штучок, а спеціально заради цього підключати зайві 50 кілобайт не варто.

Для різноманітності приведу приклад виклику блоку коментарів ВКонтакте з асинхронної завантаженням за допомогою jQuery.

Асинхронний код коментарів ВКонтакте

Якщо ви ще не використовуєте на сайті коментарі ВКонтакте, вам спочатку треба зареєструвати сайт. Для реєстрації сайту йдемо на цю сторінку (Необхідно ввійти в систему). І вказуємо необхідні параметри.

При цьому ви отримаєте синхронний код, який вам треба уважно подивитися, щоб вирішити, які налаштування блоку коментарів ВКонтакте будуть для вас індивідуальні - вам треба буде їх вписати в мій асинхронний код:

<Div id = "vk_comments"> </ div> <script type = "text / javascript"> (function ($ j) {$ j (function () {$ j.ajax ({url: 'vk.com/js /api/openapi.js ', cache: true, dataType:' script ', success: function () {VK.init ({apiId: ваш_id, onlyWidgets: true}); VK.Widgets.Comments ( "vk_comments", { limit: 4, width: "640", attach: "*"});}});})}) (jQuery); </ Script>

Як ви здогадалися, замість ваш_id використовується ваш id, а замість limit: 4, width: "640", attach: "*" - ваші настройки. І ще, якщо ви на одній сторінці використовуєте і коментарі ВКонтакте, і віджет, то в останньому прикладі поруч з викликом функції VK.Widgets.Comments додайте і виклик VK.Widgets.Group.

До речі, в jQuery є функція getScript (), яку можна використовувати замість ajax () ... Але не потрібно. Незважаючи на те, що функція getScript () призначена спеціально для завантаження скриптів з їх подальшим виконанням (окремий випадок функції ajax ()), вона не кешируєт завантажуються скрипти. Тобто скрипт буде завантажуватися при кожному завантаженні сторінки. У моєму ж прикладі скрипт буде завантажений тільки при першому запиті (можливо, цей скрипт вже завантажений при відвідуванні іншого сайту з віджетом ВКонтакте) - на що витратяться секунди, а в Далі буде братися з кеша браузера, для чого достатньо часток секунди.

На цьому «просунуті» веб-майстри відправляються колупати код своїх сайтів, а не настільки просунуті з благоговінням думають, скільки ж у світі всього цікавого і незбагненного! Але і тих, і інших я чекаю в коментарях. Напишіть, виклик яких скриптів у вас здійснюється синхронно, а ви хотіли б зробити (або зробили) асинхронним.

До речі, я тут як швець без запог, тому що на цьому сайті у мене скрипти завантажуються не асинхронно. Адже в першу чергу на доопрацювання відправляються приносять дохід сайти, а цей сайт у мене тільки час забирає. Ось приклад сайту , На якому всі скрипти завантажуються асинхронно, а саме: jquery, yandex metrika, yandex context, adsbygoogle, vk openapi, functions.js, share42 (соціальні кнопки). Як це реалізовано і як синхронізована робота скриптів - без праці читається в вихідному коді сторінки і в файлі functions.js.