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, чистим, ...