- oriented. NET Programmer's front-end optimization

Background

As a web developer, most people understand the performance optimization methods of some websites, in fact, most of the methods are not complex, such as the compression of the front-end JS and CSS to reduce the request size, by merging to reduce the number of requests. Here stand. NET back-end Programmer's perspective on how to handle this type of requirement with the simplest and quickest.

The full text is divided into 3 sections Combres,mvc4 bundle, and 2 contrast and individual opinion views.

Combres

Combres is a. NET library that is capable of narrowing, compressing, merging, and caching JavaScript and CSS resources, Web applications and ASP. Simply put, it can help your application better page loading speed.

Source Code exists Https://github.com/buunguyen/combres

Adding combres through NuGet is simple

650) this.width=650; "src=" http://images.cnitblog.com/i/87114/201408/061504301478745.jpg "/>

After the load is complete. Net3.5 students need to follow the guidance of Combres.readme, first remove Appstart_combres.cs and then add in Global.asaxCombres引用，然后在RegisterRoutes() 或者 Application_Start()添加方法RouteTable.Routes.AddCombresRoute("Combres")

. Net4.0 students can ignore this step, you will find the NuGet Package Installer (hereinafter referred to as package management) has automatically helped you generate such a piece of code

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

The following is the most important is to configure the Combres.xml, as for the Webconfig configuration package management has helped you set up the completion.

To facilitate testing, we built a whiteboard page, and then added the simplest JS files and CSS files.

650) this.width=650; "src=" http://images.cnitblog.com/i/87114/201408/061516393654559.jpg "/>

So let's look at the test results, we'll build a simple test page.

@{

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"/>

Open fiddler to view page requests.

650) this.width=650; "src=" http://images.cnitblog.com/i/87114/201408/061521201008625.jpg "/>

Then we use Combres to modify the page code

Mvc:

1 @using combres.mvc2 @{3 viewbag.title = "Home page", 4}5 @Url. Combreslink ("Sitecss") 6 @Url. Combreslink ("Sitejs")

WebForm

1 <%= webextensions.combreslink ("Sitejs")%> 2 <%= webextensions.combreslink ("Sitecss")%>

Check the page request again.

650) this.width=650; "src=" http://images.cnitblog.com/i/87114/201408/061528384595379.jpg "/>

The number of requests has been changed to 2 times, and the size is also compressed very low.

Combres implementation of the principle is not complex, server-side load configuration cache, according to the configuration node generated hash value, the specific implementation of the following

 1         public string generate (ResourceSet &NBSP;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             &nbsP;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   & nbsp;     } 

The value that we see above is the HashValue in the Combres.xsd/setname/hashvalue, and when we request it, we get the corresponding resource by a combreshandler based on HashValue and merge compression.

The processing process first determines whether your browser supports compression by context.request.headers["Accept-encoding".

If you are judged to accept that combres will compress the resources 2 layers, we simply call it minifier and gzip.

If the browser does not support compression then gzip this layer will be ignored, Minifier compression method using Yuijsminifier and Yuicssminifier, method relies on Yahoo's Open source components Yahoo.Yui.Compressor

650) this.width=650; "src=" http://images.cnitblog.com/i/87114/201408/061632268032728.jpg "/>

Handler will generate a cachekey:&ldquo; for the new request combres/combres.requestprocessor/sitejs/1342767128/gzip&rdquo;

and ETag key&ldquo; combres/combres.requestprocessor/sitejs/1342767128/gzip/@etag &rdquo; (actually the etag that really exists in Context.Response.Cache is " 1342767128 ")

corresponding to the server-side cache and browser cache, when the next request has found a key exists, then directly from the cache to obtain resources or directly 304.

　　According to the result graph, Combres is indeed a very good tool.

Bundle of MVC4

　　MVC4 later brought bundling and minification. The operation is also very simple, create a new MVC4 project. Locate BundleConfig.cs under the App_start folder.

Add the following code:

 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          }

Page side add:

1 @Styles. Render ("~/content/cssdemo") 2 @Scripts. Render ("~/bundles/jquerydemo")

Then remember to add bundletable.enableoptimizations = True in BundleConfig.cs, otherwise MVC4 will not enable compression, reducing the number of requests and bandwidth.

Let's take a look:

650) this.width=650; "src=" http://images.cnitblog.com/i/87114/201408/061709226789989.jpg "/>

The number of requests is reduced and compression is also available. But it's a little less efficient than combres. But this is not necessarily to say combres to be better.

Compare

　　2 compared to the combres efficiency is higher, but mvc4 as the native features, for the version management of the more stringent systems still have advantages, and for large projects also involve CDN problem.

At present, Combres is not support CDN, although the author gave the relevant topics, but the author himself finally gave a not satisfactory answer.

650) this.width=650; "src=" http://images.cnitblog.com/i/87114/201408/061716121627021.jpg "/>

A relative MVC4 bundle is a CDN-enabled one that simply adds bundles to the corresponding node. Usecdn = True.

So according to the different scenarios of their respective projects, do it at your discretion.

　　Personal recommendation compression and merging of static resources as far as possible at the front end, such as grunt. This makes it more reasonable to have a CDN or a deployment release, and no need to waste back-end processing resources.

This article first to this, I hope to help you!

This article is from the "Internet of concern" blog, please be sure to keep this source http://dubing.blog.51cto.com/3911153/1538465