構建ASP.NET網站十大必備工具

 

最近使用ASP.NET爲公司構建了一個簡單的公共網站（該網站的地址：http://superexpert.com/）。在這個過程當中，咱們使用了數量不少的免費工具，若是把構建ASP.NET網站的必備工具總結一下，將會是一件十分有趣的事情。這些工具既支持ASP.NET Web Forms又支持ASP.NET MVC。

性能工具

讀了兩本關於網站的前端性能的書（這兩本優秀的圖書分別是：《High Performance Web Sites》 和 《Even Faster Web Sites》，做者是Steve Souders）之後，我對網站的前端性能十分敏感。根據Steve Souders的性能黃金法則：

「首先應該對前端性能進行優化，終端用戶的響應時間有80%或更多花費在這方面了。」你可使用下面這些工具來減小ASP.NET應用程序使用的圖像的尺寸，以及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。當你使用sprites的時候，你須要把一個網站使用的多個圖像合併成爲一個單一的圖像。而後，在一個Web頁面中，使用CSS trickery來顯示特定的「子圖像」。

sprites的主要優點是，顯示一個Web頁面的時候，它能夠有效地減小請求的次數。請求一個大圖像比請求多個小圖像快得多。通常來講，經過網線傳輸的資源（圖像，JavaScript文件，CSS文件）越多，你的網站就越慢。

可是，大多數人都不肯意使用sprites，由於使用sprites須要作不少的工做。你必需要合併全部的圖像，而後編寫合適的CSS規則來顯示子 圖像。微軟的 Sprite and Image Optimization Framework 可讓咱們省去這些繁瑣的工做。這個框架能夠自動地爲你合併圖像。此外，這個框架還包含一個ASP.NET Web Forms control 和一個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是一個十分聰明的人，他是加拿大的實習生。當他構建這個框架的時候，咱們一塊兒討論了那個框 架。（據我所知，他還在繼續開發這個框架。）

Morgan給這個框架添加了一些高級的功能。例如，Sprite and Image Optimization Framework支持「image inlining」。當你使用「image inlining」的時候，真正的圖像被存儲在CSS文件中。這是一個「image inlining」的例子：

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

真正的圖像（在這個例子中，是一個顯示在Superexpert.com網站主頁上的圖片）被存儲在這個CSS文件中。若是你瀏覽一下 Superexpert.com網站，你會發現幾乎沒有幾個獨立的圖像能夠被下載。在下面這張截圖中，全部帶紅框的圖像都是使用CSS sprites的：

不幸的是，使用 Sprite and Image Optimization Framework 的時候，有一些「陷阱」須要注意一下。爲了繞開這些「陷阱」，還有一些周邊的工做須要作。在我之後的文章中，我會詳細講述這些「陷阱」都是什麼，以及如何 繞開這些「陷阱」。

2，Microsoft Ajax Minifier

不管什麼時候，你都應該經過「far future header」來合併，最小化（minify），壓縮和緩存全部的JavaScript文件和CSS文件。Microsoft Ajax Minifier可讓最小化JavaScript文件和CSS文件變得更加容易。

請不要把最小化和壓縮搞混了。這兩個工做你都須要作。根據Souders的觀點，在你壓縮了一個JavaScript文件之後，你還能夠經過最小化來減小20%（平均）的體積。

當你最小化一個JavaScript文件，或者一個CSS文件的時候，你可使用各類技巧在壓縮那個文件之前儘量地減小那個文件的尺寸。例如，你 能夠經過用短的JavaScript變量名替換長的JavaScript變量名的方式，和移除非必需的空白和註釋的方式來最小化一個 JavaScript。你能夠經過一樣的方式來最小化CSS文件，例如，用短的color名（#fff）替換長的color名（#fffff）。

Microsoft Ajax Minifier是微軟的員工 Ron Logan 開發的。在內部，幾個大型的微軟網站都使用了這個工具。在ASP.NET團隊中，咱們也使用這個工具。我認爲Ron能夠把這個工具發佈到CodePlex 上，讓世界上的全部人均可以使用這個優秀的工具。你能夠從ASP.NET Ajax站點下載這個工具：

