Ten essential tools for building ASP. NET websites (1)

Recently I used ASP. NET to build a simple public website for my company (the address of this Website: http://superexpert.com /). In this process, we use a large number of free tools. It will be very interesting to summarize the necessary tools for building an ASP. NET Website. These tools support both ASP. NET Web Forms and ASP. net mvc.

Performance Tools

I have read two books about the front-end Performance of the website (these two excellent books are High Performance Web Sites and Even Faster Web Sites, by Steve Souders) in the future, I will be very sensitive to the front-end performance of my website. According to Steve Souders's prime performance rule:

"First, we should optimize the front-end performance. The end user's response time is 80% or more ." You can use the following tools to reduce the size of images used by ASP. NET applications, as well as the size of JavaScript files and CSS files.

1, Sprite and Image Optimization Framework

In an article in A List Apart (this article titled: CSS sprites: Image Slicing's Kiss of Death, For details, refer to: http://www.alistapart.com/articles/sprites), the first mention of CSS sprites. When using sprites, You need to combine multiple images used by a website into a single image. Then, on a Web page, use CSS trickery to display a specific "sub-image ".

Sprites can effectively reduce the number of requests when displaying a Web page. Requesting a large image is much faster than requesting multiple small images. Generally, the more resources (images, JavaScript files, and CSS files) transmitted over a network cable, the slower your website will be.

However, most people do not want to use sprites, because using sprites requires a lot of work. You must merge all the images and then write appropriate CSS rules to display the sub-images. Microsoft's Sprite and Image Optimization Framework saves us the effort. This frame can automatically merge images for you. In addition, this framework includes an ASP. NET Web Forms control and an ASP. net mvc helper, which makes it easier to display sub-images. You can download the Sprite and Image Optimization Framework from CodePlex.

: Http://aspnet.codeplex.com/releases/view/50869

Sprite and Image Optimization Framework is written by Morgan McClean. At Microsoft, his office is close to my office. Morgan is a very smart person. He is a Canadian intern. When he built the framework, we discussed the frame. (As far as I know, he is still developing this framework .)

Morgan adds some advanced features to this framework. For example, Sprite and Image Optimization Framework supports "image inlining ". When you use "image inlining", real images are stored in CSS files. This is an example of "image inlining:

 
 

  
  
.Home_StephenWalther_small-jpg  
  
  
{  
  
  
 
  
  
width:75px;  
  
  
height:100px;  
  
  
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABkCAIAAABB1lpeAAAAB  
  
  
GdBTUEAALGOfPtRkwAAACBjSFJNAACHDwAAjA8AAP1SAACBQAAAfXkAAOmLAAA85QAAGcxzPIV3AAAKL  
  
  
s+zNfREAAAAASUVORK5CYII=) no-repeat 0% 0%;  
  
  
 
  
  
} 
 
 

Real Images (in this example, an image displayed on the Superexpert.com website homepage) are stored in this CSS file. If you browse the Superexpert.com website, you will find that few independent images can be downloaded. In the following figure, all images with red boxes use CSS sprites:

Unfortunately, when using the Sprite and Image Optimization Framework, there are some "traps" that need to be noted. In order to bypass these "traps", there are still some peripheral work to be done. In my subsequent articles, I will detail what these "traps" are and how to bypass them ".

2. Microsoft Ajax Minifier

At any time, you should use "far future header" to merge, minimize (minify), compress and cache all JavaScript and CSS files. Microsoft Ajax Minifier makes it easier to minimize JavaScript and CSS files.

Please do not confuse the minimization and compression. You need to do both of these jobs. According to Souders, after you compress a JavaScript file, you can minimize the size of the file by 20% (average.

When you minimize a JavaScript file or a CSS file, you can use various techniques to minimize the size of the file before compressing it. For example, you can minimize a JavaScript by replacing the long JavaScript variable name with a short JavaScript variable name, and removing unnecessary blank and comments. You can minimize CSS files in the same way. For example, you can replace the long color name (# fffff) with the short color name (# fffff ).

Microsoft Ajax Minifier is developed by Microsoft employee Ron Logan. This tool is used internally by several large Microsoft websites. We also use this tool in the ASP. NET team. I think Ron can publish this tool to CodePlex so that everyone in the world can use this excellent tool. You can download this tool from the ASP. NET Ajax site:

: Http://www.asp.net/ajaxlibrary/Download.ashx

This tool documentation can refer to: http://www.asp.net/ajaxlibrary/AjaxMinDocumentation.ashx

I created an installer for Microsoft Ajax Minifier. When creating the installation program, I also created a Visual Studio generation task. When you automatically generate the program in Visual Studio, it makes it easier to minimize JavaScript and CSS files. You can use Ajax Minifier Quick Start to learn how to prepare this task. (For details about Ajax Minifier Quick Start, refer to: http://www.asp.net/ajaxlibrary/AjaxMinQuickStart.ashx)

3, ySlow

YSlow is a free Firefox extension provided by Yahoo. It allows you to test the front-end of your website.

Http://developer.yahoo.com/yslow/ of ySlow

This is the current test result of the "Superexpert.com" Website:

The overall score for "Superexpert.com" is "B" (not perfect, but not bad ). YSlow is not perfect. For example, although the Superexpert.com website uses the Microsoft Ajax Content Delivery Network (for Microsoft Ajax Content Delivery Network, refer to: http://www.asp.net/ajaxlibrary/cdn.ashx) that supports JavaScript libraries (for example: jQuery ), however, because the Content Delivery Network is not used, "F" is obtained ".

(This article is reproduced from 51cto and translated by Zhou Xuefeng. )