CompositeScript и оптимизация загрузки страницы

Каждый ASP.NET разработчик наверняка знаком с библиотекой пользовательских контролов – AJAX Control Toolkit. Все бы хорошо, но при ее использовании время загрузки страницы резко возрастает. Попробуем разобраться, почему это происходит и каким образом можно с таким негативным эффектом эффектом бороться.Анализируя исходный текст страницы, на которой расположены пользовательские элементы AJAX Control Toolkit (http://www.asp.net/ajax/AjaxControlToolkit/Samples/) можно видеть, что происходит большое количество обращений к серверу на URL, в котором присутствует строка “ScriptResource.axd?d=XXXXX”. Вспоминая, что у браузеров часто существует ограничение на одновременное количество подключений к одному серверу и то, что на установление соединения тратится довольно большое количество времени будем пытаться все это безобразие устранить.

Если у вас используется .net 3.5 (а разве вы все еще используете 2.0?) –  Microsoft предлагает такое решение проблемы: использовать CompositeScript для объединения множества мелких скриптов в один большой. http://msdn.microsoft.com/ru-ru/library/cc488552.aspx

Копируем текст примера к себе в проект.

<asp:ScriptManager ID=»ScriptManager1″ runat=»server»>
<CompositeScript>
<Scripts>
<asp:ScriptReference Path=»~/Scripts/Script1.js» />
<asp:ScriptReference Path=»~/Scripts/Script2.js» />
<asp:ScriptReference Path=»~/Scripts/Script3.js» />
</Scripts>
</CompositeScript>
</asp:ScriptManager>
И понимаем, что не так все просто. Хорошо, если мы используем только свои собственные скрипты.
Но речь идет о AJAX Control Toolkit. Что же указывать в Path?

В этом случае нужно пользоваться немного другим синтаксисом. А именно:

<asp:ScriptManager ID=»ScriptManager1″ runat=»server»>
<CompositeScript>
<Scripts>
<asp:ScriptReference name=»MicrosoftAjax.js»/>
<asp:ScriptReference name=»MicrosoftAjaxWebForms.js»/>
<asp:ScriptReference name=»AjaxControlToolkit.Common.Common.js»
assembly
=»AjaxControlToolkit, Version=3.0.20229.20843, Culture=neutral,
PublicKeyToken=28f01b0e84b6d53e»
/>
<asp:ScriptReference name=»AjaxControlToolkit.ExtenderBase.BaseScripts.js»
assembly
=»AjaxControlToolkit, Version=3.0.20229.20843,
Culture=neutral, PublicKeyToken=28f01b0e84b6d53e»
/>

</Scripts>
</CompositeScript>
Где же взять все эти буквы и цифры? Как, вообще, определить какие конкретно скрипты используются на нашей странице? Для этих целей существует замечательная утилита ScriptReferenceProfiler, которую можно скачать на CodePlex http://aspnet.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=13356
Временно подключаем скачанную DLL (ScriptReferenceProfiler.dll) в References и указываем на странице, где нибудь в начале вот это:
<%@ Import Namespace=»ScriptReferenceProfiler» %>
<%@ Register Assembly=»ScriptReferenceProfiler»
Namespace=»ScriptReferenceProfiler» TagPrefix=»microsoft» %>


<microsoft:ScriptReferenceProfiler ID=»profiler» runat=»server» />
И при запуске приложения на странице будет распечатан фрагмент кода, который нужно использовать.

Добавляем полученный код к ScriptManager или ScriptManagerProxy и удаляем все ссылки на
ScriptReferenceProfiler. Снова открываем страницу и видим сообщение об ошибке, говорящее,

что URL не может содержать более 1024 симовлов.
Для решения данной проблемы добавляем на страницу ScriptManagerProxy и переносим часть записей туда
(В отличие от ScriptManager, который должен быть только один ScriptManagerProxy на странице
может быть несколько). Все, теперь мы получим вместо большого количества обращений к серверу одно-два,
где все используемые скрипты объединены в один большой.
Время старта страницы значительно уменьшилось, что видно невооруженным взглядом.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *