JavaScript без задержек

Владимир | | Ajax, JavaScript, Web разработка.

Название получилось довольно громкое 🙂 На самом деле эта статья не об устранении задержек, а скорее об изменении порядка загрузки и выполнения JS скриптов. Но с точки зрения посетителя некоторые задержки действительно исчезнут, точнее они будут там где он ожидает их увидеть 😉

Я как-то путано рассказываю 🙂 , на самом деле все довольно просто.

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

Естественно, я точно знаю, что JavaScript у меня включен и перезагружать ничего не стал. Через две-три секунды сообщение исчезло и на его месте появилось письмо.

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

Раньше я этот момент не замечал, но у меня нет ограничений по скорости на UA-IX трафик, да и сам ukr.net стабильно работает.

Тем не менее, проблема со скоростью загрузки существует и касается всех, а не только крупных порталов.

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

Нужно создать страничку на которой часть данных подгружается ajax запросом. При этом, хотелось бы использовать какую-нибудь библиотеку вроде jQuery. И, конечно, нужно чтобы посетители с отключенным JavaScript видели соответствующие сообщения.

Если решать задачу «в лоб», то сразу же получим проблему с задержками. Как ни крути, но на загрузку библиотеки какое-то время уйдет (установка соединения плюс сама загрузка).

Сообщение «Включите JavaScript…» должно быть вставлено в тело страницы, потому что иначе посетитель с отключенным JS его не увидит.

Поэтому, если код, который убирает это сообщение будет ждать окончания загрузки библиотеки, то какое-то время сообщение будет висеть и путать посетителей с включенным JS.

С другой стороны, нам ведь не обязательно использовать библиотеку для того, чтобы изменить текст в одном из блоков на странице 😉

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

Первая – убирает сообщения «Включите JavaScript…» (эта часть не должна использовать никаких библиотек и должна выполняться прежде всего).

Вторая – выполняет всю остальную работу. Подключать эти скрипты нужно после скриптов библиотек.

Взгляните на следующий пример.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <title>JavaScript Load Delays</title>
    
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    
</head>

<body>

    <div id="dataFromServer">Пожалуйста, включите поддержку JavaScript в браузере и перезагрузите страницу.</div>
    
    <script type="text/javascript">
    //этот код выполняется без использования jQuery
    //убираем сообщение о том, что нужно включить JS
    document.getElementById('dataFromServer').innerHTML = '';
    </script>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
    $(function() {
        //этот код выполняется после загрузки jQuery
        var dataBlock = $('#dataFromServer');
        dataBlock.html('<img src="ajax-loader.gif" /> Подождите, идет загрузка данных');
        $.get('getdata.php', '', function(response) {
            dataBlock.html(response);
        });
    });
    </script>
</body>

</html>

Как видите, страница содержит один блок div с сообщением «Пожалуйста, включите поддержку JavaScript…». Если у посетителя JS отключен, то он его и увидит.

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

В первом находится код, который просто изменяет сообщение в единственном блоке на нашей странице. Обратите внимание, тут используется метод getElementById('dataFromServer'), а не $('#dataFromServer').

Таким образом, этот код будет загружен вместе со страницей и выполнен практически без задержек.

Второй тег script – библиотека jQuery.

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

Как видите, чуда не произошло. Быстрее ничего грузиться не стало. Просто теперь задержка появляется после того, как будет выведено сообщение «Подождите, идет загрузка …».

Посмотреть как это работает, можно на демонстрационной страничке.

Demo

Примечание. PHP скрипт (getdata.php) выглядит так.

<?php
//задержка на 3 секунды
sleep(3);

echo 'Эта строка получена от сервера';

//end of getdata.php

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

Как всегда, я буду рад услышать ваши вопросы и замечания 😉

Постовой

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