Алексей Андросов "HTML5 в Я.Почте"
0 likes1,242 views
Документ обсуждает архитектуру автообновления почты в Яндексе, акцентируя внимание на использовании WebSocket для поддержания актуальности почтового ящика без перезагрузки страницы. Также рассматриваются недостатки WebSocket и Flash, кэширование статики с помощью localStorage, а также проблемы с кросс-доменными запросами. В результате описан подход, позволяющий эффективно обрабатывать данные, минимизируя задержки и обеспечивая устойчивую работу приложения.
![Cross-site XHR with CORS
Проблемы
— Не все прокси-сервера пропускают
заголовки Access-Control-Allow-Origin
xdr['onerror'] = function(){
// fallback до обычный системы загрузки
}
— XDomainRequest не является заменой
XHR, имеет ограниченный функционал
— В IE9 в режиме IE9 виснут запросы
xdr['onprogress'] = function() {};
26](https://image.slidesharecdn.com/androsovekb-120731045201-phpapp02/85/HTML5-26-320.jpg)
Алексей Андросов "HTML5 в Я.Почте"
- 1. HTML5 в Я.Почте Алексей Андросов Старший разработчик интерфейсов Я.Субботник, Екатеринбург, 2 июля 2011 года
- 3. WebSocket, или как работает автообновление ящика в Я.Почте 3
- 4. Автообновление почты Задача: — Поддерживать ящик в актуальном состоянии без перезагрузки страницы — Надо ходить за данными в другой домен 4
- 5. Автообновление почты Решение: — WebSocket (реализация в браузере или на Flash) — В качестве запасного варианта iframe + long-polling + postMessage 5
- 6. Почему WebSocket? — Постоянное соединение — Честный двухсторонний обмен данными без лишних телодвижений — Не учитывается в ограничениях на количество одновременных подключений, т.к. другой протокол — Возможность кроссдоменных запросов — Chrome 4+, Safari 5+, Firefox 6 (14% пользователей Я.Почты) — Flash есть почти у всех :-) 6
- 7. Сервер Xiva (HTTP Extended Event Automata) Лицензия GPL, github.com/highpower/xiva — Специально написан, чтобы держать много подключений — Занимается только доставкой push- уведомлений — Каждый сервис может послать туда сообщение, не задумываясь о его доставке 7
- 8. Что передаётся? { "operation": "тип операции", "data": "xml-данные", "lcn": "номер ревизии", "connection_id": "id соединения" } — lcn нужен, чтобы понимать, не пропустили ли мы сообщений, например, при разрыве соединения — connection_id нужен, чтобы понимать, откуда произошло изменение 8
- 9. Автообновление почты Недостатки Flash — Плохая реализация для не-Windows OS — После реализации WSS (аналог HTTPS) размер возрастает до 200кб — Если что-то пошло не так, то Flash сразу падает, нельзя получить лог ошибки — Отказываемся в пользу Cross-site XHR и Server-side Events 9
- 10. Автообновление почты Недостатки WebSocket — Протокол и API до сих пор не утверждены как стандарт — В JS API нельзя получить заголовки ответа. Например, вместо 403 надо отвечать специальным сообщением — При потере интернета не всегда закрывается соединение. Нужны ping- pong события для проверки соединения 10
- 11. Автообновление почты FAIL WebSocket — В ноябре 2010 года были опубликованы исследования протокола. Из-за багов в реализации прозрачных прокси- серверов с помощью протокола можно подменять кэш сервера — По-умолчанию выключен в Firefox и Opera, блокируется некоторыми антивирусами — В апреле вышла новая спецификация, Mozilla она устроила (релиз Firefox 6 в конце лета) 11
- 12. Что получилось? — Простая реализация поддержки ящика в актуальном состоянии на современных клиентских технологиях — Постоянное соединение с сервером, а значит — минимальные задержки в доставке 12
- 13. Cross-site XHR + localStorage, или как грузится Я.Почта 13
- 14. Кэширование статики Проблема — Для инициализации надо загрузить 1Мб (gzip - 350кб) статики (css+js+xsl) — Браузерное кэширование работает, но возникают задержи, т. к. браузер пытается понять, надо ли обновить файл — Браузерный кэш может вытесниться другими файлами 14
- 15. Кэширование статики Решение — Выносим логику инвалидации кэша на сторону JavaScript — Для этого нужны кроссдоменный XHR, чтобы получить содержимое файлов, и localStorage, чтобы их хранить 15
- 16. Кэширование статики Получаем — Данные из localStorage не удалятся, пока мы этого не захотим или пользователь их не очистит — Нет задержек при обращении к кэшу — Разгружаем статический кластер 16
- 17. localStorage — Локальное постоянное key-value хранилище текстовых данных — Chrome 4+, Firefox 3.5+, IE8+, Opera 10.5+, Safari 4+. — 88% пользователей Я.Почты 17
- 18. Что хранить в localStorage? — Версию формата (вдруг захотим поменять) — Версию проектов (при выкладке новой версии полностью удаляем все данные) — Каждый запрошенный файл — в отдельном ключе 18
- 19. Что хранить в localStorage? <moduleName>+ <guardName_1>=<guardValue_1> … <guardName_N>=<guardValue_N> — moduleName — унифицированное имя файла — guard — это локаль, тема или версия mail.mailbox_jane.js+mail-version=3.3.11-2+locale=ru Такая схема позволяет удалять ненужные ключи при смене языка или темы 19
- 21. localStorage Главное правило Все обращения к методам и свойствам надо оборачивать в try-catch! 21
- 22. localStorage Ограничения на домен A mostly arbitrary limit of five megabytes per origin is recommended. dev.w3.org/html5/webstorage/#disk-space Все браузеры следуют этой рекомендации, но… 22
- 23. localStorage Ограничения на домен — Chrome, Safari используют SQLite и UTF- 16, поэтому записать можно ~2,5 млн. символов — Fx, — SQLite + UTF-8, ~5 млн. символов — IE — xml, ~5 млн. символов — Opera — xml + base64, ~2 млн. символов, появляется сообщение с просьбой увеличить размер 23
- 24. localStorage Глобальные ограничения User agents should guard against sites storing data under the origins other affiliated sites, e.g. storing up to the limit in a1.example.com, a2.example.com, etc, circumventing the main example.com storage limit. dev.w3.org/html5/webstorage/#disk-space — Chrome, Safari — нет — Fx, IE ~5 млн. символов на домен 2-го уровня — Opera — ~35 млн. символов на всё 24
- 25. Cross-site XHR with CORS — Обычный XMLHttpRequest, но с возможностью делать запросы в другой домен — В ответе сервера должен появиться HTTP-заголовок «Access-Control-Allow-Origin: *» — Chrome 3+, Firefox 3.5+, IE8+ (XDomainRequest), Safari 4+ — Opera — нет! — 70% пользователей Я.Почты 25
- 26. Cross-site XHR with CORS Проблемы — Не все прокси-сервера пропускают заголовки Access-Control-Allow-Origin xdr['onerror'] = function(){ // fallback до обычный системы загрузки } — XDomainRequest не является заменой XHR, имеет ограниченный функционал — В IE9 в режиме IE9 виснут запросы xdr['onprogress'] = function() {}; 26
- 27. Что получилось? Время загрузки Кэш (мс) localStorage (мс) Chrome 11 3036 3004 Firefox 4 1873 1544 IE 8 4243 3454 Safari 5 4294 2699 27
- 28. Вопросы? 28