通过

Как мы использовали HTML5, чтобы сделать SkyDrive быстрее для миллионов пользователей

  • 项目

Вы наверняка уже попробовали новую версию службы SkyDrive, запущенную 20 июня. Одним из важных нововведений было существенное увеличение скорости работы, упрощение и повышение удобства интерфейса. Сегодня мы расскажем о нескольких решениях, которые мы использовали для улучшения SkyDrive.

Нашей основной задачей в новой архитектуре SkyDrive было использование HTML5 и возможностей современных браузеров для сокращения количества полных загрузок страниц и увеличения скорости работы интерфейса.

Старая версия SkyDrive была основана на отрисовке интерфейса на стороне сервера, что означало полную перезагрузку страницы при выполнении какого-либо действия в браузере. Загрузка страницы – это очень медленная операция, которая чаще всего занимает несколько секунд в связи с отсутствием кэширования на стороне клиента и большого количества обращений к серверу. Каждое действие пользователя может занимать нескольких секунд, что очень неудобно. Впрочем, такой подход был ориентирован на совместимость для пользователей со старыми браузерами.

По мере того, как десятки миллионов пользователей SkyDrive устанавливали более современные версии браузеров, мы смогли воспользоваться новыми возможностями и перейти к AJAX-ориентированной архитектуре. Однако для того чтобы добиться хороших результатов, необходимо правильно использовать ресурсы интернет-подключения, поскольку именно канал связи является узким местом в производительности. Мы сконцентрировались на четырех различных задачах для достижения оптимальной работы SkyDrive:

  1. Уменьшение количество обращений к серверу (кэширование на стороне клиента)
  2. Уменьшение объема данных, передаваемых в каждом запросе (передача только того, что необходимо).
  3. Уменьшение физических расстояний для прохождения запроса (размещение серверов/CDN ближе к пользователям).
  4. Оптимизация запросов для получения максимальной пользы (пакетная обработка и предварительная загрузка).

Рассмотрим эти изменения более подробно.

Сокращение загрузок страниц

Архитектура нового SkyDrive предполагает активное использование AJAX. Когда несколько лет назад мы впервые задумались об использовании AJAX, то столкнулись с проблемой, связанной с достаточно медленной работой веб-приложений, использующих эту технологию. Проблема состояла из целого ряда элементов:

  • медленные веб-браузеры с нестабильным JavaScript;
  • медленные интернет-каналы у конечных пользователей;
  • использование XML, который был громоздким и медленно анализировался;
  • отсутствие кэширования на стороне клиента.

Но современные браузеры гораздо быстрее и эффективнее в части выполнения сценариев JavaScript, чем 8 лет назад. В связи с этим чем мы решили использовать JSON, который гораздо удобнее и эффективнее, чем XML. Также были значительно улучшены возможности кэширования на стороне клиента. Кроме этого, мы стали выполнять запросы к серверу асинхронно, что позволило не прерывать работу интерфейса во время ожидания ответа. К сожалению, заставить все функции корректно работать во всех основных браузерах – непростая задача, но мы к этому стремимся.

Когда вы открываете SkyDrive в первый раз происходит полная загрузка страницы (мы называем ее PLT1 – first page-load), которая продолжается дольше, чем при последующих посещениях (мы называем их PLT2), поскольку нам нужно загрузить набор статических ресурсов из CDN (Content Delivery Networks), которые затем кэшируются на клиенте.

В общем случае AJAX требует больше ресурсов на стороне клиента, поскольку, собственно, на стороне клиента происходит основные операции. Мы применили несколько хитростей для улучшения PLT1. Самый яркий пример – это предварительная загрузка различных ресурсов SkyDrive, когда вы находитесь на странице авторизации login.live.com и вводите WLID и пароль. Когда SkyDrive запустится, необходимые ресурсы уже загружены. Также мы не загружаем сразу отдельные наборы ресурсов, которые не требуются в момент запуска SkyDrive (WebIM – один из примеров), они подгрузятся позже.

Мы также оптимизировали способ генерации HTML-страницы на наших ASP.NET веб-серверах. Ранее серверу приходилось ожидать полного формирования HTML-страницы перед возвращением ее в браузер. Например, для генерации главной страницы SkyDrive нам требовалось обращаться к нескольким внутренним службам и время возврата страницы в браузер напрямую зависело от времени завершения всех этих операций.

