ASP. NET uses HttpHandler to pack multiple CSS or JS files to speed up page loading

This article from: http://blog.csdn.net/yanghua_kobe/article/details/6840739

Introduced

It is a good practice to use a lot of small JS, CSS files instead of a large JS or CSS file to get better maintainability of your code. But this, in turn, loses the performance of the site. While you should write your JavaScript code in small files and partition large CSS files into small files, when a browser requests those JS and CSS files, it will generate a request for each file. Each HTTP request will cause a "round trip" from your browser to the server, and the wait time between the response server and the client browser is called "latency." Therefore, if you have four JS files and three CSS files that need to be loaded by the page, you will have to wait for the "round trip" on the network seven times. Within the country, the average delay is 70ms. So the total delay is 490ms, about half a second. And from abroad, the average delay is about 200ms. So that means that 1400ms of time is wasted. And until the CSS and JS files are fully loaded, the page will be completely displayed. Therefore, the longer the delay, the more slowly the page loads.

How bad is the delay?

Here's a picture showing how each request produced a "delay" that adds up significantly to the load on the page:

You can reduce the wait time by using the CDN (Content Delivery Network). However, a better solution is to use HttpHandler to provide a single request for multiple files, the HttpHandler consolidates several files and provides one output. So, instead of a lot of <scropt> or <link> tags, you just need to write a <scropt> and <link> tags and mark them in HttpHandler. It is up to you to tell handler which files need to be consolidated, and which files it provides at once for the output. This eliminates the delay caused by many requests made from the browser.

Here you can see if you combine multiple JS files and CSS files into one output, what kind of performance is improved.

In the usual Web page, you will see a lot of JS references:

And we can only use a <script> tag to request the entire set of JS files, instead of each of the <script> tags here:

HttpHandler reads the file names defined in a configuration file, consolidates all those files, and responds to the client at once. It saves bandwidth by compressing the response content with gzip. In addition, it provides a response request header with a cache that caches the response to the browser's cache so that the browser does not need to request it again for subsequent access.

In the request parameter, you can identify the file collection name with the "S" parameter, then use the "T" parameter to identify the content type, and then use the "V" parameter to identify a version. Because the response is cached, if you modify any one of the file collections, you will have to increase the value of the parameter "V" to let the browser download the response again.

With this HttpHandler, you can request a CSS file like this:

Here is a list of how you will need to define the collection of requests in Web. config:

Examples of using the HttpHandler integrator

I've built a simple test site to show you how it's used, and the test site has two CSS and JS files. Default.aspx uses only one <link> and <script> tags to request them via HTTPCOMBINER.ASHX.

Here is the contents of the Default.aspx file:

As you can see, there is a <link> tag that sends a request to HTTPCOMBINER.ASHX and provides the name of the request collection--set_css, and of course a <script> tag requested a set_ A collection of JavaScript.

The above two collections are defined in the Web. config file:

Here is a list of how handler works:

(1) First, it reads the name of the file collection from the "s" parameter

(2) Then it gets the definition of the collection from the Web. config file

(3) It reads each file and caches them in a buffer

(4) Buffers are then compressed via gzip

(5) The contents of the buffer area after being compressed will be sent to the browser

(6) The contents of the compressed buffer area are stored in the ASP. NET buffer, so that subsequent requests to the same collection can fetch data directly from the cache, rather than reading each file from the file system or from the external URL.

Benefits of Handler:

(1) It reduces the number of "round trips" on the network, and the more files you put into a collection, the more you can reduce network latency, which improves performance.

(2) It caches all of the consolidated compression responses, eliminating the chance to read the file system again and again and compress it. It provides extensibility.

How HttpHandler Works

First, Handler reads the collection name, type, and version from the request string:

If the collection of files to be loaded is already cached, the response stream is written directly from the cache. Otherwise, the file will be loaded one after another and then stored in a MemoryStream. MemoryStream is compressed via GZipStream (if the browser supports compressed output).

After all the files have been consolidated and compressed, the consolidated byte stream is cached so that subsequent requests can fetch data directly from the cache.

The Getfilebytes method reads a file or URL and then returns the bytes. So, you can use the virtual path in your website, or you can use the URL to point to a js/css file that is hosted in another domain.

The Writebytes method has many tricks inside. It provides a response header based on whether the byte is a compressed format. It then provides a cache identity header that allows the browser to cache the response content.

How to use this handler?

• Include Httpcombiner.ashx in your project
• Definition file collection in the <appSettings> node of your Web. config profile
• changing <link> and <script> tags, using httpcombiner.ashx required format:httpcombiner.ashx?s=<setname>&t=< Contenttype>&v=<versionno>

Original link: http://www.codeproject.com/KB/aspnet/HttpCombine.aspx Source code: http://download.csdn.net/detail/yanghua_kobe/3654006

Note : Today, when trying to use this technology, you encounter a problem. That is when you package a compressed CSS file. If a picture path is involved in the file (for example, the URL property of background-img). The picture could not be requested correctly. The reason is that usually these pictures use a relative path. The browser usually downloads to the CSS file, the CSS file itself as a reference, based on the relative path of the picture to find the picture. In bulk packaging, the path used to refer to itself becomes the path of the handler, resulting in an error in the path to the search image and cannot be downloaded. In fact, even if the path of the image is set to relative to the relative path of the handler still cannot download!

solution : Use absolute paths, but also depending on how the site is published. If you create a new Web site at the time of publishing, you can express the absolute path of the background picture in the CSS directly from the root by "/". Because when you create a new Web site, you can identify the root directory directly with "/". When you create a new virtual directory, you need to join the folder name of the new virtual directory. such as MyWeb, the absolute path is represented as "/myweb/images ..." in order to get the picture correctly.

ASP. NET uses HttpHandler to pack multiple CSS or JS files to speed up page loading