|
背景 作為web開發(fā)人員大家大多了解一些網(wǎng)站的性能優(yōu)化方法，其實(shí)大部分方法都不復(fù)雜,例如針對(duì)前端js和css的壓縮來減少請(qǐng)求大小，通過合并來減少請(qǐng)求次數(shù)。這里站在.Net后端程序員的角度來看一下如何最簡單快捷的處理這一類需求。 全文分3節(jié) combres，mvc4的Bundle，以及2者的對(duì)比和個(gè)人的意見觀點(diǎn)。 Combres Combres是一個(gè).NET程序庫，能夠縮小，壓縮，合并，以及緩存的JavaScript和CSS資源，ASP.NET和ASP.NET MVC的Web應(yīng)用程序。簡單地說，它可以幫助您的應(yīng)用程序更好的頁面加載速度??。 源代碼存在 https://github.com/buunguyen/combres 通過nuget添加combres非常簡單 加載完成后 .Net3.5的同學(xué)需要按照combres.readme的指導(dǎo)，首先刪除掉AppStart_Combres.cs然后在global.asax中添加 .Net4.0的同學(xué)可以忽略這一步，你們會(huì)在發(fā)現(xiàn)nuget包安裝程序（下面簡稱包管理）已經(jīng)自動(dòng)幫你們生成了這樣一段代碼 public static class Combres { public static void PreStart() { RouteTable.Routes.AddCombresRoute("Combres"); } } 下面最主要的就是就是配置combres.xml,至于webconfig的配置包管理已經(jīng)幫大家設(shè)置完成。 為了方便測(cè)試，我們建個(gè)白板頁面，然后添加最簡單的js文件和css文件。 那么下面來看測(cè)試效果，我們先建一個(gè)簡單的測(cè)試頁面。  @{ ViewBag.Title = "Home Page"; } <script src="~/Scripts/Demo/JScript1.js" type="text/javascript"></script> <script src="~/Scripts/Demo/JScript2.js" type="text/javascript"></script> <script src="~/Scripts/Demo/JScript3.js" type="text/javascript"></script> <link href="~/Content/Demo/StyleSheet1.css" rel="stylesheet" type="text/css" /> <link href="~/Content/Demo/StyleSheet2.css" rel="stylesheet" type="text/css" /> <link href="~/Content/Demo/StyleSheet3.css" rel="stylesheet" type="text/css" /> 打開fiddler查看頁面請(qǐng)求。 然后我們使用combres修改頁面代碼 mvc： 1 @using Combres.Mvc 2 @{ 3 ViewBag.Title = "Home Page"; 4 } 5 @Url.CombresLink("siteCss") 6 @Url.CombresLink("siteJs") webform： 1 <%= WebExtensions.CombresLink("siteJs") %> 2 <%= WebExtensions.CombresLink("siteCss") %> 再來查看頁面請(qǐng)求 請(qǐng)求次數(shù)變?yōu)榱?次，大小也被壓縮的非常低。 Combres的實(shí)現(xiàn)原理不復(fù)雜，服務(wù)器端先加載配置緩存起來，根據(jù)配置節(jié)點(diǎn)生成hash值，具體實(shí)現(xiàn)如下 1 public string Generate(ResourceSet rs) 2 { 3 if (Log.IsDebugEnabled) 4 Log.Debug("Computing hash for set " + rs.Name + ". Current hash: " + rs.Hash); 5 6 var contributingFactors = new List<object> {rs.DebugEnabled}; 7 rs.Filters.ToList().ForEach(contributingFactors.Add); 8 rs.CacheVaryProviders.ToList().ForEach(contributingFactors.Add); 9 rs.Resources.ToList().ForEach(r => 10 { 11 contributingFactors.Add(r.ReadFromCache(true)); 12 contributingFactors.Add(r.ForwardCookie); 13 contributingFactors.Add(r.Mode); 14 contributingFactors.Add(r.Minifier); 15 }); 16 var hash = contributingFactors.Select(f => f.GetHashCode()) 17 .Aggregate(17, (accum, element) => 31 * accum + element) 18 .ToString(); 19 20 if (Log.IsDebugEnabled) 21 Log.Debug("New hash: " + hash); 22 return hash; 23 } 得出來的值就是我們上面看到的combres.xsd/setname/hashvalue中的hashvalue，當(dāng)我們請(qǐng)求產(chǎn)生的時(shí)候會(huì)由一個(gè)CombresHandler根據(jù)hashvalue來獲取對(duì)應(yīng)的資源并且進(jìn)行合并壓縮。 處理流程首先判斷你的瀏覽器是否支持壓縮,通過Context.Request.Headers["Accept-Encoding"]。 如果判斷為接受combres會(huì)對(duì)資源進(jìn)行2層壓縮，我們這里簡單稱只為minifier和gzip。 如果瀏覽器不支持壓縮那么gzip這一層會(huì)被忽略，minifier的壓縮方法使用YuiJSMinifier和YuiCssMinifier，方法依賴雅虎的開源組件Yahoo.Yui.Compressor handler會(huì)為新的請(qǐng)求生成一個(gè)cachekey：“Combres/Combres.RequestProcessor/siteJs/1342767128/gzip” 和etag key“Combres/Combres.RequestProcessor/siteJs/1342767128/gzip/@etag”（實(shí)際上真正存于Context.Response.Cache的ETag是"1342767128"） 分別對(duì)應(yīng)服務(wù)器端緩存和瀏覽器緩存，當(dāng)下次請(qǐng)求已經(jīng)發(fā)現(xiàn)有key存在，便從緩存中直接獲取資源或者直接304。 根據(jù)結(jié)果圖來看，combres確實(shí)是一款很不錯(cuò)的工具。 MVC4的Bundle MVC4以后自帶了Bundling和Minification。操作也很簡單，新建一個(gè)mvc4項(xiàng)目。在App_Start文件夾下找到BundleConfig.cs。 添加如下代碼：  1 public static void RegisterBundles(BundleCollection bundles) 2 { 3 4 bundles.Add(new ScriptBundle("~/bundles/jquerydemo").Include( 5 "~/Scripts/Demo/JScript1.js", 6 "~/Scripts/Demo/JScript2.js", 7 "~/Scripts/Demo/JScript3.js")); 8 9 bundles.Add(new StyleBundle("~/Content/cssdemo").Include( 10 "~/Content/Demo/StyleSheet1.css", 11 "~/Content/Demo/StyleSheet2.css", 12 "~/Content/Demo/StyleSheet3.css")); 13 } 頁面端添加： 1 @Styles.Render("~/Content/cssdemo") 2 @Scripts.Render("~/bundles/jquerydemo") 然后記住在BundleConfig.cs添加BundleTable.EnableOptimizations = true;不然MVC4不會(huì)啟用壓縮，減少請(qǐng)求數(shù)量和帶寬。 我們來看一下效果圖： 請(qǐng)求次數(shù)減少，也有壓縮。但是比起combres效率要差了一些。但是這樣未必就是說combres要更好。 對(duì)比 2者相比較而已combres的效率要高一些，但是mvc4作為原生自帶的功能，對(duì)于版本管理比較苛刻的系統(tǒng)還是具有優(yōu)勢(shì)，并且對(duì)于大型項(xiàng)目還要涉及到cdn問題。 目前combres是不支持cdn的，雖然作者給出了相關(guān)的話題，但是作者本人最后還有給出了不是令人滿意的答復(fù)。 相對(duì)MVC4的Bundle是支持cdn的，只需要在對(duì)應(yīng)節(jié)點(diǎn)添加 bundles.UseCdn = true即可。 所以根據(jù)各自項(xiàng)目不同的場(chǎng)景，酌情處理吧。 個(gè)人推薦靜態(tài)資源的壓縮和合并盡量在前端就做掉，例如grunt。這樣不管是cdn還是部署發(fā)布都更合理沒有必要再浪費(fèi)后端的處理資源。 本篇先到此，希望對(duì)大家有幫助！ |
|
|
