[译作]新白宫网站代码分析

概述. 在美国第44任总统就职日这个历史性的日子,让我们来分析一下新的白宫网站(whitehouse.gov)代码结构吧。网站基于ASP.NET构建。

[singlepic=18466]

whitehouse.gov网站使用IIS 6.0. 网站的HTTP头信息中包含键值对”Server: Microsoft-IIS/6.0″。网站并没有使用微软公司最新版本服务器软件,IIS/7。

whitehouse.gov网站使用ASP.NET 2.0. HTTP头中标识自己的程序版本为”X-Aspnet-Version: 2.0.50727″。这个信息可以去掉,这样可以为每次服务器响应节省30字节带宽。

whitehouse.gov网站使用JQuery 1.2.6. JQuery JavaScript库,使用了其最小集版本,位于/includes/文件夹下。很多开发者使用Google服务器托管的JQuery以便提升性能和减小下载脚本的延迟时间。这样做可以提升站点性能。

<script type="text/javascript" src="/includes/eop/jquery-1.2.6.min.js"></script>

whitehouse.gov网站使用GZIP压缩. 所有网站文本都采用了GZIP压缩,显著地提升了性能。

未压缩大小:  48218 bytes
压缩后大小:   8370 bytes
节省带宽:           ~80%

whitehouse.gov网站使用Vary: Accept-Encoding. 在HTTP头中添加Vary: Accept-Encoding是一种强制代理不向不能解码GZIP的客户端发送GZIP内容的手段。

whitehouse.gov网站使用Cache-Control: privatemax-age. 它使用了”max-age=85895“,大约1 天。这样,html页面应该只会在你的计算机中缓存1天。

whitehouse.gov网站使用Web Trends Live追踪技术. WebTrends声称是“领先的网页分析和客户为中心智能市场营销解决方案(leading provider of web analytics and consumer-centric marketing intelligence solutions)。”

whitehouse.gov网站使用meta keywords标记. 这样做很奇怪,因为Internet上的访问者很少有不知道这里是干什么的。meta标记如下:

<meta name="keywords" content="President, Barack Obama, White House,
United States of America, 44th President, White House history, President Obama,
Barck, Barek, Barak, Barrack, Barrak, Obma, Barack" />

这样并不会对提升whitehouse.gov网站的Google PageRank有多少贡献。我认为搜索Barack Obama的用户无论如何都会被导引到这个网站的。

whitehouse.gov网站使用ViewState. 这是一个隐藏表单,允许网站在浏览器中存储服务器端数据。ASP.NET自动解析发送到浏览器的ViewState信息。浏览器不应该解析这个信息。

whitehouse.gov网站使用WebResource.axd. 这是ASP.NET生成的一个脚本文件。通常它们不能被有效地缓存,并且我发现它们的确降低了性能。

whitehouse.gov网站包含了很多空白字符. 如果你的浏览器启用了GZIP,这并不会带来性能影响,但是如果去掉这些空白字符,网站代码可以减小20%以上。

whitehouse.gov网站包含注释标签. 网站使用了很多HTML注释分割页面代码区域。如果能将这些注释写在服务器端代码中,可以在编译页面时不将注释编译在最终页面代码中,从而提升效率。

<!-- Start -->
<!-- End -->

whitehouse.gov网站包含很长很长的ASP.NET ID. 页面中的很多元素包含非常长的ID,是浪费带宽的主要因素之一。这些长ID可以很容易地在服务器端替换成短ID。

<a id="ctl09_rptNavigation_ctl00_rptNavigationItems_ctl01_hlSubNav"...

whitehouse.gov网站使用的GIF多于PNG. 网站使用的GIF图片多于PNG图片。PNG格式的图片可以更加优化,从而节省带宽和消耗。网站中使用了两个GIF动画。

whitehouse.gov网站使用了5个层叠式样式表(stylesheets)文件和12个JavaScripts脚本文件. 如果能把这两类文件合并成两个文件,网站可以更快而且更轻量级。当然这是针对访问首页的访客而言。奇怪的是,用于修饰管理页面的层叠式样式表也被加载进了普通用户的访问中:

/* admin styles */
/* cms */
.adminNavigation {width:996px; position:relative; z-index:100;}

whitehouse.gov网站使用了高度压缩的JPG. 如果你距离屏幕较远,或者视力不是那么好,这些图片看起来还行。开发者对JPG图片采用了高度压缩。这里显示的图片被放大并且轻微地二次压缩过。

[singlepic=18465]

whitehouse.gov网站使用了image sprites技术. 这项技术可以大幅提升站点性能,因为它将若干个小图片合并成了一张图片。这是一项先进的技术。采用了image sprites技术的图片是”nav-sprite.png“.

whitehouse.gov网站使用了Packer. Dean Edward的Packer是一个用于压缩JavaScript文件的工具。JavaScript脚本将在被下载时自动解压缩,这是一项很差的优化手段, 因为往往JavaScript经过GZIP压缩之后,比经过YUI压缩器(YUI Compressor)压缩之后更小。[参见 jquery-plugins.js]

eval(function(p,a,c,k,e,d)...

使用Packer的决定不像是一个深入了解GZIP或者文本压缩技术的人做出的。压缩之前的文件确实变小了,然而这导致了最终需要被下载的文件变大了。[http://dean.edwards.name/packer/]

whitehouse.gov大小821 KB, 在我的线路上(cable modem)使用了1.58秒完成加载。这个数字大约是新的、基于图片的网站的平均值。

加载时间:  1.58 seconds
总计大小:  821 KB

whitehouse.gov网站包含了几个隐藏链接. 在源文件里,大部分是在JavaScript中,大约嵌入了6个链接。这样,这些幸运的人就得到了来自白宫网站的外链(译者注:PageRank 9啊!9!)。

www.youngpup.net
http://sorgalla.com/jcarousel/
http://billwscott.com/carousel/
http://www.codylindley.com

whitehouse.gov网站使用了一个不透明的favicon.ico. 为了站点在加入书签后具有更好的视觉效果(译者注:对很多非IE浏览器而言,无论是否加入书签,favicon文件都会显示在标签栏),一个具有透明背景的favicon是更好的选择。这项改变对于一个知道怎么修改的人来说可以在10分钟内完成。

结论是,whitehouse.gov网站还是很吸引人的。虽然它并不算是一个非常有效率的站点,并且过多地注意了视觉效果。一个网站优化专家可以在几天之内将它的加载速度提升到现在的两倍。

最后,记住本届政府和奥巴马总统并不是写这些代码的人。

翻译自:http://dotnetperls.com/Content/whitehouse-gov-Site.aspx

关于 “[译作]新白宫网站代码分析” 的 9 个意见

  1. 你好专业,唉,我看他演说觉得像拍电影一样,好乏味啊..

  2. CB系统的问题…
    后面没能显示出来…
    被骂骂好,不至于飘飘然…

  3. whitehouse.gov网站包含了几个隐藏链接. 在源文件里,大部分是在JavaScript中,大约嵌入了6个链接。这样,这些幸运的人就得到了来自白宫网站的外链(译者注:PageRank 9啊!9!)。

    这一段很迷糊

    能给解释一下么

  4. Google PR算法基本是按照传递来计算的,如果一个网站有一个从PR=9的网站过来的连接,那么这个站得到的PR贡献就有8,这样在计算这个网站PR的时候有很大的推动。

发表评论