构建ASP.NET网站十大必备工具

  次阅读 作者:智能小宝 来源:互联网 2016-01-27 15:29 我要评论(0)

构建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的:

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)。

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...