Увеличение скорости загрузки веб-страниц асинхронными частичными представлениями ASP.NET MVC

| Пятница, 22 февраля, 2013

Метки: Razor, ASP.NET MVC, jQuery Комментарии: 0

Итак, сайт создан, запущен на рабочем сервере и вдруг он начал выдавать некоторые проблемы с загрузкой страниц. Рассмотрим такой случай и предпримем шаги для исправления этой ситуации. В целом сайт работает быстро и безупречно, но взаимодействие с некоторыми данными портят всю картину. В данной статье мы расскажем, как использовать частичные представления ASP.NET MVC вместе с jQuery, для того, чтобы страницы загружались быстрее, даже если нет возможности увеличить скорость некоторых операций.

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

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

Cтраница со списком дел загружается быстро, но новости замедляют ее открытие в браузере. Это все потому, что сразу все данные мы получаем в методе действия. Приведем код такой медленной загрузки.

public ActionResult Index()
{
   var homeViewModel = new HomeViewModel();
   homeViewModel.Tasks = this.repository.GetTasks();
   homeViewModel.News = this.repository.GetNews(); // долгая операция
   return View(homeViewModel);
}

Код в представлении:

<div class="tasks">
    <h3>Список дел</h3>
    <ul>
    @foreach (var task in Model.Tasks)
    {
        <i>@task.Title</li>
    }
   </ul>
</div>

<div class="news">
    <h3>Новости (долгая операция)</h3>
    <ul>
    @foreach (var news in Model.News)
    {
        <li>@news.Title</li>
    }
    </ul>
</div>

Время ожидания имеет значение. Компания Amazon подсчитала, что каждые 100 миллисекунд ожидания загрузки страницы стоит им 1% падения продаж. В компании Google обнаружили, что дополнительные 5 секунд при генерации результатов запроса ведут к снижению трафика на 20%.

Простым решением в данном случае будет разделение быстрых и долгих операций (Задания и новости в нашем случае). Быстрые операции оставляем в методе действия страницы, а выполнение медленных инициируем c помощью AJAX-запросов.

Для начала создадим частичное представление для блока новостей и перенесем в него Razor-код для отображения этой секции. На основной странице изменим код так:

<div class="news">
    <h3>Новости (долгая операция)</h3>
    <div id="newsContent" data-url="/home/news">
        Загрузка...
    </div>
</div>

Секция списка дел работает как и прежде, а новости мы подготовили для асинхронной загрузки. Далее, уберем строку получения новостей из метода действия страницы и поместим ее в отдельный метод, возвращающий частичное представление _News.

        public ActionResult Index()
        {
            var homeViewModel = new HomeViewModel();
            homeViewModel.Tasks = this.repository.GetTasks();
            return View(homeViewModel);
        }

        public ActionResult News()
        {
            var news = this.repository.GetNews(); // долгая операция
            return PartialView("_News", news);
        }

Это важно, мы должны возвращать PartialView для частичных представлений, а не View. Запускаем приложение, долгая операция дольше не выполняется в методе страницы – загрузка проиcходит быстрее. Но, новости пока еще не отображаются.

Для этого пишем следующий Javascript:

$(document).ready(function () {
        var dataUrl = $('#newsContent').data('url');
        $('#newsContent').load(dataUrl);
    });

Здесь мы получаем урл для запроса блока разметки новостей. Посылаем запрос и отображаем полученный HTML на странице.

Итак резюмируя вышеизложенное, перечислим предпринятые действия.

1. Находим участки кода, которые медленно выполняются.
2. Создаем и переносим этот код в новый метод действия, возвращающий PartialViewResult для асинхронного вызова.
3. Переносим секцию, отвечающую за отображение медленных данных, в частичное представление.
4. Пишем Javascript код, с AJAX-запросом к новому методу действия, получаем от него сгенерированный HTML, который помещаем на страницу.