構(gòu)建ASP.NET網(wǎng)站十大必備工具
原創(chuàng)【51CTO 11月30日外電頭條】最近使用ASP.NET為公司構(gòu)建了一個(gè)簡(jiǎn)單的公共網(wǎng)站（該網(wǎng)站的地址：http://superexpert.com/）。在這個(gè)過(guò)程中，我們使用了數(shù)量很多的免費(fèi)工具，如果把構(gòu)建ASP.NET網(wǎng)站的必備工具總結(jié)一下，將會(huì)是一件十分有趣的事情。這些工具既支持ASP.NET Web Forms又支持ASP.NET MVC。
性能工具
讀了兩本關(guān)于網(wǎng)站的前端性能的書（這兩本優(yōu)秀的圖書分別是：《High Performance Web Sites》 和 《Even Faster Web Sites》，作者是Steve Souders）以后，我對(duì)網(wǎng)站的前端性能十分敏感。根據(jù)Steve Souders的性能黃金法則：
“首先應(yīng)該對(duì)前端性能進(jìn)行優(yōu)化，終端用戶的響應(yīng)時(shí)間有80%或更多花費(fèi)在這方面了。”你可以使用下面這些工具來(lái)減少ASP.NET應(yīng)用程序使用的圖像的尺寸，以及JavaScript文件，CSS文件的體積。
1，Sprite and Image Optimization Framework
在A List Apart的一篇文章中（這篇文章的題目是：CSS sprites: Image Slicing’s Kiss of Death，具體可以參考：http://www.alistapart.com/articles/sprites），首次提到了CSS sprites。當(dāng)你使用sprites的時(shí)候，你需要把一個(gè)網(wǎng)站使用的多個(gè)圖像合并成為一個(gè)單一的圖像。然后，在一個(gè)Web頁(yè)面中，使用CSS trickery來(lái)顯示特定的“子圖像”。
sprites的主要優(yōu)勢(shì)是，顯示一個(gè)Web頁(yè)面的時(shí)候，它可以有效地減少請(qǐng)求的次數(shù)。請(qǐng)求一個(gè)大圖像比請(qǐng)求多個(gè)小圖像快得多。一般來(lái)說(shuō)，通過(guò)網(wǎng)線傳輸?shù)馁Y源（圖像，JavaScript文件，CSS文件）越多，你的網(wǎng)站就越慢。
但是，大多數(shù)人都不愿意使用sprites，因?yàn)槭褂胹prites需要做很多的工作。你必須要合并所有的圖像，然后編寫合適的CSS規(guī)則來(lái)顯示子圖像。微軟的 Sprite and Image Optimization Framework 可以讓我們省去這些繁瑣的工作。這個(gè)框架可以自動(dòng)地為你合并圖像。此外，這個(gè)框架還包含一個(gè)ASP.NET Web Forms control 和一個(gè)ASP.NET MVC helper，它們可以讓顯示子圖像變得更加容易。你可以從CodePlex下載 Sprite and Image Optimization Framework。
下載地址：http://aspnet.codeplex.com/releases/view/50869
Sprite and Image Optimization Framework是 Morgan McClean 編寫的。在微軟，他的辦公室和我的辦公室緊挨著。Morgan是一個(gè)十分聰明的人，他是加拿大的實(shí)習(xí)生。當(dāng)他構(gòu)建這個(gè)框架的時(shí)候，我們一起討論了那個(gè)框架。（據(jù)我所知，他還在繼續(xù)開發(fā)這個(gè)框架。）
Morgan給這個(gè)框架添加了一些高級(jí)的功能。例如，Sprite and Image Optimization Framework支持“image inlining”。當(dāng)你使用“image inlining”的時(shí)候，真正的圖像被存儲(chǔ)在CSS文件中。這是一個(gè)“image inlining”的例子：
- .Home_StephenWalther_small-jpg
- {
- width:75px;
- height:100px;
- background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABkCAIAAABB1lpeAAAAB
- GdBTUEAALGOfPtRkwAAACBjSFJNAACHDwAAjA8AAP1SAACBQAAAfXkAAOmLAAA85QAAGcxzPIV3AAAKL
- s+zNfREAAAAASUVORK5CYII=) no-repeat 0% 0%;
- }
真正的圖像（在這個(gè)例子中，是一個(gè)顯示在Superexpert.com網(wǎng)站主頁(yè)上的圖片）被存儲(chǔ)在這個(gè)CSS文件中。如果你瀏覽一下Superexpert.com網(wǎng)站，你會(huì)發(fā)現(xiàn)幾乎沒有幾個(gè)獨(dú)立的圖像可以被下載。在下面這張截圖中，所有帶紅框的圖像都是使用CSS sprites的：
不幸的是，使用 Sprite and Image Optimization Framework 的時(shí)候，有一些“陷阱”需要注意一下。為了繞開這些“陷阱”，還有一些周邊的工作需要做。在我以后的文章中，我會(huì)詳細(xì)講述這些“陷阱”都是什么，以及如何繞開這些“陷阱”。
2，Microsoft Ajax Minifier
無(wú)論何時(shí)，你都應(yīng)該通過(guò)“far future header”來(lái)合并，最小化（minify），壓縮和緩存所有的JavaScript文件和CSS文件。Microsoft Ajax Minifier可以讓最小化JavaScript文件和CSS文件變得更加容易。
請(qǐng)不要把最小化和壓縮搞混了。這兩個(gè)工作你都需要做。根據(jù)Souders的觀點(diǎn)，在你壓縮了一個(gè)JavaScript文件以后，你還可以通過(guò)最小化來(lái)減少20%（平均）的體積。
當(dāng)你最小化一個(gè)JavaScript文件，或者一個(gè)CSS文件的時(shí)候，你可以使用各種技巧在壓縮那個(gè)文件以前盡可能地減少那個(gè)文件的尺寸。例如，你可以通過(guò)用短的JavaScript變量名替換長(zhǎng)的JavaScript變量名的方式，和移除非必需的空白和注釋的方式來(lái)最小化一個(gè)JavaScript。你可以通過(guò)同樣的方式來(lái)最小化CSS文件，例如，用短的color名（#fff）替換長(zhǎng)的color名（#fffff）。
Microsoft Ajax Minifier是微軟的員工 Ron Logan 開發(fā)的。在內(nèi)部，幾個(gè)大型的微軟網(wǎng)站都使用了這個(gè)工具。在ASP.NET團(tuán)隊(duì)中，我們也使用這個(gè)工具。我認(rèn)為Ron可以把這個(gè)工具發(fā)布到CodePlex上，讓世界上的所有人都可以使用這個(gè)優(yōu)秀的工具。你可以從ASP.NET Ajax站點(diǎn)下載這個(gè)工具：
下載地址：http://www.asp.net/ajaxlibrary/Download.ashx
這個(gè)工具的文檔可以參考：http://www.asp.net/ajaxlibrary/AjaxMinDocumentation.ashx
我為Microsoft Ajax Minifier創(chuàng)建了一個(gè)安裝程序。當(dāng)創(chuàng)建那個(gè)安裝程序的時(shí)候，我還創(chuàng)建了一個(gè)Visual Studio生成任務(wù)，當(dāng)你在Visual Studio中自動(dòng)地進(jìn)行生成的時(shí)候，它可以讓最小化JavaScript文件和CSS文件變得更加容易。你可以通過(guò)《Ajax Minifier Quick Start》來(lái)學(xué)習(xí)如何配制這個(gè)生成任務(wù)。 （關(guān)于《Ajax Minifier Quick Start》，具體可以參考：http://www.asp.net/ajaxlibrary/AjaxMinQuickStart.ashx）
3，ySlow
ySlow這個(gè)工具是Yahoo提供的，它是一個(gè)免費(fèi)的Firefox擴(kuò)展。它可以讓你測(cè)試你的網(wǎng)站的前端。
ySlow的下載地址：http://developer.yahoo.com/yslow/
這是“Superexpert.com”網(wǎng)站當(dāng)前的測(cè)試結(jié)果：
“Superexpert.com”網(wǎng)站的總體得分是“B”（不是很完美，但是也不錯(cuò)了）。ySlow這個(gè)工具并不是盡善盡美的。例如，雖然Superexpert.com網(wǎng)站使用了支JavaScript庫(kù)（例如：jQuery）的Microsoft Ajax Content Delivery Network（關(guān)于Microsoft Ajax Content Delivery Network，具體可以參考：http://www.asp.net/ajaxlibrary/cdn.ashx），但是還是因?yàn)闆]有使用Content Delivery Network而得到了“F”。
正常運(yùn)行時(shí)間
當(dāng)一個(gè)網(wǎng)站發(fā)布以后，你肯定希望你的網(wǎng)站不會(huì)遇到任何問題，一直處在正常運(yùn)行狀態(tài)之中?，F(xiàn)在，我使用下面這些工具來(lái)監(jiān)控“Superexpert.com”網(wǎng)站，確保它一直處在正常運(yùn)行狀態(tài)之中。
#p#
4，ELMAH
ELMAH 是 Error Logging Modules and Handlers for ASP.NET 的縮寫。ELMAH可以讓你記錄下你的網(wǎng)站發(fā)生的任何一個(gè)錯(cuò)誤，在將來(lái)，你可以重新檢查這些錯(cuò)誤。你可以從ELMAH項(xiàng)目的官方網(wǎng)站免費(fèi)下載ELMAH：http://code.google.com/p/elmah/。
ELMAH既支持ASP.NET Web Forms 又支持 ASP.NET MVC。你可以對(duì)ELMAH進(jìn)行配置來(lái)存儲(chǔ)各種不同的錯(cuò)誤（XML文件，事件日志，Access數(shù)據(jù)庫(kù)，SQL數(shù)據(jù)庫(kù)，Oracle數(shù)據(jù)庫(kù)，或者計(jì)算機(jī)RAM。）你還可以讓ELMAH在錯(cuò)誤發(fā)生的時(shí)候，把錯(cuò)誤信息email給你。
在默認(rèn)情況下，在一個(gè)已經(jīng)安裝ELMAH的網(wǎng)站中，你可以通過(guò)請(qǐng)求的elmah.axd頁(yè)面的方式來(lái)訪問ELMAH。這是“Superexpert.com”網(wǎng)站的elmah頁(yè)面的外觀（這個(gè)頁(yè)面是密碼保護(hù)的，因?yàn)樵谝粋€(gè)錯(cuò)誤信息中，可能會(huì)泄露出一些應(yīng)該保密的信息。）
如果你點(diǎn)擊某個(gè)錯(cuò)誤信息，你可以看到原始的ASP.NET的黃屏錯(cuò)誤信息（雖然這個(gè)錯(cuò)誤信息永遠(yuǎn)不會(huì)顯示給真正的用戶）。
我使用全新的ASP.NET軟件包管理器 NuGet（過(guò)去叫做NuPack）來(lái)安裝ELMAH。關(guān)于NuGet，你可以參考Scott Guthrie的博客：http://weblogs.asp.net/scottgu/archive/2010/10/06/announcing-nupack-asp-net-mvc-3-beta-and-webmatrix-beta-2.aspx。你可以從CodePlex下載 NuGet：http://nuget.codeplex.com/。
5，Pingdom
我使用Pingdom來(lái)驗(yàn)證Superexpert.com網(wǎng)站是否總是處在正常運(yùn)行狀態(tài)之中。你可以通過(guò)瀏覽“Pingdom.com”的方式來(lái)注冊(cè)Pingdom。你可以使用Pingdom來(lái)免費(fèi)監(jiān)控一個(gè)網(wǎng)站。
在Pingdom網(wǎng)站上，你可以配置ping你的網(wǎng)站的頻率。我每5分鐘驗(yàn)證一次Superexpert.com 網(wǎng)站是否總是處在正常運(yùn)行狀態(tài)之中。我使用Pingdom服務(wù)來(lái)驗(yàn)證它是否可以從那個(gè)網(wǎng)站的主頁(yè)上檢索到字符串“Contact Us”。
如果你的網(wǎng)站宕機(jī)了，你可以對(duì)Pingdom進(jìn)行配置，讓它通過(guò)email, Twitter, SMS, 或 iPhone來(lái)發(fā)送一個(gè)警報(bào)。我使用這個(gè)Pingdom的iPhone應(yīng)用程序：
6，Host Tracker
如果你的網(wǎng)站宕機(jī)了，你需要一些方式來(lái)判斷這是本地網(wǎng)絡(luò)的問題，還是對(duì)每個(gè)人來(lái)說(shuō)，你的網(wǎng)站都宕機(jī)了。我使用一個(gè)叫做“Host-Tracker.com”的網(wǎng)站來(lái)檢查一個(gè)網(wǎng)站宕機(jī)的程度。
這是“Superexpert.com”網(wǎng)站從世界各地都可以ping通的時(shí)候，Host-Tracker顯示的結(jié)果：
注意：Host-Tracker從68個(gè)地點(diǎn)（其中包括：Roubaix, France and Scranton, PA等）來(lái)ping “Superexpert.com”網(wǎng)站。
調(diào)試
我這里提到的“調(diào)試”的意義十分廣泛。當(dāng)構(gòu)建一個(gè)網(wǎng)站的時(shí)候，我使用下面這些工具來(lái)驗(yàn)證我并沒有犯錯(cuò)誤。
7，HTML Spell Checker
為什么Visual Studio沒有內(nèi)置一個(gè)拼寫檢查器？不知道——我覺得這有點(diǎn)不可思議。但是，幸運(yùn)的是，ASP.NET團(tuán)隊(duì)的前成員編寫了一個(gè)免費(fèi)的拼寫檢查器，你可以在ASP.NET頁(yè)面上使用這個(gè)拼寫檢查器。
我發(fā)現(xiàn)一個(gè)拼寫檢查器是必不可少的。認(rèn)為你自己的拼寫能力絕對(duì)是完美的，只是自欺欺人而已。當(dāng)我真正地運(yùn)行拼寫檢查工具，發(fā)現(xiàn)我的所有拼寫錯(cuò)誤的時(shí)候，我恨不得找個(gè)地縫鉆進(jìn)去。
把HTML Spell Checker擴(kuò)展添加到Visual Studio中的最快方法是在Visual Studio中選擇“Tools”菜單項(xiàng)，然后點(diǎn)擊“Extension Manager”。點(diǎn)擊“Online Gallery”，然后索搜“HTML Spell Checker”：
#p#
8，IIS SEO Toolkit
如果人們無(wú)法通過(guò)Google找到你的網(wǎng)站，那么還不如不構(gòu)建這個(gè)網(wǎng)站。微軟提供了一個(gè)優(yōu)秀的IIS擴(kuò)展，叫做“IIS Search Engine Optimization Toolkit ”（關(guān)于IIS Search Engine Optimization Toolkit 具體可以參考：http://www.iis.net/download/seotoolkit），你可以使用它來(lái)檢測(cè)出可能會(huì)影響頁(yè)面排名的問題。你也可以使用它快速地為你的網(wǎng)站創(chuàng)建一個(gè)sitemap，你可以把這個(gè)sitemap提交給Google或Bing。你甚至可以為一個(gè)ASP.NET MVC網(wǎng)站生成一個(gè)sitemap。
這是“Superexpert.com”網(wǎng)站的分析報(bào)告的概述：
注意：“Sueprexpert.com”網(wǎng)站存在很多的問題。例如，有65個(gè)頁(yè)面的超鏈接已經(jīng)失效了。你可以進(jìn)一步查看這些問題的詳細(xì)信息，找出這些問題發(fā)生的地點(diǎn)和具體的頁(yè)面。
9，LinqPad
如果你的ASP.NET網(wǎng)站需要訪問一個(gè)數(shù)據(jù)庫(kù)，那么你應(yīng)該使用LINQ to Entities這個(gè)實(shí)體框架。使用LINQ，會(huì)把一些用C#編寫的神奇的查詢轉(zhuǎn)換成SQL查詢。如果你在編寫LINQ查詢的時(shí)候不小心謹(jǐn)慎一些的話，你很可能會(huì)在無(wú)意之間構(gòu)建出一個(gè)性能十分糟糕的網(wǎng)站。
LinqPad（LinqPad的官方站點(diǎn)：http://www.linqpad.net/）是一個(gè)免費(fèi)的工具，它可以讓你實(shí)驗(yàn)?zāi)愕腖INQ查詢。它甚至支持Microsoft SQL CE 4 和 Azure。
你可以使用LinqPad來(lái)執(zhí)行一個(gè)LINQ to Entities查詢，然后看看結(jié)果。你也可以使用它來(lái)查看對(duì)那個(gè)數(shù)據(jù)庫(kù)執(zhí)行的SQL語(yǔ)句：
10，.NET Reflector
我每天都使用.NET Reflector。.NET Reflector這個(gè)工具可以讓你把一個(gè)程序集反匯編成C#或VB.NET代碼。當(dāng)你沒有真正的源代碼的時(shí)候，你可以使用.NET Reflector來(lái)查看一個(gè)程序集的“源代碼”。你可以從Redgate的網(wǎng)站下載.NET Reflector的免費(fèi)版本：http://www.red-gate.com/products/reflector/。
我主要使用.NET Reflector來(lái)幫助我搞清楚代碼在內(nèi)部是如何工作的。例如，為了更好的理解MVC Image helper是如何工作的，我使用.NET Reflector對(duì)the Sprite and Image Optimization Framework進(jìn)行了反匯編。這是Image helper類的一部分反匯編代碼：
總結(jié)
在這篇博客中，我們討論了我構(gòu)建“Superexpert.com”網(wǎng)站的時(shí)候使用的幾個(gè)工具。我使用這些工具來(lái)提高“Superexpert.com”網(wǎng)站的性能，改善“Superexpert.com”網(wǎng)站的SEO（Search Engine Optimization），確保“Superexpert.com”網(wǎng)站的正常運(yùn)行時(shí)間，或者對(duì)“Superexpert.com”網(wǎng)站進(jìn)行調(diào)試。在這篇博客中討論的所有工具都是免費(fèi)的。此外，所有這些工具都是既支持 ASP.NET Web Forms 又支持 ASP.NET MVC的。
原文名：10 Essential Tools for building ASP.NET Websites
原文鏈接：http://stephenwalther.com/blog/archive/2010/11/22/10-essential-tools-for-building-asp-net-websites.aspx
【51CTO獨(dú)家特稿，轉(zhuǎn)載請(qǐng)表明出處及作者！】
【編輯推薦】
