Назва вийшло досить гучне 🙂 Насправді ця стаття не про усунення затримок, а скоріше про зміну порядку завантаження і виконання JS скриптів. Але з точки зору відвідувача деякі затримки дійсно зникнуть, точніше вони будуть там де він очікує їх побачити 😉

Я якось плутано розповідаю 🙂, насправді все досить просто.

Нещодавно на поштовому сервері ukr.net (в web інтерфейсі) я помітив досить неприємний баг. Завантажується web інтерфейс, я клікаю по листу і замість повідомлення «Завантаження даних ...» бачу «Для перегляду листи включити JavaScript у браузері і перезавантажте сторінку».

Природно, я точно знаю, що JavaScript у мене включений і перезавантажувати нічого не став. Через дві-три секунди повідомлення зникло і на його місці з'явився лист.

Роботу скриптів ukr.net я аналізувати не став, але в загальному-то про причини можна здогадатися. Швидше за все, виникла затримка при завантаженні JS файлу зі скриптом, який повинен змінювати «Увімкніть JS ...» на «Завантаження даних ..».

Раніше я цей момент не помічав, але у мене немає обмежень по швидкості на UA-IX трафік, та й сам ukr.net стабільно працює.

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

Розглянемо реальну ситуацію.

Потрібно створити сторінку на якій частина даних подгружается ajax запитом. При цьому, хотілося б використовувати якусь бібліотеку на кшталт jQuery. І, звичайно, потрібно щоб відвідувачі з відключеним JavaScript бачили відповідні повідомлення.

Якщо вирішувати завдання «в лоб», то відразу ж отримаємо проблему із затримками. Як не крути, але на завантаження бібліотеки якийсь час піде (установка з'єднання плюс сама завантаження).

Повідомлення «Увімкніть JavaScript ...» має бути вставлено в тіло сторінки, тому що інакше відвідувач з відключеним JS його не побачить.

Тому, якщо код, який прибирає це повідомлення буде чекати закінчення завантаження бібліотеки, то якийсь час повідомлення буде висіти і плутати відвідувачів з включеним JS.

З іншого боку, нам адже не обов'язково використовувати бібліотеку для того, щоб змінити текст в одному з блоків на сторінці 😉

Тобто ми можемо розбити JS код на дві частини.

Перша - прибирає повідомлення «Увімкніть JavaScript ...» (ця частина не повинна використовувати ніяких бібліотек і повинна виконуватися перш за все).

Друга - виконує всю іншу роботу. Підключати ці скрипти потрібно після скриптів бібліотек.

Погляньте на наступний приклад.

Як бачите, сторінка містить один блок div з повідомленням «Будь ласка, увімкніть підтримку JavaScript ...». Якщо у відвідувача JS відключений, то він його і побачить.

В кінці сторінки йдуть три тега script.

У першому знаходиться код, який просто змінює повідомлення в єдиному блоці на нашій сторінці. Зверніть увагу, тут використовується метод getElementById ( 'dataFromServer'), а не $ ( '# dataFromServer').

Таким чином, цей код буде завантажений разом зі сторінкою і виконаний практично без затримок.

Другий тег script - бібліотека jQuery.

Третій - код, який відправляє ajax запит до сервера. Тут вже використовується jQuery.

Як бачите, дива не сталося. Швидше нічого грузиться не стало. Просто тепер затримка з'являється після того, як буде виведено повідомлення «Зачекайте, йде завантаження ...».

Подивитись як це працює, можна на демонстраційній сторінці.

Примітка. PHP скрипт (getdata.php) виглядає так.

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

Як завжди, я буду радий почути ваші питання і зауваження 😉

постовий

питання: скільки коштують послуги бухгалтера ? Відповідь: від 3000 р. у місяць.