ASP.NET Script Combining
07.09.2008 | Gunnar
Möödunud aastal räägiti TechEd-il ühest kavalast ASP.NET optimeerimise nipist, mis kannab nime Script Combining. Idee on lihtne – selle asemel, et lasta brauseril küsida lehel viitatud skripte ühe faili kaupa, küsitakse skriptid ühe pöördumisega. Leheküljed, mis kasutavad ohtralt JavaScript-i, võivad Script Combining kasutamisest võita päris palju.
Eelmises Script Combining kandes seletasin ära, mis ideega Script Combining töötab. Seekord vaatame, kuidas seda kasutada. .Net Framework 3.5 koosseisus on see kenasti olemas ja miks mitte seda ka kasutada.
Katsetamise projekt
Esiteks on meil vaja lihtsat projekti, mille peal katseid teha. Katsetamiseks võime Visual Studio peal luua lihtsa saidi, kuhu lisame mõned skriptid (Images kataloogi pole siinkohal oluline, ma kasutasin seda sama saiti ka eelmise kande kirjutamisel).
JavaScript-i failidesse kirjutame näiteks ühe rea, mille käivitamisel öeldakse meile, milline fail nüüd laaditi. Mina lisasin failide viited lehe lõpuosasse, et failid laaditaks kindlasti peale Microsoft-i enda faile ja seetõttu ma ei saaks kuigi lihtsasti tahtmatut segadust korraldada. Default.aspx on mul selline.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<img src="images/big-flower.gif" alt="" />
</ProgressTemplate>
</asp:UpdateProgress>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript" src="DynamicMenu.js" />
<script type="text/javascript" src="Popup.js" />
<script type="text/javascript" src="Gallery.js" />
</div>
</form>
</body>
</html>
Viimaseks tuleb sisse lülitada trace. Seda tuleb teha siis web.config failis. Et me kasutame AJAX-it selles projektis, siis ei tohi me trace väljundit brauserisse saata, muidu saame palju vigu. Trace väljundi lugemiseks saame küsida serverist faili trace.axd.
Millised pöördumised tehakse?
Laseme nüüd projekti käima ja peale seda kui pilt on ees, küsime trace.axd faili brauseri vahendusel. Vaatame korra tabelit, mis meile pöördumiste kohta infot annab.
Nagu näeme, on kokku 8 pöördumist serverisse. Esimesel pöördumisel küsitakse default.aspx ja seejärel kõik, millele see viitab. axd laiendiga failid on JavaScript-i failid, mis on vajalikud Microsoft-i AJAX raamistiku tööks. Kõige lõpus tulevad meie enda JavaScript-i failid.
Script Combining
Järgmiseks kustutame default.aspx faili lõpust viited meie JavaScript-i failidele ning muudame ScriptManager-i definitsiooni. ScriptManager olgu siis selline.
<asp:ScriptManager ID="ScriptManager1" runat="server">
<CompositeScript>
<Scripts>
<asp:ScriptReference Path="~/DynamicMenu.js" />
<asp:ScriptReference Path="~/Popup.js" />
<asp:ScriptReference Path="~/Gallery.js" />
</Scripts>
</CompositeScript>
</asp:ScriptManager>
Käivitame projekti uuesti ning vaatame, mida räägib meile trace nüüd.
Juurde tuli nüüd üks pöördumine ScriptResource.axd failile, kuid kaks pöördumist jäi vähemaks. Samuti jäi kenasti tööle skriptides peituv JavaScript.
Kui palju võidame?
Lõpetuseks vaatame, kui palju me Scrip Combining abil võidame. Valem on lihtne:
pöördumiste arv = skriptide arv - 1
Kui meil on 10 skripti, siis Script Combining abil hoiame me kokku 9 pöördumist serverisse. 10 skripti pole eriline arv saidi jaoks, kus JavaScript-i palju kasutatakse, seega võime reaalsetes olukordades saavutada oluliselt suurema võidu pöördumiste arvus.