DCSIMG
February 2010 - Posts - מאחורי המסך

מאחורי המסך

משה למפרט, על תכנות מתקדם וביצועים ב-Web.

על הבלוג

עוד חדשות

אתרים שיש לי בהם יד ורגל

February 2010 - Posts

ביצועים ב-Web: צמצום מספר הבקשות ל-JS ול-CSS

התחלתי לבצע את הרעיון הזה כחלק מהמהלך שלי להוריד (עוד יותר) את מספר הבקשות לדף בערוץ 7, על מנת להאיץ את טעינתו של אתר החדשות הנ"ל. מפה לשם התחלתי לבנות Handler שמקבל רשימת קבצי JS וקבצי CSS, ובונה משהו כזה:

// js script
function () {}
// css
document.write("<style>body {font-family:arial}</style>");

זה עבד יפה, אבל לא היה מושלם (שבר הפניות יחסיות לקובץ ה-CSS שאותן תיקנתי בעזרת search/replace, והיה קצת מכוער – ופגע קצת בביצועים בצד לקוח).אז חיפשתי קצת בגוגל, ומצאתי פיתרון אחר, שמבוסס על הערות ועל דרך לגרום ל-JS להתעלם מה-CSS ולהפך, ולטענת כותבו – גם עובר ולידציה.

 

בשלב הבא, לא משנה באיזה פיתרון תבחרו, נצטרך לגשת לקובץ שלנו, ולעשות את זה בצורה שתאפשר גם לרענן את ה-Cache במקרה שיש שינוי בקבצים.
אני לא אראה פה את כל הקוד, אבל את העיקרון אני חושב שאפשר:

 

'ייצור script עם הפנייה מתאימה, על בסיס Hash Shared Function GetScriptsHTML(ByVal Scripts() As String, ByVal CSS() As String) As String     Dim sHash As String = GetFilesHash("scripts", Scripts)     If CSS.Length > 0 Then sHash = MailFuncs.MD5(System.Text.Encoding.UTF8.GetBytes(sHash & GetFilesHash("css", CSS)))     Return "<script src=""Combine.ashx?js=" & Join(Scripts, ",") & "&css=" & Join(CSS, ",") & "&h=" & Mid(sHash, 1, 10) & """></script>" End Function Private Shared Function GetFilesHash(ByVal Folder As String, ByVal Files() As String) As String     Dim aFiles As New StringBuilder     For i As Integer = 0 To Files.Length - 1 ' שימו לב לתת הפניה לספריה הנכונה         aFiles.Append(vbCrLf & vbCrLf & IO.File.ReadAllText( Folder & "/" & Files(i)))     Next     Return MD5(System.Text.Encoding.UTF8.GetBytes(aFiles.ToString)) End Function

Shared Function MD5(ByVal Bytes() As Byte) As String     Dim oMd5 As New System.Security.Cryptography.MD5CryptoServiceProvider()     Dim Bytes2() As Byte = oMd5.ComputeHash(Bytes)     Return System.Convert.ToBase64String(Bytes2) ', 0, Bytes2.Length)    'Bytes2) >End Function

 

הקוד הזה כמובן לא גמור ויש עוד מה לשפר, בשלב הבא צריך לשמור ב-Cache כלשהו את תוצאות ה-MD5 של הקבצים (זו פעולה קצת יקרה) ומן הסתם אפשר לייצר קוד קצת יותר יפה