Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Асинхронная загрузка шаблонов. #26

Open
misterjt opened this Issue Apr 1, 2013 · 4 comments

Comments

Projects
None yet
2 participants

misterjt commented Apr 1, 2013

Мне все же никак не дает покоя факт синхронной загрузки данных на клиенте. Все таки подвисание браузера пусть даже на 100-200 милисекунд это плохо. А если мне надо загрузить сразу 10-20 шаблонов? А если сервер недоступен или не справляется с нагрузкой, так браузер вообще может секунд 5-10 не реагировать на действия пользователя (передвижение курсора, клики).
http://xmlhttprequest.ru/ вот тут есть пример того, как синхронный запрос блокирует браузер на 3 секунды.
Я написал функцию readFileAsync. Функция предельно проста, она принимает 2 аргумента, первый - файл, второй - колбэк. В колбэк передается единственный параметр - ответ от сервера. Я надеюсь вам не сложно будет заменить синхронную загрузку на асинсхонную. Если вдруг нужна будет помощь, я вам помогу.

readFileAsync = function (file, callback) {
    var AJAX;
    try {
        AJAX = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
        AJAX = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
        AJAX = false;
    }
    }
    if (!AJAX && typeof XMLHttpRequest!='undefined') {
    AJAX = new XMLHttpRequest();
    }
    if (AJAX) {
        AJAX.open('GET', file, true);
        AJAX.send(null);
        AJAX.onreadystatechange = function() {
          if (AJAX.readyState == 4&&AJAX.status == 200) {
                if(typeof callback=="function")callback(AJAX.responseText);
            }
            else if(AJAX.status !== 0 && (AJAX.status < 200 || AJAX.status > 399)) {
                throw new Error ('Failed to load template ' + file);
            }
        }
    } else {
        throw new Error ('Failed to load template ' + file);
    }
}

Пример вызова

readFileAsync("/view/template.html",
function(data){
compiled=eval(data)
})

Вадим, я надеюсь на вас, правда)

Owner

baryshev commented Apr 1, 2013

Проблема не в реализации асинхронной загрузке, в целом вся схема рендеринга становится намного сложнее и медленнее. Если посмотрите историю коммитов - загрузка изначально была асинхронной. И уже потом, я изменил ее на синхронную. Т.к. это решает много проблем и увеличивает скорость работы шаблонизатора в целом. Я описывал причины в предыдущем ответе.

Шаблонизатор будет загржать шаблоны только 1 раз с сервера. Далее они осядут в кеше шаблонизатора, а при перезагрузке страницы браузер возьмет их из локального кеша (если правильно настроены заголовки на сервере). Грубо говоря - пользователь загружает шаблоны 1 раз и заново, только когда они меняются. Для сферы применения JS-шаблонизаторов, вообще операция перезагрузки страницы - крайне редкий сценарий использования. Например я не помню уже, когда обновлял полностью вкладку с Gmail.

На данный момент возврат к асинхонной схеме загрузки не планируется.

Owner

baryshev commented Apr 1, 2013

Как один из вариантов - предвариательный рекурсивный разбор всех шаблонов (наследования и инклуды) и асинхронная загрузка всех зависимостей и только после этого - рендеринг по синхронной схеме. Такую схему работы можно попробовать реализовать для клиентской версии шаблонизатора. Но реализация этого может появиться довольно не скоро (месяц-два-три), т.к. пока очень занят на другом проекте.

misterjt commented Apr 2, 2013

Да, было бы идеально. Я в любом случае собираюсь подключать шаблоны перед загрузкой. Уже была идея перед загрузкой страницы делать асинхронные вызовы $.ajax с помощью jquery, что бы шаблоны осели в кеше браузера, но костыль же.

Вадим, сейчас начал использовать ваш шаблонизатор на клиенте в production. Страницы подглючивают на 2-5 секунд. Очень неприятный момент.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment