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

BKJIA November 30 Internet headlines] recently used ASP. NET to build a simple public website for the company address: 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 excellent books about the website's front-end Performance: 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, the title of this article is: 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 resource 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 this framework, we discussed it together. 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%;  
  
  
 
  
  
} 
 
 

In this example, the real image is an image displayed on the Superexpert.com website homepage.) It is 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 and 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 volume by 20% on 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 the number of CSS files in the same way. For example, you can use a short color name # fff) to replace a long 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 of the "Superexpert.com" website is "B", which is not perfect, but also good ). YSlow is not perfect. For example, although the Superexpert.com website uses Microsoft Ajax Content Delivery Network with a JavaScript Library such as jQuery, for details about Microsoft Ajax Content Delivery Network, refer to: http://www.asp.net/ajaxlibrary/cdn.ashx ), however, because the Content Delivery Network is not used, "F" is obtained ".

Normal running time

After a website is published, you certainly hope that your website will not encounter any problems and will remain in normal operation. Now, I use the following tools to monitor the "Superexpert.com" website and make sure it remains in normal operation.