Ⅰ 構建ASP.NET網站十大必備工具
構建ASP NET網站十大必備工具
最近使用ASP NET為公司構建了一個簡單的公共網站（該網站的地址） 在這個過程中 我們使用了數量很多的免費工具 如果把構建ASP NET網站的必備工具總結一下 將會是一件十分有趣的事情 這些工具既支持ASP NET Web Forms又支持ASP NET MVC
性能工具
讀了兩本關於網站的前端性能的書（這兩本優秀的圖書分別是 《High Performance Web Sites》 和 《Even Faster Web Sites》 作者是Steve Souders）以後 我對網站的前端性能十分敏感 根據Steve Souders的性能黃金法則
「首先應該對前端性能進行優化 終端用戶的響應時間有 %或更多花費在這方面了 」你可以使用下面這些工具來減少ASP NET應用程序使用的圖像的尺寸 以及JavaScript文件 CSS文件的體積
Sprite and Image Optimization Framework
在A List Apart的一篇文章中（這篇文章的題目是 CSS sprites Image Slicing』s Kiss of Death 具體可以參考） 首次提到了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
Sprite and Image Optimization Framework是 Man McClean 編寫的 在微軟 他的辦公室和我的辦公室緊挨著 Man是一個十分聰明的人 他是加拿大的實習生 當他構建這個框架的時候 我們一起討論了那個框 架 （據我所知 他還在宴羨繼續開發這個框架 ）
Man給這個框架添加了一些高級的功能 例如 Sprite and Image Optimization Framework支持「image inlining」 當你使用「image inlining」的時候 真正的圖像被存儲在CSS文件中 這是一個「image inlining」的例子
- Home_StephenWalther_ *** all jpg
- {
- 返讓
- width: px;
- height: px;
- background:url(data:image/png;base iVBORw lpeAAAAB
- AAP SAACBQAAAfXkAAOmLAAA QAAGcxzPIV AAAKL
- s+zNfREAAAAASUVORK CYII=)no repeat % %;
- }
真正的圖像（在這個例子中 是一個顯示在Superexpert 網站主頁上的圖片）被存儲在這個CSS文件中 如果你瀏覽一下 Superexpert 網站 你會發現幾乎沒有幾個獨立的圖像可以被下載 在下面這張截圖中 所有帶紅框的圖像都是使用CSS sprites的
不幸的是 使用 Sprite and Image Optimization Framework 的時候 有一些「陷阱」需要注意一下 為了繞開這些「陷阱」 還有一些周邊的工作需要做 在我以後的文章中 我會詳細講述這些「陷阱」都是什麼 以及如何 繞開這些「陷阱」
Microsoft Ajax Minifier
無論何時 你都應該通過「far future header」來合並 最小化（minify） 壓縮和緩存所有的JavaScript文件和CSS文件 Microsoft Ajax Minifier可以讓最小化JavaScript文件和CSS文件變得更加容易
請不要把最小化和壓縮搞混了 這兩個工作你都需要做 根據Souders的觀點 在你壓縮了一個JavaScript文件以後 你還可以通過最小化來減少 %（平均）的體積
當你最小化一個JavaScript文件 或者一個CSS文件的時候 你可以使用各種技巧在壓縮那個文件以前盡可能地減少那個文件的尺寸 例如 你 可以通過用短的JavaScript變數名替換長的JavaScript變數名的方式 和移除非必需的空白和注釋的方式來最小化一個 JavaScript 你可以通過同樣的方式來最小化CSS文件 例如 用短的color名（#fff）替換長的color名（#fffff）
Microsoft Ajax Minifier是微軟的員工 Ron Logan 開發的 在內部 幾個大型的微軟網站都使用了這個工具 在ASP NET團隊中 我們也使用這個工具 我認為Ron可以把這個工具發布到CodePlex 上 讓世界上的所有人都可以使用這個優秀的工具 你可以從ASP NET Ajax站點下載這個工具
這個工具的文檔可以參考
我為Microsoft Ajax Minifier創建了一個安裝程序 當創建那個安裝程序的時候 我還創建了一個Visual Studio生成任務 當你在Visual Studio中自動地進行生成的時候 它可以讓最小化JavaScript文件和CSS文件變得更加容易 你可以通過《Ajax Minifier Quick Start》來學習如何配製這個生成任務 （關於《Ajax Minifier Quick Start》 具體可以參考）
ySlow
ySlow這個工具是Yahoo提供的 它是一個免費的Firefox擴展 它可以讓你測試你的網站的前端
ySlow的
這是「Superexpert 」網站當前的測試結果
「Superexpert 」網站的總體得分是「B」（不是很完美 但是也不錯了） ySlow這個工具並不是盡善盡美的 例如 雖然 Superexpert 網站使用了支JavaScript庫（例如 jQuery）的Microsoft Ajax Content Delivery Neork（關於Microsoft Ajax Content Delivery Neork 具體可以參考） 但是還是因為沒有使用Content Delivery Neork而得到了「F」
正常運行時間
當一個網站發布以後 你肯定希望你的網站不會遇到任何問題 一直處在正常運行狀態之中 現在 我使用下面這些工具來監控「Superexpert 」網站 確保它一直處在正常運行狀態之中
ELMAH
ELMAH 是 Error Logging Moles and Handlers for ASP NET 的縮寫 ELMAH可以讓你記錄下你的網站發生的任何一個錯誤 在將來 你可以重新檢查這些錯誤 你可以從ELMAH項目的官方網站免費下載ELMAH
ELMAH既支持ASP NET Web Forms 又支持 ASP NET MVC 你可以對ELMAH進行配置來存儲各種不同的錯誤（XML文件 事件日誌 Access資料庫 SQL資料庫 Oracle資料庫 或者計算機 RAM ）你還可以讓ELMAH在錯誤發生的時候 把錯誤信息email給你
在默認情況下 在一個已經安裝ELMAH的網站中 你可以通過請求的elmah axd頁面的方式來訪問ELMAH 這是「Superexpert 」網站的elmah頁面的外觀（這個頁面是密碼保護的 因為在一個錯誤信息中 可能會泄露出一些應該保密的信息 ）
如果你點擊某個錯誤信息 你可以看到原始的ASP NET的黃屏錯誤信息（雖然這個錯誤信息永遠不會顯示給真正的用戶）
我使用全新的ASP NET軟體包管理器 NuGet（過去叫做NuPack）來安裝ELMAH 關於NuGet 你可以參考Scott Guthrie的博客 你可以從CodePlex下載 NuGet
Pingdom
我使用Pingdom來驗證Superexpert 網站是否總是處在正常運行狀態之中 你可以通過瀏覽「Pingdom 」的方式來注冊Pingdom 你可以使用Pingdom來免費監控一個網站
在Pingdom網站上 你可以配置ping你的網站的頻率 我每 分鍾驗證一次Superexpert 網站是否總是處在正常運行狀態之中 我使用Pingdom服務來驗證它是否可以從那個網站的主頁上檢索到字元串「Contact Us」
如果你的網站宕機了 你可以對Pingdom進行配置 讓它通過email Twitter SMS 或 iPhone來發送一個警報 我使用這個Pingdom的iPhone應用程序
Host Tracker
如果你的網站宕機了 你需要一些方式來判斷這是本地網路的問題 還是對每個人來說 你的網站都宕機了 我使用一個叫做「Host Tracker 」的網站來檢查一個網站宕機的程度
這是「Superexpert 」網站從世界各地都可以ping通的時候 Host Tracker顯示的結果
注意 Host Tracker從 個地點（其中包括 Roux France and Scranton PA等）來ping 「Superexpert 」網站
調試
我這里提到的「調試」的意義十分廣泛 當構建一個網站的時候 我使用下面這些工具來驗證我並沒有犯錯誤
HTML Spell Checker
為什麼Visual Studio沒有內置一個拼寫檢查器？不知道——我覺得這有點不可思議 但是 幸運的是 ASP NET團隊的前成員編寫了一個免費的拼寫檢查器 你可以在ASP NET頁面上使用這個拼寫檢查器
我發現一個拼寫檢查器是必不可少的 認為你自己的拼寫能力絕對是完美的 只是自欺欺人而已 當我真正地運行拼寫檢查工具 發現我的所有拼寫錯誤的時候 我恨不得找個地縫鑽進去
把HTML Spell Checker擴展添加到Visual Studio中的最快方法是在Visual Studio中選擇「Tools」菜單項 然後點擊「Extension Manager」 點擊「Online Gallery」 然後索搜「HTML Spell Checker」
IIS SEO Toolkit
如果人們無法通過Google找到你的網站 那麼還不如不構建這個網站 微軟提供了一個優秀的IIS擴展 叫做「IIS Search Engine Optimization Toolkit 」（關於IIS Search Engine Optimization Toolkit 具體可以參考） 你可以使用它來檢測出可能會影響頁面排名的問題 你也可以使用它快速地為你的網站創建一個sitemap 你可以把這個sitemap提交給Google或Bing 你甚至可以為一個ASP NET MVC網站生成一個sitemap
這是「Superexpert 」網站的分析報告的概述
注意 「Sueprexpert 」網站存在很多的問題 例如 有 個頁面的超鏈接已經失效了 你可以進一步查看這些問題的詳細信息 找出這些問題發生的地點和具體的頁面
LinqPad
如果你的ASP NET網站需要訪問一個資料庫 那麼你應該使用LINQ to Entities這個實體框架 使用LINQ 會把一些用C#編寫的神奇的查詢轉換成SQL查詢 如果你在編寫LINQ查詢的時候不小心謹慎一些的話 你 很可能會在無意之間構建出一個性能十分糟糕的網站
LinqPad（LinqPad的官方站點）是一個免費的工具 它可以讓你實驗你的LINQ查詢 它甚至支持Microsoft SQL CE 和 Azure
你可以使用LinqPad來執行一個LINQ to Entities查詢 然後看看結果 你也可以使用它來查看對那個資料庫執行的SQL語句
NET Reflector
我每天都使用 NET Reflector NET Reflector這個工具可以讓你把一個程序集反匯編成C#或VB NET代碼 當你沒有真正的源代碼的時候 你可以使用 NET Reflector來查看一個程序集的「源代碼」 你可以從Redgate的網站下載 NET Reflector的免費版本
我主要使用 NET Reflector來幫助我搞清楚代碼在內部是如何工作的 例如 為了更好的理解MVC Image helper是如何工作的 我使用 NET Reflector對the Sprite and Image Optimization Framework進行了反匯編 這是Image helper類的一部分反匯編代碼
總結
lishixin/Article/program/net/201311/14298