真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

面向.Net程序員的前端優(yōu)化-創(chuàng)新互聯(lián)

背景

成都創(chuàng)新互聯(lián)是一家專注于網(wǎng)站建設、網(wǎng)站制作與策劃設計,朝陽網(wǎng)站建設哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設十年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:朝陽等地區(qū)。朝陽做網(wǎng)站價格咨詢:18980820575

作為web開發(fā)人員大家大多了解一些網(wǎng)站的性能優(yōu)化方法,其實大部分方法都不復雜,例如針對前端js和css的壓縮來減少請求大小,通過合并來減少請求次數(shù)。這里站在.Net后端程序員的角度來看一下如何最簡單快捷的處理這一類需求。

全文分3節(jié) combres,mvc4的Bundle,以及2者的對比和個人的意見觀點。


Combres

Combres是一個.NET程序庫,能夠縮小,壓縮,合并,以及緩存的JavaScript和CSS資源,ASP.NET和ASP.NET MVC的Web應用程序。簡單地說,它可以幫助您的應用程序更好的頁面加載速度。

源代碼存在 https://github.com/buunguyen/combres

通過nuget添加combres非常簡單

面向.Net程序員的前端優(yōu)化

加載完成后 .Net3.5的同學需要按照combres.readme的指導,首先刪除掉AppStart_Combres.cs然后在global.asax中添加Combres引用,然后在RegisterRoutes() 或者 Application_Start()添加方法RouteTable.Routes.AddCombresRoute("Combres")

.Net4.0的同學可以忽略這一步,你們會在發(fā)現(xiàn)nuget包安裝程序(下面簡稱包管理)已經(jīng)自動幫你們生成了這樣一段代碼

    public static class Combres {        public static void PreStart() {
            RouteTable.Routes.AddCombresRoute("Combres");
        }
    }

下面最主要的就是就是配置combres.xml,至于webconfig的配置包管理已經(jīng)幫大家設置完成。

為了方便測試,我們建個白板頁面,然后添加最簡單的js文件和css文件。

面向.Net程序員的前端優(yōu)化

那么下面來看測試效果,我們先建一個簡單的測試頁面。

@{

  ViewBag.Title = "Home Page";

}

打開fiddler查看頁面請求。

面向.Net程序員的前端優(yōu)化

然后我們使用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") %>

再來查看頁面請求

面向.Net程序員的前端優(yōu)化

請求次數(shù)變?yōu)榱?次,大小也被壓縮的非常低。

Combres的實現(xiàn)原理不復雜,服務器端先加載配置緩存起來,根據(jù)配置節(jié)點生成hash值,具體實現(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 {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,當我們請求產(chǎn)生的時候會由一個CombresHandler根據(jù)hashvalue來獲取對應的資源并且進行合并壓縮。

處理流程首先判斷你的瀏覽器是否支持壓縮,通過Context.Request.Headers["Accept-Encoding"]。

如果判斷為接受combres會對資源進行2層壓縮,我們這里簡單稱只為minifier和gzip。

如果瀏覽器不支持壓縮那么gzip這一層會被忽略,minifier的壓縮方法使用YuiJSMinifier和YuiCssMinifier,方法依賴雅虎的開源組件Yahoo.Yui.Compressor

面向.Net程序員的前端優(yōu)化

handler會為新的請求生成一個cachekey:“Combres/Combres.RequestProcessor/siteJs/1342767128/gzip”

和etag key“Combres/Combres.RequestProcessor/siteJs/1342767128/gzip/@etag”(實際上真正存于Context.Response.Cache的ETag是"1342767128")

分別對應服務器端緩存和瀏覽器緩存,當下次請求已經(jīng)發(fā)現(xiàn)有key存在,便從緩存中直接獲取資源或者直接304。

根據(jù)結果圖來看,combres確實是一款很不錯的工具。


 MVC4的Bundle

MVC4以后自帶了Bundling和Minification。操作也很簡單,新建一個mvc4項目。在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不會啟用壓縮,減少請求數(shù)量和帶寬。

我們來看一下效果圖:

面向.Net程序員的前端優(yōu)化

請求次數(shù)減少,也有壓縮。但是比起combres效率要差了一些。但是這樣未必就是說combres要更好。


 對比

2者相比較而已combres的效率要高一些,但是mvc4作為原生自帶的功能,對于版本管理比較苛刻的系統(tǒng)還是具有優(yōu)勢,并且對于大型項目還要涉及到cdn問題。

目前combres是不支持cdn的,雖然作者給出了相關的話題,但是作者本人最后還有給出了不是令人滿意的答復。

面向.Net程序員的前端優(yōu)化

相對MVC4的Bundle是支持cdn的,只需要在對應節(jié)點添加 bundles.UseCdn = true即可。

所以根據(jù)各自項目不同的場景,酌情處理吧。

個人推薦靜態(tài)資源的壓縮和合并盡量在前端就做掉,例如grunt。這樣不管是cdn還是部署發(fā)布都更合理沒有必要再浪費后端的處理資源。


本篇先到此,希望對大家有幫助!

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。


新聞標題:面向.Net程序員的前端優(yōu)化-創(chuàng)新互聯(lián)
轉載來源:http://weahome.cn/article/dhgocd.html

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部