Архитектура нового SkyDrive предполагает построение и возврат отдельных HTML-фрагментов браузеру как только они готовы на сервере. Основное преимущество этого способа заключается в том, что мы можем передать браузеру HTML-код, содержащий сценарии и CSS практически мгновенно, поэтому браузер начинает загружать необходимые ресурсы (которые еще не кэшированы) параллельно другим задачам, которые сервер в данный момент выполняет.

Downloading resources in parallel to other work that our server is doing

Вы можете заметить, что некоторые части нового SkyDrive все еще требуют полной загрузки страницы, например редактирование разрешений папки, удаление файла или сортировка фотографий в альбоме. В настоящий момент мы перенесли на AJAX-архитектуру только функции просмотра файлов и фотографий, но в будущих релизах мы обновим весь сайт.

Протокол доступа к данным на основе HTTP/JSON

Как уже упоминалось выше, важнейшим изменением SkyDrive был перевод механизма просмотра файлов в SkyDrive на технологию AJAX, что означает осуществление отрисовки интерфейса и вывод данных на стороне клиента. Это позволило нам избежать полной загрузки страниц и существенно ускорить работу интерфейса. Для перехода на модель, предполагающую существенно большее вовлечение браузера в управление интерфейсом, нам нужно было получать данные пользователей (не HTML) с наших серверов, поэтому мы разработали протокол доступа к данным, основанный на HTTP и JSON. Это позволило нам эффективно получать данные пользователя, необходимые для отображения (например, первые 20 из 100 документов, отсортированных по названию, в папке “Учебный проект”). Протокол поддерживает сортировку, фильтрацию и страничный вывод. Программный интерфейс (API) позволяет получить все необходимые данные в рамках одного запроса.

Очень важно, что наши сервера могут выполнять и возвращать данные, запрашиваемые по протоколу, очень быстро. Мы достигли этого за счет выполнения сортировки, фильтрации и постраничной разбивки на уровне SQL Server. Раньше мы выполняли запрос, получали большой объем данных, а потом обрабатывали его в ASP.NET-коде, что было не слишком эффективно. Гораздо лучше результата мы достигли, положившись на возможности SQL Server в части оптимизации и выполнения запроса и получая только те данные, которые необходимы.

В нашем протоколе мы используем модель JSON, поскольку она эффективна и современные браузеры работают с такими данными действительно быстро. Поскольку мы практически всегда отображаем только одну страницу данных, большинство наших запросов содержат всего пару килобайт данных и возвращаются за доли секунды (разумеется, фактическая скорость сильно зависит от качества интернет-соединения у конечного пользователя).

Данные, возвращаемые с помощью этого протокола могут кэшироваться браузером, что заметно улучшает производительность, поскольку наибольший выигрыш в скорости происходит, когда результат запроса может поступать из кэша клиента. Вдобавок к скорости работы интерфейса, такой запрос не загружает наши сервера, что позволяет сократить затраты на их содержание и повысить эффективность их работы. Ниже будет дано более подробное описание того, как мы кэшируем данные пользователей.

Мы также оптимизировали отображение SkyDrive при первом входе в рамках каждой сессии – в этом случае страница, включающая данные пользователя верхнего уровня, возвращается полностью. Это исключает необходимость повторного обращения к серверу для запроса этих данных. Это пример пакетной обработки данных, который объединяет два запроса в один.

Виртуализация списка файлов

Когда вы открывали папку в старом SkyDrive, вам приходилось ждать полной загрузки веб-страницы, содержащей все файлы в этой папке. Пример – фотоальбом Windows Phone в SkyDrive. Примерно 25% пользователей Windows Phone хранят около 1000 фотографий в этой папке. Просмотр такой папки в старом SkyDrive был очень медленным.

Новый SkyDrive обрабатывает отображение больших папок гораздо быстрее, поскольку мы добавили поддержку виртуальных списков. Большинство пользователей знакомы с этой концепцией благодаря настольным приложениям, например Microsoft Oulook, которые поддерживают эту технологию для повышения производительности интерфейса.

Основная идея состоит в том, что когда пользователь просматривает папку с большим количеством файлов, мы загружаем только те файлы, которые необходимо отобразить в браузере в данный момент времени. Это очень эффективно и работает быстро, поскольку мы запрашиваем всего-лишь небольшой объем данных (пару килобайт) с сервера или из кэша, и мы генерируем небольшое количество HTML на клиенте. Пользователь также может использовать полосу прокрутки для перемещения по списку. По мере перемещения по списку, мы динамически запрашиваем данные и отображаем их в браузере. Конечный результат этого улучшения проявляется в очень быстрой и плавной работе интерфейса вне зависимости от количества файлов в папке.

Quickly scroll and see the last page in the folder really fast

