Download - Ajax Layout (Олег Илларионов)
Ajax LayoutAjax LayoutИлларионов Олег (ВКонтакте)Илларионов Олег (ВКонтакте)
ПереходыПереходы
ПереходыПереходы
1) Пользователь кликает
2) Индикатор загрузки
3) Получение контента
4) Получение статики
5) Отображение контента
6) Изменение адреса
1) Пользователь кликает
2) Индикатор загрузки
3) Получение контента
4) Получение статики
5) Отображение контента
6) Изменение адреса
С чего всё начиналось?С чего всё начиналось?
1) Клик
2) Ajax запрос
3) Вставка контента
4) Смена #
5) Отчистка памяти
1) Клик
2) Ajax запрос
3) Вставка контента
4) Смена #
5) Отчистка памяти
1) Клик
2) Ajax запрос
3) Вставка контента
4) Смена #
5) Отчистка памяти
- не правдоподобно
1) Клик
2) Ajax запрос
3) Вставка контента
4) Смена #
5) Отчистка памяти
- не правдоподобно
1) Клик
2) Контенет 2) Статика
3) Отображение контента
4) vk.com/#blah ?
1) Клик
2) Контенет 2) Статика
3) Отображение контента
4) vk.com/#blah ?
1) Клик
2) Контенет 2) Статика
3) Отображение контента
4) History Api
1) Клик
2) Контенет 2) Статика
3) Отображение контента
4) History Api
1) Клик
2) Контенет 2) Статика
3) Отображение контента
4)
1) Клик
2) Контенет 2) Статика
3) Отображение контента
4) History Api History Api
1) Клик
2) Анимированный favicon
3) Контенет 3) Статика
4) Отображение контента
5) vk.com/blah, # и хаки
- правдоподобно
1) Клик
2) Анимированный favicon
3) Контенет 3) Статика
4) Отображение контента
5) vk.com/blah, # и хаки
- правдоподобно
1) Клик
2) Анимированный favicon
3) Контенет 3) Статика
4) Отображение контента
5) vk.com/blah, # и хаки
- но визуально медленно
1) Клик
2) Анимированный favicon
3) Контенет 3) Статика
4) Отображение контента
5) vk.com/blah, # и хаки
- но визуально медленно
1) Клик
2) Анимированный favicon
3) Контенет 3) Статика
4) Отображение контента
5) vk.com/blah, # и хаки
- но визуально медленно
1) Клик
2) Анимированный favicon
3) Контенет 3) Статика
4) Отображение контента
5) vk.com/blah, # и хаки
- но визуально медленно
3) Контенет3) Контенет
/ oldschool/ oldschool
Получение контента
используя iframe с
несколькими коллбеками
для разных частей
страницы
Получение контента
используя iframe с
несколькими коллбеками
для разных частей
страницы
1) Клик
2) IFrame 2) Статика
3) Отображение контента
4) vk.com/blah, # и хаки
1) Клик
2) IFrame 2) Статика
3) Отображение контента
4) vk.com/blah, # и хаки
Long PollLong Poll
С изменением вэба
изменилось и то, как
пользователи
взаимодействуют с ним.
С изменением вэба
изменилось и то, как
пользователи
взаимодействуют с ним.
С изменением вэба
изменилось и то, как
пользователи
взаимодействуют с ним.
#realtime
С изменением вэба
изменилось и то, как
пользователи
взаимодействуют с ним.
#realtime
1) Постоянный long poll1) Постоянный long poll
1) Постоянный long poll
2) Проблемы?
1) Постоянный long poll
2) Проблемы?
Постоянный long poll
2 проблемы:
Постоянный long poll
2 проблемы:
Постоянный long poll
2 проблемы:
1) Ограничение на
количество коннектов с
одного домена
Постоянный long poll
2 проблемы:
1) Ограничение на
количество коннектов с
одного домена
Постоянный long poll
2 проблемы:
1) Ограничение на
количество коннектов -
поддомены
Постоянный long poll
2 проблемы:
1) Ограничение на
количество коннектов -
поддомены
Постоянный long poll
2 проблемы:
1) Ограничение на
количество коннектов
2) Нагрузка
Постоянный long poll
2 проблемы:
1) Ограничение на
количество коннектов
2) Нагрузка
Постоянный long poll
Нагрузка ++
Постоянный long poll
Нагрузка ++
Нагрузка ++
Хочется общаться между
ВКладками
Нагрузка ++
Хочется общаться между
ВКладками
Нагрузка ++
Хочется общаться между
ВКладками
Local Connection
Нагрузка ++
Хочется общаться между
ВКладками
Local Connection
Нагрузка ++
Хочется общаться между
ВКладками
Local Connection
Flash
Нагрузка ++
Хочется общаться между
ВКладками
Local Connection
Flash
Нагрузка ++
Хочется общаться между
Вкладками
Local Storage
html5
Нагрузка ++
Хочется общаться между
Вкладками
Local Storage
html5
1) Лонгпол
2) Получение данных
один раз
1) Лонгпол
2) Получение данных
один раз
+
+
+
+
1) Лонгпол
2) Получение данных
один раз
Как работает сам long poll
сервер?
1) Лонгпол
2) Получение данных
один раз
Как работает сам long poll
сервер?
+
+
+
+
Си,
Очередь,
epoll,
Данные в оперативной
памяти
Си,
Очередь,
epoll,
Данные в оперативной
памяти
Тонкий сервер,Тонкий сервер,
Тонкий сервер,
Нет шаблонизации
Тонкий сервер,
Нет шаблонизации
Тонкий сервер,
Нет шаблонизации,
Нет бизнеслогики
Тонкий сервер,
Нет шаблонизации,
Нет бизнеслогики
Тонкий сервер,
Логика, шаблонизация,
Лангпак - во время
генерации события.
Тонкий сервер,
Логика, шаблонизация,
Лангпак - во время
генерации события.
СкоростьСкорость
1) Параллельное
подключение статики и
контента
1) Параллельное
подключение статики и
контента
1) Параллельное
подключение статики и
контента
2) Синхронизация
вкладок, кеширование
динамических данных
1) Параллельное
подключение статики и
контента
2) Синхронизация
вкладок, кеширование
динамических данных
1) Параллельное
подключение статики и
контента
2) Синхронизация
вкладок, кеширование
динамических данных
3) Кеширование страниц
1) Параллельное
подключение статики и
контента
2) Синхронизация
вкладок, кеширование
динамических данных
3) Кеширование страниц
3) Кеширование страниц
Кнопка “Назад”
3) Кеширование страниц
Кнопка “Назад”
3) Кеширование страниц
Кнопка “Назад”
- Изымаем дерево из DOM
- Копируем переменные
окружения, cur.*
3) Кеширование страниц
Кнопка “Назад”
- Изымаем дерево из DOM
- Копируем переменные
окружения, cur.*
Silent load
Для быстрого поиска по
контенту — необходимо
искать на клиентской
стороне.
Silent load
Для быстрого поиска по
контенту — необходимо
искать на клиентской
стороне.
Silent load
Необходимо выгружать
Большой объём JSON
данных.
Долго.
Silent load
Необходимо выгружать
Большой объём JSON
данных.
Долго.
2 Запроса:
1) Отображение страницы
2) JSON данные
(Общие данные
кешируются в MC)
2 Запроса:
1) Отображение страницы
2) JSON данные
(Общие данные
кешируются в MC)
2 Запроса:
1) Отображение страницы
2) JSON данные
10k друзей не влезают в
оперативную память.
Получаем 5k, чистим, ...
2 Запроса:
1) Отображение страницы
2) JSON данные
10k друзей не влезают в
оперативную память.
Получаем 5k, чистим, ...