1. Ajax Layout
Илларионов Олег (ВКонтакте)

2. Переходы

3. Переходы

4. 1) Пользователь кликает
2) Индикатор загрузки
3) Получение контента
4) Получение статики
5) Отображение контента
6) Изменение адреса

5. С чего всё начиналось?

6. 1) Клик
2) Ajax запрос
3) Вставка контента
4) Смена #
5) Отчистка памяти

7. 1) Клик
2) Ajax запрос
3) Вставка контента
4) Смена #
5) Отчистка памяти
- не правдоподобно

8. 1) Клик
2) Контенет 2) Статика
3) Отображение контента
4) vk.com/#blah ?

9. 1) Клик
2) Контенет 2) Статика
3) Отображение контента
4) History Api

10. 1) Клик
2) Контенет 2) Статика
3) Отображение контента
4) History Api

11. 1) Клик
2) Анимированный favicon
3) Контенет 3) Статика
4) Отображение контента
5) vk.com/blah, # и хаки
- правдоподобно

12. 1) Клик
2) Анимированный favicon
3) Контенет 3) Статика
4) Отображение контента
5) vk.com/blah, # и хаки
- но визуально медленно

13. 1) Клик
2) Анимированный favicon
3) Контенет 3) Статика
4) Отображение контента
5) vk.com/blah, # и хаки
- но визуально медленно

14. / oldschool

15. Получение контента
используя iframe с
несколькими коллбеками
для разных частей
страницы

16. 1) Клик
2) IFrame 2) Статика
3) Отображение контента
4) vk.com/blah, # и хаки

17. Long Poll

18. С изменением вэба
изменилось и то, как
пользователи
взаимодействуют с ним.

19. С изменением вэба
изменилось и то, как
пользователи
взаимодействуют с ним.
#realtime

20. 1) Постоянный long poll

21. 1) Постоянный long poll
2) Проблемы?

22. Постоянный long poll
2 проблемы:

23. Постоянный long poll
2 проблемы:
1) Ограничение на
количество коннектов с
одного домена

24. Постоянный long poll
2 проблемы:
1) Ограничение на
количество коннектов -
поддомены

25. Постоянный long poll
2 проблемы:
1) Ограничение на
количество коннектов
2) Нагрузка

26. Постоянный long poll
Нагрузка ++

27. Нагрузка ++
Хочется общаться между
ВКладками

28. Нагрузка ++
Хочется общаться между
ВКладками
Local Connection

29. Нагрузка ++
Хочется общаться между
ВКладками
Local Connection
Flash

30. Нагрузка ++
Хочется общаться между
Вкладками
Local Storage
html5

31. + 1) Лонгпол
+ 2) Получение данных
один раз

32. + 1) Лонгпол
+ 2) Получение данных
один раз
Как работает сам long poll
сервер?

33. Си,
Очередь,
epoll,
Данные в оперативной
памяти

34. Тонкий сервер,

35. Тонкий сервер,
Нет шаблонизации

36. Тонкий сервер,
Нет шаблонизации,
Нет бизнеслогики

37. Тонкий сервер,
Логика, шаблонизация,
Лангпак - во время
генерации события.

38. Скорость

40. 1) Параллельное
подключение статики и
контента

41. 1) Параллельное
подключение статики и
контента
2) Синхронизация
вкладок, кеширование
динамических данных

42. 1) Параллельное
подключение статики и
контента
2) Синхронизация
вкладок, кеширование
динамических данных
3) Кеширование страниц

43. 3) Кеширование страниц
Кнопка “Назад”

44. 3) Кеширование страниц
Кнопка “Назад”
- Изымаем дерево из DOM
- Копируем переменные
окружения, cur.*

45. Silent load
Для быстрого поиска по
контенту — необходимо
искать на клиентской
стороне.

46. Silent load
Необходимо выгружать
Большой объём JSON
данных.
Долго.

47. 2 Запроса:
1) Отображение страницы
2) JSON данные
(Общие данные
кешируются в MC)

48. 2 Запроса:
1) Отображение страницы
2) JSON данные
10k друзей не влезают в
оперативную память.
Получаем 5k, чистим, ...