Высокопроизводительные AJAX-приложения. Часть 6.

Высокопроизводительный Ajax

Практический Ajax

  • Никогда не применяйте синхронный XMLHttpRequest.
    • http://yuiblog.com/blog/2006/04/04/synchronous-v-asynchronous/.
    • Асинхронное программирование лишь незначительно сложнее.
    • Никогда не блокируйте весь или даже часть интерфейса пользователя при ожидании транзакции.
  • Программно обрабатывайте сетевые тайм-ауты.
  • Решение: используйте YUI Connection Manager: 

    var callback = {     success: function () { /* Что-нибудь делаем */ },     failure: function () { /* Что-нибудь делаем */ },     timeout: 5000 };  YAHOO.util.Connect.asyncRequest("GET", url, callback);

Улучшайте видимые сетевые задержки используя оптимистичный шаблон

  • Если данные проверяются локально (на клиенте при помощи JavaScript) перед их отправкой на сервер, то запрос будет успешным в 99,9% случаев, (также фактическая реакция «сервера» на действия пользователя будет более быстрой).
  • Следовательно, для оптимизации пользовательского восприятия стоит предполагать успешный результат и прибегать к следующему шаблону:
    • Обновить UI при отправке запроса.
    • Заблокировать UI/структуру данных, по возможности, наиболее точечно.
    • Дай пользователю понять, что что-то произошло.
    • Дать пользователю понять, что объект UI заблокирован.
    • Разблокировать UI/структуру данных, если результат был успешным.
    • Максимально мягко обрабатывать возможные ошибки.

Разные советы…

  • Помните о максимальном количестве одновременных HTTP/1.1 соединений.
  • По возможности множьте ваши Ajax-запросы, если ваш сервер это сможет поддерживать.
  • Добавляйте дополнительные сообщения в ответ для Ajax-запроса.
  • Выберите JSON вместо XML в качестве формата обмена данных
    • Доступ к JSON-данным осуществляется проще и требует меньше ресурсов, чем для XML.
    • У JSON меньше накладных издержек.
  • Добавляйте, не спрашивая. Используйте технологию COMET для отправки уведомлений браузеру в режиме реального времени.
  • Рассмотрите возможность использовать локальные данные (local storage) или локальный кеш, запрашивая с сервера только изменения:
    • userData для Internet Explorer
    • Локальные данные для Flash
    • DOM:Storage (стабильное API для хранения данных от WhatWG, реализовано в Firefox 2)
    • Google Gears
    • и т.д.