Как уже упоминалось, возможность реализации виртуального списка поддерживается нашим протоколом доступа к данным, позволяющим запросить определенную порцию файлов. Вы можете посмотреть, как это работает, открыв папку с большим количеством файлов и нажав CTRL+END. Вы увидите, насколько быстро страница переместится к концу списка и фотографии загрузятся.

Кэширование на стороне клиента

Кэширование критически важно для достижения высокой производительности, поскольку позволяет избавиться от части сетевых запросов и отображать изменения в интерфейсе практически мгновенно, поскольку данные сохранены на локальном компьютере. Чем больше мы можем сохранить локально, тем лучше!

Мы используем два уровня кэширования в новой архитектуре SkyDrive. Как уже говорилось выше, все наши запросы выполняются с использованием протокола доступа к данным, основанном на HTTP/JSON. Если определенный объем данных будет запрашиваться повторно, то результат будет передан из кэша браузера вместо обращения к серверу. Это также позволяет нам кэшировать данные пользователей в разных сессиях SkyDrive.

Второй уровень кэширования – это хранение данных в памяти в рамках текущей сессии SkyDrive. Мы используем этот кэш для того, чтобы сделать перемещения по различным представлениям невероятно быстрым. Если запрос данных может быть обслужен кэшем браузера, мы сохраняем эти данные в памяти для текущей сессии SkyDrive. При этом мы следим за размером кэша и не допускаем чрезмерного объема.

Еще одна концепция, которую мы реализовали в новом SkyDrive – это предварительная загрузка. Если вы просматриваете фотографии в фотоальбоме, SkyDrive начинает загружать остальные фотографии в фоновом режиме, поэтому когда вы перейдете к следующему снимку, он уже будет на компьютере. Однако если мы будем кэшировать фотографии, которые вы не будете открывать, то мы сделаем ненужные запросы к серверу, поэтому существует определенный подход к разумному объему предварительной загрузки. Мы также предварительно загружаем несколько фотографий, не отображаемых в текущем представлении, чтобы сделать прокрутку более плавной.

Дальнейшие планы по использованию возможностей HTML5

Мы реализовали множество возможностей новых веб-стандартов в текущем релизе SkyDrive. Как уже упоминалось, JSON используется для передачи данных пользователей, HTML5 - для анимации CSS, а также другие функции. Мы используем локальное хранилище для реализации механизма кэширования. Мы также уделили внимание соответствию нашего HTML-кода современным стандартам, поэтому все, что вы видите, работает практически во всех современных браузерах одинаково.

Мы продолжим активное применение новых возможностей HTML 5. При этом мы по-прежнему используем Silverlight для мультизагрузки файлов, поскольку это позволяет уменьшать размер фотографии перед ее отправкой на сервер. Начиная с текущего релиза весь код JavaScript построен с использованием JQuery, что позволило повысить эффективность работы наших программистов. Мы также перенесли весь код на мобильную версию SkyDrive, которая также стала существенно быстрее.

В настоящий момент мы переносим оставшиеся части SkyDrive на новую быструю архитектуру. Вскоре мы перенесем на клиент больше функций, чтобы как можно чаще избегать полной загрузки страниц. При этом основные действия, например удаление или перемещение файлов, будут выполняться в асинхронном режиме.

Мы продолжим повышение производительности SkyDrive, поскольку уверены, что скорость работы – важная составляющая качества и эффективности нашего сервиса.

Мы будем благодарны за ваши отзывы о новом быстром SkyDrive!

Steven Bailey
Development Manager, Windows Live

Оригинал: How we used HTML5 to make SkyDrive fast for millions of people.

 

Technorati Теги: SkyDrive,Enthusiast,Consumer,Windows Live,HTML5,JavaScript

Comments

  • Anonymous
    January 01, 2003
    Пользуюсь SkyDrive больше года и мнение о сервисе только положительное. Особенно в новом SkyDrive мне нравится просмотр фотографий в виде плиточек.Пользуюсь SkyDrive больше года и мнение о сервисе только положительное. Особенно в новом SkyDrive мне нравится просмотр фотографий в виде плиточек.

  • Anonymous
    January 01, 2003
    Новость на будущее - Windows Phone 7 Mango умеет стримить (проигрывать онлайн) музыку со Skydrive ;-)

  • Anonymous
    January 01, 2003
    Многие с нетерпением ждут выхода Windows Phone 7 на российский рынок и его замечательных возможностей по работе с социальными сервисами и облаком! Могу гарантировать, что этот блог будет содержать максимальное количество очень интересной и полезной информации! :-)