Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Ajax Layout   Илларионов Олег (ВКонтакте)
Переходы
Переходы
1) Пользователь кликает2) Индикатор загрузки3) Получение контента4) Получение статики5) Отображение контента6) Изменение а...
С чего всё начиналось?
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) History Api
1) Клик2) Контенет 2) Статика3) Отображение контента4)   History Api
1) Клик2) Анимированный favicon3) Контенет 3) Статика4) Отображение контента5) vk.com/blah, # и хаки- правдоподобно
1) Клик2) Анимированный favicon3) Контенет 3) Статика4) Отображение контента5) vk.com/blah, # и хаки- но визуально медленно
1) Клик2) Анимированный favicon3) Контенет 3) Статика4) Отображение контента5) vk.com/blah, # и хаки- но визуально медленно
/ oldschool
Получение контентаиспользуя iframe снесколькими коллбекамидля разных частейстраницы
1) Клик2) IFrame 2) Статика3) Отображение контента4) vk.com/blah, # и хаки
Long Poll
С изменением вэбаизменилось и то, какпользователивзаимодействуют с ним.
С изменением вэбаизменилось и то, какпользователивзаимодействуют с ним.#realtime
1) Постоянный long poll
1) Постоянный long poll2) Проблемы?
Постоянный long poll2 проблемы:
Постоянный long poll2 проблемы:1) Ограничение наколичество коннектов содного домена
Постоянный long poll2 проблемы:1) Ограничение наколичество коннектов -поддомены
Постоянный long poll2 проблемы:1) Ограничение наколичество коннектов2) Нагрузка
Постоянный long pollНагрузка ++
Нагрузка ++Хочется общаться междуВКладками
Нагрузка ++Хочется общаться междуВКладкамиLocal Connection
Нагрузка ++Хочется общаться междуВКладкамиLocal ConnectionFlash
Нагрузка ++Хочется общаться междуВкладкамиLocal Storagehtml5
+   1) Лонгпол+   2) Получение данных    один раз
+   1) Лонгпол+   2) Получение данных    один раз    Как работает сам long poll    сервер?
Си,Очередь,epoll,Данные в оперативнойпамяти
Тонкий сервер,
Тонкий сервер,Нет шаблонизации
Тонкий сервер,Нет шаблонизации,Нет бизнеслогики
Тонкий сервер,Логика, шаблонизация,Лангпак - во времягенерации события.
Скорость
1) Параллельноеподключение статики иконтента
1) Параллельноеподключение статики иконтента2) Синхронизациявкладок, кешированиединамических данных
1) Параллельноеподключение статики иконтента2) Синхронизациявкладок, кешированиединамических данных3) Кеширование страниц
3) Кеширование страницКнопка “Назад”
3) Кеширование страницКнопка “Назад”- Изымаем дерево из DOM- Копируем переменныеокружения, cur.*
Silent loadДля быстрого поиска поконтенту — необходимоискать на клиентскойстороне.
Silent loadНеобходимо выгружатьБольшой объём JSONданных.Долго.
2 Запроса:1) Отображение страницы2) JSON данные(Общие данныекешируются в MC)
2 Запроса:1) Отображение страницы2) JSON данные10k друзей не влезают воперативную память.Получаем 5k, чистим, ...
Ajax Layout (Олег Илларионов)
Upcoming SlideShare
Loading in …5
×

Ajax Layout (Олег Илларионов)

3,556 views

Published on

  • Be the first to comment

