Recently used ASP.NET Build a simple public website for the company ( The address of the website :http://superexpert.com/). In the process , We use a lot of free tools , If you build ASP.NET The essential tools of the website , It's going to be a very interesting thing . These tools support both ASP.NET Web Forms And support ASP.NET MVC.

Performance tools

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》, The author is Steve Souders) in the future , I'm very sensitive to the front end performance of the website . according to Steve Souders The golden rule of performance :

“ First of all, we should optimize the front-end performance , The response time of end users is 80% Or more on this .” You can use these tools to reduce ASP.NET The size of the image used by the application , as well as JavaScript file ,CSS Volume of file .

1,Sprite and Image Optimization Framework

stay A List Apart In an article of ( The title of this article is :CSS sprites: Image Slicing’s Kiss of Death, For details, please refer to :http://www.alistapart.com/articles/sprites), For the first time CSS sprites. When you use sprites When , You need to combine multiple images used by a website into a single image . then , In a Web On the page , Use CSS trickery To display specific “ Sub image ”.

sprites The main advantage of , Display a Web On the page , It can effectively reduce the number of requests . Asking for a large image is much faster than asking for multiple small images . Generally speaking , Resources transmitted through network cable ( Images ,JavaScript file ,CSS file ) The more , The slower your website is .

however , Most people don't want to use sprites, Because use sprites A lot of work needs to be done . You have to merge all the images , And then write the right CSS Rules to display sub Images . Microsoft Sprite and Image Optimization Framework It can save us all the tedious work . This framework can automatically merge images for you . Besides , The framework also contains a ASP.NET Web Forms control And a ASP.NET MVC helper, They make it easier to display sub images . You can start your CodePlex download Sprite and Image Optimization Framework.

Download address :http://aspnet.codeplex.com/releases/view/50869

Sprite and Image Optimization Framework yes Morgan McClean Compiling . At Microsoft , His office is next to mine .Morgan He is a very clever man , He's an intern in Canada . When he builds this framework , We talked about that box together frame .( as far as I am concerned , He's still working on this framework .)

Morgan Add some advanced functions to the framework . for example ,Sprite and Image Optimization Framework Support “image inlining”. When you use “image inlining” When , The real image is stored in CSS In file . This is a “image inlining” Example :

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

The real image ( In this case , It's a display in Superexpert.com Pictures on the website's home page ) Stored in this CSS In file . If you look at it Superexpert.com Website , You'll find that there are few independent images that can be downloaded . In the screenshot below , All images with red boxes are using CSS sprites Of :

Unfortunately , Use Sprite and Image Optimization Framework When , Somewhat “ trap ” You need to pay attention to . To get around this “ trap ”, There is still some peripheral work to be done . In my future articles , I'll talk about that in detail “ trap ” What are they , And how to Get around these “ trap ”.

2,Microsoft Ajax Minifier

No matter when , You should pass “far future header” To merge , To minimize the (minify), Compress and cache all JavaScript Document and CSS file .Microsoft Ajax Minifier You can minimize JavaScript Document and CSS Files become easier .

Please don't confuse minimization with compression . You need to do both . according to Souders Point of view , Before you compress a JavaScript After file , You can also minimize 20%( Average ) Volume .

When you minimize one JavaScript file , Or a CSS When you file , You can use various techniques to reduce the size of that file as much as possible before compressing it . for example , you It can be done by using short JavaScript Variable names replace long ones JavaScript The way of variable names , And remove unnecessary whitespace and comments to minimize a JavaScript. You can minimize... In the same way CSS file , for example , Use short color name (#fff) Replace the long one color name (#fffff).

Microsoft Ajax Minifier It's a Microsoft employee Ron Logan Developed . In the internal , Several large Microsoft websites use this tool . stay ASP.NET Team , We also use this tool . In my submission Ron You can publish this tool to CodePlex On , Let everyone in the world use this excellent tool . You can start your ASP.NET Ajax Site to download this tool :

Download address :http://www.asp.net/ajaxlibrary/Download.ashx

The documentation for this tool can be found in :http://www.asp.net/ajaxlibrary/AjaxMinDocumentation.ashx

I am for Microsoft Ajax Minifier Created an installation program . When you create that installation program , I also created one Visual Studio Build task , When you are in Visual Studio When generating automatically in , It can minimize JavaScript Document and CSS Files become easier . You can go through 《Ajax Minifier Quick Start》 To learn how to configure this generation task . ( About 《Ajax Minifier Quick Start》, For details, please refer to :http://www.asp.net/ajaxlibrary/AjaxMinQuickStart.ashx)

3,ySlow

ySlow This tool is Yahoo Provided , It's a free Firefox Expand . It allows you to test the front end of your website .

ySlow Download address :http://developer.yahoo.com/yslow/

This is a “Superexpert.com” The current test results of the website :

“Superexpert.com” The overall score of the website is “B”( It's not perfect , But it's also good ).ySlow This tool is not perfect . for example , although Superexpert.com The website uses JavaScript library ( for example :jQuery) Of Microsoft Ajax Content Delivery Network( About Microsoft Ajax Content Delivery Network, For details, please refer to :http://www.asp.net/ajaxlibrary/cdn.ashx), But it's still because it's not used Content Delivery Network And I got it “F”.

structure ASP.NET Ten essential tools for websites (1) More articles about

  1. structure ASP.NET Ten essential tools for websites

    Recently used ASP.NET Build a simple public website for the company ( The address of the website :http://superexpert.com/). In the process , We use a lot of free tools , If you build ASP.NET A must-have tool for a website ...

  2. structure ASP.NET Ten essential tools for websites (2)

    Normal operation time When a website is published , You certainly hope your website won't run into any problems , Always in normal operation . Now? , I use these tools to monitor “Superexpert.com” Website , Make sure it's always in good working order . ...

  3. MySQL The administrator treasures : Inventory of ten essential tools

    author :dongdongzzcs The first 1 page : [IT168 Manuscript ] The author of this article Daniel Nichter yes MySQL The developer of the tool , He is MySQL The administrator recommended ten essential tools . Here is the full text : MySQL It's a set ...

  4. SQLServerDBA Ten essential tools

    Once with some DBA When communicating with database developers , Ask them what they have used DB The tools for , Most people except SSMS and Profile outside , Basically no other tools have been used : indeed ,SSMS and Profile Strong enough , The big part of the job ...

  5. 【 turn 】SQLServerDBA Ten essential tools --- Make life easier

    Once with some DBA When communicating with database developers , Ask them what they have used DB The tools for , Most people except SSMS and Profile outside , Basically no other tools have been used : indeed ,SSMS and Profile Strong enough , The big part of the job ...

  6. SQLServerDBA Ten essential tools --- Make life easier ( turn )

    Once with some DBA When communicating with database developers , Ask them what they have used DB The tools for , Most people except SSMS and Profile outside , Basically no other tools have been used : indeed ,SSMS and Profile Strong enough , The big part of the job ...

  7. SQLServerDBA Ten essential tools --- Make life easier

    Original paste :http://www.cnblogs.com/fygh/archive/2012/04/25/2469563.html Foreign countries organize and expand posts :http://weblogs.sqlteam.com/ml ...

  8. SQL Server DBA Ten essential tools to make life easy

    [IT168 technology ] Once with some DBA When communicating with database developers , Ask them what they have used DB The tools for , Most people except SSMS and Profile outside , I haven't used it Other tools ; indeed ,SSMS and Profil ...

  9. Keep up with the pace Ten necessities in the era of big data IT Skill

    Keep up with the pace Ten necessities in the era of big data IT Skill New ideas give birth to new technologies , So many new words are created , Cloud computing . big data .BYOD. social media …… In the age of the Internet , All kinds of new words emerge in endlessly , It's overwhelming . These new technologies , These emerging applications and corresponding IT ...

Random recommendation

  1. LeetCode 292. Nim Game

    Problem: You are playing the following Nim Game with your friend: There to stones. The one who remov ...

  2. android Get local SMI Card number

    // Get your phone number TelephonyManager tm = (TelephonyManager)this.getSystemService(Context.TELEPHONY_SERVICE); S ...

  3. linux Network traffic real-time monitoring tool iptraf

    This tool is still very powerful linux Network traffic real-time monitoring tool iptraf [ my Linux, Give Way Linux Easier to use ]IPTraf It's a network monitoring tool , Functional ratio nload More powerful , All traffic can be monitored ,IP Traffic , By agreement ...

  4. .NET Object and the Windows Handle ( Two ): Handle classification and .NET Examples of handle leaks

    The last article introduced the basic concepts of handles , It also describes C# The process of creating a file handle in . We already know that handles represent Windows Internal object , File objects are one of them , But obviously there are more other types of objects in the system . This article will briefly introduce Windows object ...

  5. php Interface development -- Copy reduction Codeigniter My wheel

    Interface requirements : Output json Single entrance Security http://segmentfault.com/q/1010000000143852 be based on token verification ?session? cache session cookie ...

  6. Blob API And problem records

    Connected to a <js Create a download file >, Record the core part Blob Of API, >> Portal  , At the same time, let's talk about a problem encountered in the use process . Let's start with the question : use Blob Create a suffix of .sql The file of , The content is ...

  7. Android Stduio Use ( 7、 ... and )--Structure window

    1. This blog post introduces Android see .Java Tools for all properties and class methods in the file :Structure window 2. We know Eclipse Of OutLine The window can view .java All the properties and methods of the file . 2.Andro ...

  8. String Formatting in C#

    Original address http://blog.stevex.net/string-formatting-in-csharp/ When I started working with the .NET framew ...

  9. Python Seventeenth days abstract class

    from abc import ABCMeta, abstractmethod class A(metaclass=ABCMeta): call A Is an abstract class @abstractmethod def tes ...

  10. Windows Server 2016-Active Directory Domain service port summary

    This chapter is a brief summary of Windows server Active Directory and Active Directory Domain services (AD DS) Port requirements for components . In the production environment, we are making network adjustment . Firewall or switch ...