Use httpcombiner to accelerate your website

Previous<Use Microsoft Ajax minifier to automatically compress static resources on the server>I have received a lot of meaningful exchanges and suggestions, and I have been constantly trying to optimize some websites recently. I will continue to write some or translate some optimizations.ArticleI want to share with you some suggestions from experts on the one hand for some reference.

After the compression step introduced in the previous article, our resource files (JS or CSS static resource files are not specified) have been successfully reduced, keeping them slim, in this way, it is not so difficult to transmit data from the server to the client. It is a small success, but according34 golden codes for Yahoo website page Performance OptimizationWe provide suggestions for further optimization work. For example, four CSS files and five JS files are introduced to a page (the number is still decent, and there may be more ), in this way, nine requests will be generated during page loading, and JS loading is blocked, which will also cause performance damage to a certain extent. After thinking about this file httpcombiner. ashx on the internet, I will introduce what it can do for us.

Httpcombiner. ashx is an HTTP ProcessingProgramIt can merge multiple CSS, JavaScript, or URL into a response to accelerate page loading. at the same time, it can merge, compress and cache the response, so that our applications can be loaded more quickly and have better scalability.

Introduction

It is a good practice to replace multiple small JavaScript and CSS files with a large JavaScript or CSS file to achieve better maintainability, however, the website performance will have a certain impact (this means that as the file size increases, the server memory consumption will also increase ). Although you shouldCodeSmall files are written separately. CSS files are split into small pieces. However, when a browser requests these files, an equivalent number of HTTP requests are generated. Each HTTP request will generate a network round-trip process from your browser to the server, and delay in arriving at the server and returning the browser. This is called latency. Therefore, if you have 4 JavaScript files and 3 CSS files loaded on the page, you waste seven times of Network round-trip time. In the United States, the average latency is 70 milliseconds, which means you waste 7*70 = 490 milliseconds, with a latency of about half a second. The average latency of visiting your page in countries outside the United States is about 200 milliseconds, which means that your page has 1400 milliseconds of time spent waiting. The browser cannot render your page well until your CSS and JavaScript files are fully loaded. The longer the latency, the slower the page loading.

 

What is the impact of latency?

Display the latency of each request, resulting in significant latency in page loading

You can reduce the waiting time by using CDN acceleration. Read my previous article about using CDN. However, a better solution is to useHttphandler to merge multiple files into one file for one-time output. Therefore, you only need<SCRIPT> or <link> tags are merged into one and pointedHttphandler specifies which files need to be transmitted to the browser segment as a response. This reduces the number of requests and eliminates the latency caused by it.This saves browser from making into requests and eliminates the latency.

You can see that by combining multiple javascripts and CSS files, you can improve all aspects.

On the web page of a movie, you will see many javascripts references.

Code

 <  Script  Type  = "Text/JavaScript" SRC  = "Http://www.msmvps.com/Content/JScript/jquery.js"  >  </  Script  >  <  Script  Type   = "Text/JavaScript"  SRC  = "Http://www.msmvps.com/Content/JScript/jDate.js  ">  </  Script  > <  Script   Type  = "Text/JavaScript"  SRC  = "Http://www.msmvps.com/Content/JScript/jQuery.Core.js"  >  </  Script  >  <  Script  Type  = "Text/JavaScript"  SRC = "Http://www.msmvps.com/Content/JScript/jQuery.Delegate.js  ">  </  Script  >  <  Script  Type  = "Text/JavaScript"  SRC  = "Http://www.msmvps.com/Content/JScript/jQuery.Validation.js  ">   </   Script   > 

You can use HTTP handler to set multiple unique <Script> Merge tags into one:

 
<ScriptType= "Text/JavaScript"SRC= "Httpcombiner. ashx? S = jqueryscripts & t = text/JavaScript & V = 1"></Script>
 

HTTP handler reads all files by the name set in the configuration file and combines them into a response and transfers them to the client. The gzip compressed response saves bandwidth usage. in addition, a suitable cache header is generated to cache the browser cache of the response. Therefore, the browser will not send a request to the server again.

In the query string, 's' indicates the setting name in the configuration file. 'T' indicates the file content type, and 'v' indicates the version number. once the response is cached, if you change any file in the configuration, you will have to add the value of the parameter 'V' to allow the browser to download the server's latest response again:

 

 
<LinkType= "Text/CSS"REL= "Stylesheet"Href= "Httpcombiner. ashx? S = commoncss & t = text/CSS & V = 1"> </Link>
 

