Быстрое объединение javascript файлов в один при помощи ScriptManager

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

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

Пример подцепления скриптов на ScriptManager

19 <asp:ScriptManager ID="ScriptManager1" runat="server" EnableViewState="true" EnableScriptGlobalization="false" ScriptMode="Release" CompositeScript-ScriptMode="Release">

20 <CompositeScript>

21 <Scripts>

22 <asp:ScriptReference Path="~/Scripts/script.js" />

23 <asp:ScriptReference Path="~/Scripts/shadowbox.js" />

24 <asp:ScriptReference Path="~/Scripts/languages/shadowbox-ru.js" />

25 <asp:ScriptReference Path="~/Scripts/libraries/sizzle/sizzle.js" />

26 <asp:ScriptReference Path="~/Scripts/players/shadowbox-html.js" />

27 <asp:ScriptReference Path="~/Scripts/players/shadowbox-img.js" />

28 <asp:ScriptReference Path="~/Scripts/players/shadowbox-iframe.js" />

29 <asp:ScriptReference Path="~/Scripts/libraries/swfobject/swfobject.js" />

30 </Scripts>

31 </CompositeScript>

32 </asp:ScriptManager>

И эти файлы в указанном порядке подцепятся - один за другим.
можно и программно подцеплять скрипты:

31 public void AddScript(string scriptFile)

32 {

33 ScriptManager1.CompositeScript.Scripts.Add(new ScriptReference() { Path = "~" + scriptFile });

34 }


Не стоит заботиться о дубликатах (например 2 контрола страницы возьмут и добавят один и тото же скрипт на страницу), ScriptManager подгружает скрипты 1 раз.
Думаю резонно все яваскрипты выносить в js файлы, а на страницах/контролах уже добавлять эти яваскрипты вот так:

33 ScriptManager.GetCurrent(Page).CompositeScript.Scripts.Add(new ScriptReference() { Path = "~" + scriptFile });

Это реально помогает, если на сайте много яваскриптов, так на своем проекте я снизил скорость загрузки яваскриптов с 7-ми до 1.02 секунд (проверяю в файрбаге)

6 комментариев:

  1. У меня как раз проблема с длительной загрузкой большого количества скриптов. Но стоит ли так делать, ведь скрипт менеджер уже включает большое количество скриптов??

    Artem Sh.

    ОтветитьУдалить
  2. стоит, даже советую, хотябы попробовать

    кстати, мои скрипты добавились как один ресурс с Microsoft Ajax, какие-то жалкие 73 кб в разных файлах грузились жутко долго, а теперь все просто замечательно

    + кеширование, в случае если в хидере браузера серверный хендлер обнаружит инфу о кеше скриптов, то вместо самих скриптов посылает заголовок "304 - Not Modified" и браузер забирает файлы из кеша

    ОтветитьУдалить
  3. ок, попробую

    Artem Sh.

    ОтветитьУдалить
  4. Да весьма оригинально, а самое главное действенное. Сократил время загрузки

    ОтветитьУдалить
  5. Хочу добавить вот что:
    Не все скрипты можно легко добавить в ScriptManager так как не всегда просто получить их имена (AJAX ControlToolkit хранит скрипты как ресурсы в DLL).
    Не всегда можно обойтись использованием одного ScriptManager так как существует ограничение на общее количество символов в названии всех скриптов в одном ScriptManager. Приходится добавлять второй а то и третий ScriptManager, соответственно и объединенных скриптов будет два или три.

    Подробнее можно почитать в моем блоге
    http://blog.dvteam.ru/post/CompositeScript-PageOptimization.aspx

    Популярные библиотеки такие как jQuery или MS AJAX можно тоже подключать в ScriptManager как часть CompositeScript, но гораздо лучше использовать ссылки на CDN версии

    Снова сошлюсь на свой блог где рассказываю как это лучше сделать без больших изменений в коде
    http://blog.dvteam.ru/post/MS-AJAX-CDN.aspx

    ОтветитьУдалить
  6. Действительно, длина названий файлов яваскриптов может сыграть с вами злую шутку...

    но если у вас так много яваскриптов - не стоит ли задуматься - а все ли яваскрипты вам нужны на странице? хочу сказать, что стоит добавлять для страниц только те скрипты, которые действительно нужны на странице. по идее - каждый модуль/контрол может добавлять скрипт, не стоит все сразу пихать на страницу

    по поводу аякстулкита - а Вы разве не знали, что можнно добавлять скрипты, которые лежат в какой-то длл? если нет, то я сегодна запостю новый топик, сенкс :)

    кстати говоря - на страниуе может существовать только 1 скриптманагер, если нет - прошу пример, буду только рад

    ОтветитьУдалить

Можете оставить свой комментарий