Высокопроизводительные 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
  • и т.д.