下載地址：http://www.asp.net/ajaxlibrary/Download.ashx

這個工具的文檔能夠參考：http://www.asp.net/ajaxlibrary/AjaxMinDocumentation.ashx

我爲Microsoft Ajax Minifier建立了一個安裝程序。當建立那個安裝程序的時候，我還建立了一個Visual Studio生成任務，當你在Visual Studio中自動地進行生成的時候，它可讓最小化JavaScript文件和CSS文件變得更加容易。你能夠經過《Ajax Minifier Quick Start》來學習如何配製這個生成任務。 （關於《Ajax Minifier Quick Start》，具體能夠參考：http://www.asp.net/ajaxlibrary/AjaxMinQuickStart.ashx）

3，ySlow

ySlow這個工具是Yahoo提供的，它是一個免費的Firefox擴展。它可讓你測試你的網站的前端。

ySlow的下載地址：http://developer.yahoo.com/yslow/

這是「Superexpert.com」網站當前的測試結果：

「Superexpert.com」網站的整體得分是「B」（不是很完美，可是也不錯了）。ySlow這個工具並非盡善盡美的。例如，雖然 Superexpert.com網站使用了支JavaScript庫（例如：jQuery）的Microsoft Ajax Content Delivery Network（關於Microsoft Ajax Content Delivery Network，具體能夠參考：http://www.asp.net/ajaxlibrary/cdn.ashx），可是仍是由於沒有使用Content Delivery Network而獲得了「F」。

 

正常運行時間

當一個網站發佈之後，你確定但願你的網站不會遇到任何問題，一直處在正常運行狀態之中。如今，我使用下面這些工具來監控「Superexpert.com」網站，確保它一直處在正常運行狀態之中。

4，ELMAH

ELMAH 是 Error Logging Modules and Handlers for ASP.NET 的縮寫。ELMAH可讓你記錄下你的網站發生的任何一個錯誤，在未來，你能夠從新檢查這些錯誤。你能夠從ELMAH項目的官方網站免費下載ELMAH：http://code.google.com/p/elmah/。

ELMAH既支持ASP.NET Web Forms 又支持 ASP.NET MVC。你能夠對ELMAH進行配置來存儲各類不一樣的錯誤（XML文件，事件日誌，Access數據庫，SQL數據庫，Oracle數據庫，或者計算機 RAM。）你還可讓ELMAH在錯誤發生的時候，把錯誤信息email給你。

在默認狀況下，在一個已經安裝ELMAH的網站中，你能夠經過請求的elmah.axd頁面的方式來訪問ELMAH。這是「Superexpert.com」網站的elmah頁面的外觀（這個頁面是密碼保護的，由於在一個錯誤信息中，可能會泄露出一些應該保密的信息。）

若是你點擊某個錯誤信息，你能夠看到原始的ASP.NET的黃屏錯誤信息（雖然這個錯誤信息永遠不會顯示給真正的用戶）。

我使用全新的ASP.NET軟件包管理器 NuGet（過去叫作NuPack）來安裝ELMAH。關於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來驗證Superexpert.com網站是否老是處在正常運行狀態之中。你能夠經過瀏覽「Pingdom.com」的方式來註冊Pingdom。你可使用Pingdom來免費監控一個網站。

在Pingdom網站上，你能夠配置ping你的網站的頻率。我每5分鐘驗證一次Superexpert.com 網站是否老是處在正常運行狀態之中。我使用Pingdom服務來驗證它是否能夠從那個網站的主頁上檢索到字符串「Contact Us」。

若是你的網站宕機了，你能夠對Pingdom進行配置，讓它經過email, Twitter, SMS, 或 iPhone來發送一個警報。我使用這個Pingdom的iPhone應用程序：

6，Host Tracker

若是你的網站宕機了，你須要一些方式來判斷這是本地網絡的問題，仍是對每一個人來講，你的網站都宕機了。我使用一個叫作「Host-Tracker.com」的網站來檢查一個網站宕機的程度。

