构建ASPNET网站十大必备工具
最近使用ASPNET为公司构建了一个简单的公共网站（该网站的地址）在这个过程中我们使用了数量很多的免费工具如果把构建ASPNET网站的必备工具总结一下将会是一件十分有趣的事情这些工具既支持ASPNET Web Forms又支持ASPNET MVC
性能工具
读了两本关于网站的前端性能的书（这两本优秀的图书分别是《High Performance Web Sites》 和 《Even Faster Web Sites》作者是Steve Souders）以后我对网站的前端性能十分敏感根据Steve Souders的性能黄金法则
“首先应该对前端性能进行优化终端用户的响应时间有%或更多花费在这方面了”你可以使用下面这些工具来减少ASPNET应用程序使用的图像的尺寸以及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 可以让我们省去这些繁琐的工作这个框架可以自动地为你合并图像此外这个框架还包含一个ASPNET Web Forms control 和一个ASPNET MVC helper它们可以让显示子图像变得更加容易你可以从CodePlex下载 Sprite and Image Optimization Framework
Sprite and Image Optimization Framework是 Morgan McClean 编写的在微软他的办公室和我的办公室紧挨着Morgan是一个十分聪明的人他是加拿大的实习生当他构建这个框架的时候我们一起讨论了那个框 架（据我所知他还在继续开发这个框架）
Morgan给这个框架添加了一些高级的功能例如Sprite and Image Optimization Framework支持“image inlining”当你使用“image inlining”的时候真正的图像被存储在CSS文件中这是一个“image inlining”的例子
- Home_StephenWalther_smalljpg
- {
- width:px;
- height:px;
- background:url(data:image/png;baseiVBORwKGgoAAAANSUhEUgAAAEsAAABkCAIAAABBlpeAAAAB
- GdBTUEAALGOfPtRkwAAACBjSFJNAACHDwAAjAAAPSAACBQAAAfXkAAOmLAAAQAAGcxzPIVAAAKL
- s+zNfREAAAAASUVORKCYII=)norepeat%%;
- }
真正的图像（在这个例子中是一个显示在Superexpertcom网站主页上的图片）被存储在这个CSS文件中如果你浏览一下 Superexpertcom网站你会发现几乎没有几个独立的图像可以被下载在下面这张截图中所有带红框的图像都是使用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 开发的在内部几个大型的微软网站都使用了这个工具在ASPNET团队中我们也使用这个工具我认为Ron可以把这个工具发布到CodePlex 上让世界上的所有人都可以使用这个优秀的工具你可以从ASPNET Ajax站点下载这个工具
这个工具的文档可以参考
我为Microsoft Ajax Minifier创建了一个安装程序当创建那个安装程序的时候我还创建了一个Visual Studio生成任务当你在Visual Studio中自动地进行生成的时候它可以让最小化JavaScript文件和CSS文件变得更加容易你可以通过《Ajax Minifier Quick Start》来学习如何配制这个生成任务 （关于《Ajax Minifier Quick Start》具体可以参考）
ySlow
ySlow这个工具是Yahoo提供的它是一个免费的Firefox扩展它可以让你测试你的网站的前端
ySlow的
这是“Superexpertcom”网站当前的测试结果
“Superexpertcom”网站的总体得分是“B”（不是很完美但是也不错了）ySlow这个工具并不是尽善尽美的例如虽然 Superexpertcom网站使用了支JavaScript库（例如jQuery）的Microsoft Ajax Content Delivery Network（关于Microsoft Ajax Content Delivery Network具体可以参考）但是还是因为没有使用Content Delivery Network而得到了“F”
正常运行时间
当一个网站发布以后你肯定希望你的网站不会遇到任何问题一直处在正常运行状态之中现在我使用下面这些工具来监控“Superexpertcom”网站确保它一直处在正常运行状态之中
ELMAH
ELMAH 是 Error Logging Modules and Handlers for ASPNET 的缩写ELMAH可以让你记录下你的网站发生的任何一个错误在将来你可以重新检查这些错误你可以从ELMAH项目的官方网站免费下载ELMAH
ELMAH既支持ASPNET Web Forms 又支持 ASPNET MVC你可以对ELMAH进行配置来存储各种不同的错误（XML文件事件日志Access数据库SQL数据库Oracle数据库或者计算机 RAM）你还可以让ELMAH在错误发生的时候把错误信息email给你
在默认情况下在一个已经安装ELMAH的网站中你可以通过请求的elmahaxd页面的方式来访问ELMAH这是“Superexpertcom”网站的elmah页面的外观（这个页面是密码保护的因为在一个错误信息中可能会洩露出一些应该保密的信息）
如果你点击某个错误信息你可以看到原始的ASPNET的黄屏错误信息（虽然这个错误信息永远不会显示给真正的用户）
我使用全新的ASPNET软件包管理器 NuGet（过去叫做NuPack）来安装ELMAH关于NuGet你可以参考Scott Guthrie的博客你可以从CodePlex下载 NuGet
Pingdom
我使用Pingdom来验证Superexpertcom网站是否总是处在正常运行状态之中你可以通过浏览“Pingdomcom”的方式来注册Pingdom你可以使用Pingdom来免费监控一个网站
在Pingdom网站上你可以配置ping你的网站的频率我每分钟验证一次Superexpertcom 网站是否总是处在正常运行状态之中我使用Pingdom服务来验证它是否可以从那个网站的主页上检索到字符串“Contact Us”
如果你的网站宕机了你可以对Pingdom进行配置让它通过email Twitter SMS 或 iPhone来发送一个警报我使用这个Pingdom的iPhone应用程序
Host Tracker
如果你的网站宕机了你需要一些方式来判断这是本地网络的问题还是对每个人来说你的网站都宕机了我使用一个叫做“HostTrackercom”的网站来检查一个网站宕机的程度
这是“Superexpertcom”网站从世界各地都可以ping通的时候HostTracker显示的结果
注意HostTracker从个地点（其中包括Roubaix France and Scranton PA等）来ping “Superexpertcom”网站
调试
我这里提到的“调试”的意义十分广泛当构建一个网站的时候我使用下面这些工具来验证我并没有犯错误
HTML Spell Checker
为什么Visual Studio没有内置一个拼写检查器？不知道——我觉得这有点不可思议但是幸运的是ASPNET团队的前成员编写了一个免费的拼写检查器你可以在ASPNET页面上使用这个拼写检查器
我发现一个拼写检查器是必不可少的认为你自己的拼写能力绝对是完美的只是自欺欺人而已当我真正地运行拼写检查工具发现我的所有拼写错误的时候我恨不得找个地缝钻进去
把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你甚至可以为一个ASPNET MVC网站生成一个sitemap
这是“Superexpertcom”网站的分析报告的概述
注意“Sueprexpertcom”网站存在很多的问题例如有个页面的超链接已经失效了你可以进一步查看这些问题的详细信息找出这些问题发生的地点和具体的页面
LinqPad
如果你的ASPNET网站需要访问一个数据库那么你应该使用LINQ to Entities这个实体框架使用LINQ会把一些用C#编写的神奇的查询转换成SQL查询如果你在编写LINQ查询的时候不小心谨慎一些的话你 很可能会在无意之间构建出一个性能十分糟糕的网站
LinqPad（LinqPad的官方站点）是一个免费的工具它可以让你实验你的LINQ查询它甚至支持Microsoft SQL CE 和 Azure
你可以使用LinqPad来执行一个LINQ to Entities查询然后看看结果你也可以使用它来查看对那个数据库执行的SQL语句
NET Reflector
我每天都使用NET ReflectorNET Reflector这个工具可以让你把一个程序集反汇编成C#或VBNET代码当你没有真正的源代码的时候你可以使用NET Reflector来查看一个程序集的“源代码”你可以从Redgate的网站下载NET Reflector的免费版本
我主要使用NET Reflector来帮助我搞清楚代码在内部是如何工作的例如为了更好的理解MVC Image helper是如何工作的我使用NET Reflector对the Sprite and Image Optimization Framework进行了反汇编这是Image helper类的一部分反汇编代码
总结
在这篇博客中我们讨论了我构建“Superexpertcom”网站的时候使用的几个工具我使用这些工具来提高 “Superexpertcom”网站的性能改善“Superexpertcom”网站的SEO（Search Engine Optimization）确保“Superexpertcom”网站的正常运行时间或者对“Superexpertcom”网站进行调试在这 篇博客中讨论的所有工具都是免费的此外所有这些工具都是既支持 ASPNET Web Forms 又支持 ASPNET MVC的