Ajax Layout (Олег Илларионов)

  1. 1. Ajax Layout Илларионов Олег (ВКонтакте)
  2. 2. Переходы
  3. 3. Переходы
  4. 4. 1) Пользователь кликает2) Индикатор загрузки3) Получение контента4) Получение статики5) Отображение контента6) Изменение адреса
  5. 5. С чего всё начиналось?
  6. 6. 1) Клик2) Ajax запрос3) Вставка контента4) Смена #5) Отчистка памяти
  7. 7. 1) Клик2) Ajax запрос3) Вставка контента4) Смена #5) Отчистка памяти- не правдоподобно
  8. 8. 1) Клик2) Контенет 2) Статика3) Отображение контента4) vk.com/#blah ?
  9. 9. 1) Клик2) Контенет 2) Статика3) Отображение контента4) History Api
  10. 10. 1) Клик2) Контенет 2) Статика3) Отображение контента4) History Api
  11. 11. 1) Клик2) Анимированный favicon3) Контенет 3) Статика4) Отображение контента5) vk.com/blah, # и хаки- правдоподобно
  12. 12. 1) Клик2) Анимированный favicon3) Контенет 3) Статика4) Отображение контента5) vk.com/blah, # и хаки- но визуально медленно
  13. 13. 1) Клик2) Анимированный favicon3) Контенет 3) Статика4) Отображение контента5) vk.com/blah, # и хаки- но визуально медленно
  14. 14. / oldschool
  15. 15. Получение контентаиспользуя iframe снесколькими коллбекамидля разных частейстраницы
  16. 16. 1) Клик2) IFrame 2) Статика3) Отображение контента4) vk.com/blah, # и хаки
  17. 17. Long Poll
  18. 18. С изменением вэбаизменилось и то, какпользователивзаимодействуют с ним.
  19. 19. С изменением вэбаизменилось и то, какпользователивзаимодействуют с ним.#realtime
  20. 20. 1) Постоянный long poll
  21. 21. 1) Постоянный long poll2) Проблемы?
  22. 22. Постоянный long poll2 проблемы:
  23. 23. Постоянный long poll2 проблемы:1) Ограничение наколичество коннектов содного домена
  24. 24. Постоянный long poll2 проблемы:1) Ограничение наколичество коннектов -поддомены
  25. 25. Постоянный long poll2 проблемы:1) Ограничение наколичество коннектов2) Нагрузка
  26. 26. Постоянный long pollНагрузка ++
  27. 27. Нагрузка ++Хочется общаться междуВКладками
  28. 28. Нагрузка ++Хочется общаться междуВКладкамиLocal Connection
  29. 29. Нагрузка ++Хочется общаться междуВКладкамиLocal ConnectionFlash
  30. 30. Нагрузка ++Хочется общаться междуВкладкамиLocal Storagehtml5
  31. 31. + 1) Лонгпол+ 2) Получение данных один раз
  32. 32. + 1) Лонгпол+ 2) Получение данных один раз Как работает сам long poll сервер?
  33. 33. Си,Очередь,epoll,Данные в оперативнойпамяти
  34. 34. Тонкий сервер,
  35. 35. Тонкий сервер,Нет шаблонизации
  36. 36. Тонкий сервер,Нет шаблонизации,Нет бизнеслогики
  37. 37. Тонкий сервер,Логика, шаблонизация,Лангпак - во времягенерации события.
  38. 38. Скорость
  39. 39. 1) Параллельноеподключение статики иконтента
  40. 40. 1) Параллельноеподключение статики иконтента2) Синхронизациявкладок, кешированиединамических данных
  41. 41. 1) Параллельноеподключение статики иконтента2) Синхронизациявкладок, кешированиединамических данных3) Кеширование страниц
  42. 42. 3) Кеширование страницКнопка “Назад”
  43. 43. 3) Кеширование страницКнопка “Назад”- Изымаем дерево из DOM- Копируем переменныеокружения, cur.*
  44. 44. Silent loadДля быстрого поиска поконтенту — необходимоискать на клиентскойстороне.
  45. 45. Silent loadНеобходимо выгружатьБольшой объём JSONданных.Долго.
  46. 46. 2 Запроса:1) Отображение страницы2) JSON данные(Общие данныекешируются в MC)
  47. 47. 2 Запроса:1) Отображение страницы2) JSON данные10k друзей не влезают воперативную память.Получаем 5k, чистим, ...

×