Клиентская оптимизация для ASP.NET программистов

суббота, 22 января 2011, Александр Краковецкий

Эта статья посвящена клиентской оптимизации веб-сайтов (на примере ASP.NET приложения) главная цель которой – уменьшить время исполнения скриптов и время загрузки веб-страниц. Я не буду говорить о том, что нужно использовать как можно меньше пустых строчек в разметке, использовать отдельные файлы для хранения JavaScript и CSS и т.д. – это и так понятно.

Начальные данные: ASP.NET веб-приложение

Цель: уменьшение времени загрузки страниц.

C каждым днем средний размер страницы растет, поэтому клиентской оптимизации сейчас уделяют все больше внимания:

alt text

От ASP.NET к ASP.NET MVC

Первая и главная проблема классического ASP.NET – наличие ViewState, который хранит информацию о состоянии веб-страницы и часто может занимать львиную часть генерируемого HTML кода. Кроме того, при использовании ASP.NET AJAX за удобство коддинга нужно расплачиваться наличием дополнительных скриптов и JavaScript функций.

В ASP.NET MVC эту проблему решили – теперь нет ViewState, а разметкой страницы управляет программист. Тем более, что тесты показывают, что ASP.NET MVC работает не медленней ASP.NET. Собственно, и первый совет: если вам критично время загрузки и производительность, то стоит начать разрабатывать ваш проект на ASP.NET MVC.

Оптимизация загрузки JavaScript файлов

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

Это можно сделать с помощью специальных сервисов, например http://javascriptcompressor.com/.

Пример начального JavaScript скрипта:

$(document).ready(function () {
            $("#search").click(function () {
                location.href = '/Posts/Search?query=' + $("#Location").val();
            });
        });

        function getURLParameter(name) {
            return unescape(
                (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search) || [, null])[1]
            );
        }

Скрипт, полученный после компрессии:

$(document).ready(function(){$("#search").click(function(){location.href='/Posts/Search?query='+$("#Location").val()})});
function getURLParameter(name){return unescape((RegExp(name+'='+'(.+?)(&|$)').exec(location.search)||[,null])[1])}

Compression ratio: 235/378=0.622

Также можно включить функцию замены локальных переменных менее длинными аналогами, например, в таком случае мы получим:

$(document).ready(function(){$("#search").click(function(){location.href='/Posts/Search?query='+$("#Location").val()})});
function getURLParameter(a){return unescape((RegExp(a+'='+'(.+?)(&|$)').exec(location.search)||[,null])[1])}

Compression ratio: 229/380=0.603

Изменения не такие большие, так как в нашем случае только одна переменная была заменена: name превратился в а.

Полученные скрипты, конечно, не совсем читабельные (вернее, совсем не читабельные), что может быть в разных ситуациях как плюсом, так и минусом. Но для продакшна такой подход очень подходит. Как правило, ASP.NET разработчики используют различные JavaScript файлы от компании Microsoft – MicrosoftAjax.js и сторонние библиотеки, такие как jQuery и плагины к нему. Такие скрипты нет необходимости держать локально, а использовать CDN – Content Delivery Network.

В данный момент поддерживаются такие скрипты:

  • jQuery (owned by the jQuery Team — www.jQuery.com)
  • jQuery UI (owned by the jQuery UI Team — www.jQueryUI.com)
  • jQuery Validation (owned by the jQuery team – www.jQuery.com)
  • jQuery Cycle
  • Ajax Control Toolkit (owned by the CodePlex Foundation – www.codeplex.org)
  • ASP.NET Ajax
  • ASP.NET MVC JavaScript Files

Для jQuery ссылка для подключения будет иметь следующий вид:

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.js

В ASP.NET 4.0 есть возможность перенаправлять скриптовые запросы в CDN. Для этого ScriptManager содержит свойство EnableCdn:

<asp:ScriptManager ID="ScriptManager1" EnableCdn="true" Runat="Server" />

Пример использования jQuery UI:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestjQueryUICDN.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Using jQuery UI from the CDN</title>
    <link type="text/css" rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.7/themes/redmond/jquery-ui.css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <asp:TextBox ID="txtStartDate" ClientIDMode="Static" runat="server" />

    </div>
    </form>

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.7/jquery-ui.js"></script>

    <script type="text/javascript">

        $("#txtStartDate").datepicker();

    </script>
</body>
</html>

Результат будет такой:

alt text

На странице http://www.asp.net/ajaxlibrary/cdn.ashx можно получить более детальную информацию, а также посмотреть ссылки на все популярные библиотеки. Обращаю внимание на 3 вещи:

  • Можно хостить свои JavaScript скрипты
  • В CDN также хостятся CSS файлы, необходимые для корректной работы JavaScript функций
  • Кроме Microsoft услуги CDN предоставляет ряд других компаний

Тестирование загрузки скриптов

В качестве основных проблемных мест при загрузке страницы любого веб-ресурса можно выделить четыре ключевых момента.

alt text

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

Для тестирования загрузки различных скриптов можно использовать Developer tools в IE или FireBug в FireFox:

alt text

alt text

Эти инструменты показывают время загрузки (включая рассмотренные стадии загрузки), благодаря чему можно увидеть какой скрипт отъедает сколько времени.

В качестве завершения хочется сказать, что для нашего сайта рассмотренные методы помогли уменьшить время загрузки почти в два раза (на моей машине с приблизительно 5 секунд до 2.5 секунд), что не может не радовать.

ASP.NET JavaScript Cascading Style Sheets HTML Active Server Pages Hypertext Transfer Protocol Return statement

Компании из статьи

Microsoft Украина


Сайт:
http://www.microsoft.com/ukr/ua/

 Microsoft Украина Украинское подразделение компании Microsoft.

Ищите нас в интернетах!

Комментарии

Свежие вакансии