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