這是「Superexpert.com」網站從世界各地均可以ping通的時候，Host-Tracker顯示的結果：

注意：Host-Tracker從68個地點（其中包括：Roubaix, France and Scranton, PA等）來ping 「Superexpert.com」網站。

調試

我這裏提到的「調試」的意義十分普遍。當構建一個網站的時候，我使用下面這些工具來驗證我並無犯錯誤。

7，HTML Spell Checker

爲何Visual Studio沒有內置一個拼寫檢查器？不知道——我以爲這有點難以想象。可是，幸運的是，ASP.NET團隊的前成員編寫了一個免費的拼寫檢查器，你能夠在ASP.NET頁面上使用這個拼寫檢查器。

我發現一個拼寫檢查器是必不可少的。認爲你本身的拼寫能力絕對是完美的，只是自欺欺人而已。當我真正地運行拼寫檢查工具，發現個人全部拼寫錯誤的時候，我巴不得找個地縫鑽進去。

把HTML Spell Checker擴展添加到Visual Studio中的最快方法是在Visual Studio中選擇「Tools」菜單項，而後點擊「Extension Manager」。點擊「Online Gallery」，而後索搜「HTML Spell Checker」：

 

 

8，IIS SEO Toolkit

若是人們沒法經過Google找到你的網站，那麼還不如不構建這個網站。微軟提供了一個優秀的IIS擴展，叫作「IIS Search Engine Optimization Toolkit 」（關於IIS Search Engine Optimization Toolkit 具體能夠參考：http://www.iis.net/download/seotoolkit），你可使用它來檢測出可能會影響頁面排名的問題。你也可使用它快速地爲你的網站建立一個sitemap，你能夠把這個sitemap提交給Google或Bing。你甚至能夠爲一個ASP.NET MVC網站生成一個sitemap。

這是「Superexpert.com」網站的分析報告的概述：

注意：「Sueprexpert.com」網站存在不少的問題。例如，有65個頁面的超連接已經失效了。你能夠進一步查看這些問題的詳細信息，找出這些問題發生的地點和具體的頁面。

9，LinqPad

若是你的ASP.NET網站須要訪問一個數據庫，那麼你應該使用LINQ to Entities這個實體框架。使用LINQ，會把一些用C#編寫的神奇的查詢轉換成SQL查詢。若是你在編寫LINQ查詢的時候不當心謹慎一些的話，你 極可能會在無心之間構建出一個性能十分糟糕的網站。

LinqPad（LinqPad的官方站點：http://www.linqpad.net/）是一個免費的工具，它可讓你實驗你的LINQ查詢。它甚至支持Microsoft SQL CE 4 和 Azure。

你可使用LinqPad來執行一個LINQ to Entities查詢，而後看看結果。你也可使用它來查看對那個數據庫執行的SQL語句：

10，.NET Reflector

我天天都使用.NET Reflector。.NET Reflector這個工具可讓你把一個程序集反彙編成C#或VB.NET代碼。當你沒有真正的源代碼的時候，你可使用.NET Reflector來查看一個程序集的「源代碼」。你能夠從Redgate的網站下載.NET Reflector的免費版本：http://www.red-gate.com/products/reflector/。

我主要使用.NET Reflector來幫助我搞清楚代碼在內部是如何工做的。例如，爲了更好的理解MVC Image helper是如何工做的，我使用.NET Reflector對the Sprite and Image Optimization Framework進行了反彙編。這是Image helper類的一部分反彙編代碼：

總結

在這篇博客中，咱們討論了我構建「Superexpert.com」網站的時候使用的幾個工具。我使用這些工具來提升 「Superexpert.com」網站的性能，改善「Superexpert.com」網站的SEO（Search Engine Optimization），確保「Superexpert.com」網站的正常運行時間，或者對「Superexpert.com」網站進行調試。在這 篇博客中討論的全部工具都是免費的。此外，全部這些工具都是既支持 ASP.NET Web Forms 又支持 ASP.NET MVC的。

                                                                      

                                                                             ---轉自 周雪峯（構建ASP.NET網站十大必備工具）