把js包起來一次下載加快網頁速度
- 2009-01-31
- 15732
- 0
現在因為AJAX和jQuery的火紅，很多web developer都察覺到了應該要把畫面的顯示還給前端處理，所以一個網站應用js技術的次數或處理就越來越多了，如果你一次有許多的js要載入那是會造成許多的web GET對於速度還是會有些許的影響，前些日子BOSS給了我一篇電子書介紹.NET framework 3.5 SP1 新增的玩意，我發現了一個ScriptReferenceProfiler的元件他可以幫助我們把頁面上的js包起來一次下載。
程式碼的鍊金術-重構Plus [2024-11-10]開課 共5H
SQL Server高效能開發密技 [2024-12-07]開課 共14H
首先當然是先去下載ScriptReferenceProfiler回來阿，直接放到你網頁下面的Bin資料夾就會自動參考了，demo用了一頁很簡單的ajaxToolkits來作範例，先來看看直接測試的web GET有幾次
看完了以後我們要直接把這元件註冊到頁面上(當然你也可以註冊到web.config內)。 放在HTML標籤上吧
<%@ register assembly="ScriptReferenceProfiler" namespace="ScriptReferenceProfiler" tagprefix="cc1" %> <!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">
然後我們移動至頁面的最下面加上<cc1:ScriptReferenceProfiler runat="server" />
<cc1:ScriptReferenceProfiler runat="server" /> </form> </body> </html>
回到頁面上按F5(重新整理)你會發現頁面最下面多了一堆玩意兒
把他們全部複製下來
回到MasterPage在ScriptManager裡面加上些玩意
<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.20820.16598, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/> <asp:ScriptReference name="AjaxControlToolkit.Common.DateTime.js" assembly="AjaxControlToolkit, Version=3.0.20820.16598, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/> <asp:ScriptReference name="AjaxControlToolkit.Compat.Timer.Timer.js" assembly="AjaxControlToolkit, Version=3.0.20820.16598, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/> <asp:ScriptReference name="AjaxControlToolkit.Animation.Animations.js" assembly="AjaxControlToolkit, Version=3.0.20820.16598, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/> <asp:ScriptReference name="AjaxControlToolkit.ExtenderBase.BaseScripts.js" assembly="AjaxControlToolkit, Version=3.0.20820.16598, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/> <asp:ScriptReference name="AjaxControlToolkit.Animation.AnimationBehavior.js" assembly="AjaxControlToolkit, Version=3.0.20820.16598, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/> <asp:ScriptReference name="AjaxControlToolkit.PopupExtender.PopupBehavior.js" assembly="AjaxControlToolkit, Version=3.0.20820.16598, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/> <asp:ScriptReference name="AjaxControlToolkit.Common.Threading.js" assembly="AjaxControlToolkit, Version=3.0.20820.16598, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/> <asp:ScriptReference name="AjaxControlToolkit.Calendar.CalendarBehavior.js" assembly="AjaxControlToolkit, Version=3.0.20820.16598, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/> </Scripts> </CompositeScript> </asp:ScriptManager>
<Script>包住的就是你剛複製的部份全貼上去阿
然後我們再看看，相同的頁面
GET是不是明顯少了許多阿!!
But!! 注意But它又來了，這玩意是在.NET Framework 3.5 SP1才有的東西，或許你沒升級到那麼新，或許案子就是只能跑在2.0 那搞P勒，簡單有個更簡單的解決方法通常有用微軟的AJAX的應該會有有抓AJAX Toolkits吧早在不知道那一版的AJAX Toolkits就想到這種瘋狂要求的笨問題了，所以他有把原生的ScriptManager包裝成ToolkitScriptManager，只要你改用ToolkitScriptManager那上面一切的步驟你都不用做...看看下圖，一樣會打包一次丟而且要做的事情還變少了
兩種方法都推薦給您，可以依照需求來使用(雖然我都直接用ToolkitScriptManager)
回應討論