InThe settings in Web. config are as follows:

Code

< Appsettings >
< Add Key = "Jqueryscripts" Value = "~ /Content/JScript/jquery. JS,
~ /Content/JScript/JDate. JS,
~ /Content/JScript/jquery. Core. JS,
~ /Content/JScript/jquery. Delegate. JS,
~ /Content/JScript/jquery. validation. js" />
< Add Key = "Commoncss" Value = "~ /App_themes/default/theme.css,
~ /CSS/common.css,
~ /Controls/GRID/grid.css" />
</ Appsettings >

 

Use httpcombiner to implement a website example

I have written a test website to demonstrate how to use httpcombiner. The website contains 2 CSS and 2 JS files.DefaultIn the. aspx File<Link> And<Script> Both requests of the tag point to the httpcombiner. ashx file. .

The content of default. aspx is as follows:

As you can see <Link> And<Script>TagBoth pointHttpcombiner. ashx, and the parameter's isTwo sets defined in the web. config file :

How the processing program works:

• First, obtain the set name through the input parameter "S ".
• Then, obtainTheFile Name (separated by a specific separator)
• Read each file and store it in the buffer zone.
• Compress the data in the buffer using Gzip
• Send the data in the compressed buffer to the browser.
• Data in the compressed buffer zone is cached using the ASP. NET cache module to directly access the cache when the same setting is frequently requested, without reading files from the file system or external URL.

Benefits of this processing program:

• This can reduce the time caused by network latency. If you set more files at a time, the more network latency is saved, and the more performance you get.
• Because all the compressed response data is cached, this saves repeated steps to read and compress from the file system, and improves application scalability.

How to Make httphandler work

First, the handler obtains the setname, contenttype, and version parameters from querystring:

If the set files have been cached, they will be directly written to the cache. Otherwise, they willMemorystreamAre loaded separately. If the browser supports compressed output,Memorystream uses gzipstream for compression.

After all files are merged and compressed, the merged binary stream is cached and can be directly read from the cache with frequent access.

The getfilebytes method reads files and returns binary data based on the file path or http url. Therefore, you can use the virtual path of your site or the external siteJavascript/CSSURL

 

WritebytesThe method is clever. It will generate a suitable header based on whether the binary stream is compressed, and set the browser cache header to make the browser cache server response

Currently, exceptions may occur when deployed to the running environment (The remote host closes the connection. The error code is 0x80072746.), Replace the last two lines of code in the above image

 
Response. Flush ();
If (response. isclientconnected)
Response. outputstream. Write (bytes, 0, bytes. Length );
Response. End ();
 

 
In addition, the httpcombiner.ashx file can be directly stored in the same directory as .js).css (excluding that your project has a unified path Processing Solution). Otherwise, the path reference problem may occur.
 

How to use this file:

• IncludeHttpcombiner. ashxIn your project
• In yourWeb. config <Appsettings> Define the file nodes to be set
• Change <Link> And <Script> Tag pointingHttpcombiner. ashxThe format is as follows:
  Httpcombiner. ashx? S =TheNode name>& T =<File Type>& Amp; V =<Version Number>

End

This article is a summary of the optimization project. The solution comes from the Internet and is translated and organized. If there are any mistakes or suggestions, please discuss them together.

Original article connection: http://www.codeproject.com/KB/aspnet/HttpCombine.aspx download example

 

========================================================== ==============================

Supplement:

# 6th Floor Iced green teaThe combres component provided is of great value. It is more informative than the solution provided in this Article. you can slam the connection to onlookers. There are also related articles in the blog garden. Here are several links.

Http://www.codeproject.com/KB/aspnet/combres2.aspx (original on codeproject)

Http://www.cnblogs.com/shanyou/archive/2010/04/03/1703597.html (the comments part of this article also have many highlights)

Http://www.cnblogs.com/liping13599168/archive/2010/04/04/1704154.html (this article also analyzes some source code of combres)

# 7th floorAnother image sprite component shared by Ayumi was introduced in the previous blog post. In ASP. NET, small images are automatically merged and displayed using CSS Sprite.