WEB前端开发

更新：VS2008 sp1简体中文正式版补丁

微软称，VS2008 引入了250多个新特性，对各个版本都进行了大幅改进，包括免费的Visual Studio Express和团队开发版本Visual Studio Team System。从编程高手到企业级开发团队，都可以得到一个稳固、安全、可靠的开发方案，从而为Windows Vista、Windows Server 2008、Office 2007、互联网等最新应用开发程序。

    经过一整天的下载，Visual Studio Team System 2008终于下载完成了。安装它的过程，似乎有些坎坷，在Vista下，安装竟然持续了一个多小时。不过比起VS2005 SP1的安装，这个还算是轻松的。VS2008的安装过程与它的上一个版本没什么区别，唯一的改进就是安装过程中的人物图片好像比原来的难看些了（汗……）www.x-force.cn

安装的是英文版，所以截图也是英文版的。本站提供的是简体中文版的下载

    安装选项我是选择的自定义，www.x-force.cn只勾掉了Microsoft SQL Server 2005 Express Edition的选择，其他的全部安装，感觉VS2008的安装速度笔VS2005快多了。

    经过漫长的等待，OK安装成功。接下来就是启动VS2008，出现了初始化的界面，感觉不错。
    记得vs2008已经集成了对javascript的调试功能，同时编辑Web窗体时的模式也有原来的Design和Source变成了三个，增加了Split即设计和源代码模式，和Dreamweaver有的比啊，对Ajax的支持也是太好了。就顺便建了个Web Applciation，体验了一下Split的效果，和Debug JavaScript的方便。

    在Vista中使用VS2005开发Web Application 或是 Web Site的调试必须要VS2005以 Run as Administrator权限运行才能进行调试，而在VS2008中就不再有这样的问题了，可以直接调试。
    真是太棒了。

应用程序部署图，Microsoft终于把图形化设计引入了C++，值得一试www.x-force.cn

　　VS2008破解方法非常简单，在开始>设置>控制面版>添加或删除程序>卸载vs.net2008＞出现卸载界面＞点击Next＞输入上面CD-key ->出现成功画面即可完美将试用版升级成为正式版。

VS2008正式版序列号CDKEY：PYHYP-WXB3B-B2CCM-V9DX9-VDY8T

引用内容

文件详情： Visual Studio Team System 2008 Team Suite
软件版本： 2008简体中文正式版（试用版）
文件格式： RAR 压缩文档
文件大小： 4.24 GB
发布日期： 2008.2.9
解压密码： www.x-force.cn
官方网站： http://msdn.microsoft.com/vstudio
文件发布： 异次元の世界

免责声明：
　　此页面提供的文件均通过正版NOD32杀毒软件(病毒库日期：2008.2.9)扫描无毒，请放心使用，但也烦请您在下载后再查毒一次确保文件安全，如本文件对您的计算机造成危害，本站不负责任。
　　本站所刊载内容均为网络上收集整理，并且以计算机技术研究交流为目的，仅供大家参考，不存在任何商业用途。我们不建议您将其当作技术建议或操作引导而根据其直接行事。若您需要技术服务，您应当正式委托专业公司以保障您的合法权益。这些信息有可能不是最新的、官方的信息，也可能是为了研究某一技术问题而援引自他处，可以不经通知而更改。如果本网站内容不慎侵犯了您的版权，请与我们联系，我们将及时处理，撤下相关内容！

下载地址为90天试用版（官方正式简体中文），只要按上面的说明更换CDKey即可完美升级为正式版。7个分卷压缩包均需下载才能正常安装，包含MSDN。前面6个压缩包均为700M，最后一个压缩包为142M

VS2008下载页面：  分卷压缩包1       分卷压缩包2    压缩包3    压缩包4    压缩包5    压缩包6    压缩包7

 

VS2008 SP1简体中文正式版补丁下载：http://www.microsoft.com/downloads/details.aspx?displaylang=zh-cn&FamilyID=27673c47-b3b5-4c67-bd99-84e525b5ce61

前端开发工具箱——抓色工具(ColorPic)
 

YSlow是yahoo美国开发的一个页面评分插件，非常的棒，从中我们可以看出我们页面上的很多不足，并且可以知道我们改怎么却改进和优化。

仔细研究了下YSlow跌评分规则。

主要有12条：

1. Make fewer HTTP requests尽可能少的http请求。。我们有141个请求（其中15个JS请求，3个CSS请求，47个CSS background images请求），多的可怕。思考了下，为什么把这个三种请求过多列为对页面加载的重要不利因素呢，而过多的IMG请求并没有列为不利因素呢？

发现原来这些请求都是可以避免的。

15个JS和3个CSS完全可以通过特殊的办法进行合并（这个技术部已经帮我们解决了，实在是太感谢了，嘿嘿。），这样合并以后，一般情况下页面上只会出现一个JS和一个CSS（对JS的封装得有一定的要求）。

但是47个CSS background images请求改怎么解决呢？为什么页面上的纯IMG请求时合理的，而CSS background images请求过多就是不利因素了呢。这个我想了很久，总算明白，原来是这样的：

一般页面上的ICON，栏目背景啊，图片按钮啊，我们都会用图片CSS背景来实现，而一般这个图片CSS背景用到的图片都是比较小的，所以完全可以把这些图片合并成一个相对比较大的图片，这样页面上只会出现一个CSS background images请求，最多也就2-3个。后来仔细看了下雅虎美国的页面，他们的确也是这样做的，虽然这样做需要花一定的时间来有规则的合并这些ICON，栏目背景，图片按钮，以方便CSS调用，但是这样做绝对是合算的，而且是有必要的，YSlow也是极力推荐的。

2. Use a CDN这项我们的评分是F级，最低。说实在的，我刚开始什么是CDN都不知道。后来查了GOODLE才知道。CDN的全称是Content Delivery Network，即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络”边缘”，使用户可以就近取得所需的内容，解决Internet网络拥挤的状况，提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因所造成的用户访问网站响应速度慢的问题。

看来上述的解释后，基本上明白了CDN是怎么回事，后来咨询了下中文站点SA，得知我们网站目前的确还没有做CDN的优化，但是据说我们有更加先进的技术来解决类似的问题（具体什么技术那就保密了），但是毕竟CDN也是个相当不错的技术，所以在我们先进技术的基础上在做CDN优化，肯定比现在更好，嘿嘿。据说SA明年会做几个点的CND。

3. Add an Expires header设置过期的HTTP Header.设置Expires Header可以将脚本, 样式表, 图片, Flash等缓存在浏览器的Cache中.

其实我们网站也做了这个优化，至少图片在这个上做过优化，但是没有做完全。我们的CSS和JS都还没有做过优化，倒是外部引入的一个广告JS做了，呵呵。其实设置过期的HTTP Header 更应该做在脚本, 样式表, Flash上.不过据说这个SA也是没有做的，但是有一定的风险，因为JS和CSS是有一定的逻辑，如果服务器端和客户端都存在缓存的话，万一出了什么问题，对我们以后查找问题的所在和增加难度，不过我想两者中是可以权衡和并存的。
4. Gzip components对我们的页面内容进行Gzip格式的压缩，Gzip格式是一种很普遍的压缩技术，几乎所有的浏览器都有解压Gzip格式的能力，而且它可以压缩的比例非常大，一般压缩率为85%，就是说服务器端100K的页面可以压缩到25K左右的Gzip格式的数据发给客户端，客户端收到Gzip格式的数据后自动解压缩后显示页面。

这点我们网站基本上是100%做到了，但是我们这项的评分并没有达到想象中的A级，原因是出在我们的外部链接，比如我们首页，有外部的广告投放JS，这个JS说拥有的网站是没有做过GZIP优化，连累了我们网站，所以我们也只有B，或者C级：（

5. Put CSS at the top把CSS外部链接放到页面的顶部。

其实这个原则我们一般都遵守的，如果把CSS外部链接作为逻辑的一部分出现在页面头部以下，我个人觉得这个本身就是个错误。还好，我们的页面基本上都做到了，可是有些页面比如LIST页面，还是出现了和逻辑挂钩的CSS链接，原因是为了解决一些本来就不合理的产品逻辑。所以，我们WEB前端工程师有义务杜绝这些不合理的产品逻辑破坏我们的页面结果及页面加载速度，不能为了实现而实现。

6. Put JS at the bottom 把Javascript脚本尽量放到页面底部加载。

一开始为以为Javascript脚本尽量放到页面底部加载，是指所有的JS脚本都要放到底部，后来才发现，并不完全是这样，这里所指的脚本是指那些在加载过程中要执行的脚本，所以一般的处理办法还是页面头部引入JS链接，页面底部执行JS脚本程序。为什么要这么做呢？呵呵，其实很简单，为了实现最大的下载并行，页面加载初期做的事，最好只有下载，HTML的下载，CSS的下载,JS的下载，等下载完成后再去实现页面渲染，JS脚本运行。这个方面我们还需要努力，很多页面我们在加载过程中运行了一部分脚本，或许是为了实现一些功能，没有办法，不过或许有更好的办法来替代呢。。。

7. Avoid CSS expressions 避免CSS表达式

其实在CSS中运行表达式和页面加载中运行大量的JS脚本差不多，或许还更慢，而且还不兼容，虽然可以使我们在页面逻辑简单不少，但是我们完全可以抛弃之。这个点，我们的页面基本上都做到了。不过说实话，CSS表达式，嘿嘿，我以前还不知道有这么回事。惭愧。哈哈。

9. Reduce DNS lookups尽可能少的DNS查找。

这项我们做的不是很好。D级，有9个域名，一般不要超过4个。不过这个主要是服务器架构上的问题，我们也无能为力，现在单单首页的广告域名就有好几个，好耶的广告域名，雅虎的广告域名，淘宝店广告域名，打点的域名。如果去掉这些，我们其实还是够用的，一个主域名，一个图片的，一个STYLE的，最多加上IFREAM的刚好4个。

10. Minify JS对Javascript代码进行压缩。

这点我很早以前就对此关注了，也找到了一个不错的压缩工具，yuicompressor，雅虎美国开发的JAVA压缩包yuicompressor.jar。压缩的相当完美，不仅把代码间的空格换行给去除掉了，而且对变量名，北部方法名都进行的简化，无意中实现了混淆脚本的作用。现在我们仅仅做到了JS合并，并没有对齐进行压缩，如果我用yuicompressor手工的去压缩，虽然实现了JS压缩，但是给我们自己的维护量增加了一倍，因为我们需要维护2套JS脚本，一套是压缩前的（调试用的），一套是压缩后（发布到网上的），而且要保证2套代码一致。所以最完美的做法是在发布的时候实现JS脚本合并，并对其用yuicompressor进行压缩，然后发布到晚上，把关键点移到发布的时候，这样我们只需要关心一套JS脚本（发布前的版本）。而且我觉得这个方案完全是行动通的。

11. Avoid redirects 避免重定向（跳转）

怎么理解这点呢？

我们经常遇到的一种做法，注册成功后，旺旺会有一个页面提示“你已经注册成功，3秒后将自动跳转到XX页面”。我就觉得很奇怪，你为什么不直接跳转到该去的页面？还有一种，我们大家非常熟悉，一般我们页面的链接都写成：http://china.alibaba.com或者http://china.alibaba.com/,有人会问，有区别吗？我明确的告诉大家，有！服务器如果接收到的URL是http://china.alibaba.com，它会自动重新定向到http://china.alibaba.com/，虽然最后都打开了阿里巴巴中文站的首页，但是前者比后者多走了一步,重定向，显然多多少少浪费了一定的时间。所以以后我们加URL链接的时候，别忘了把最后的“/”给加上去。

12. Remove duplicate scripts 去除重复的脚本

这个其实没有什么好说的，大家都应该毫无条件的去遵守，但是越是明显，越是简单的事，我们往往会做不好，当然，很多理由的，项目时间太紧张了等等，导致代码很乱，很多重复的地方。其实谁都知道重负不好，不过还好，我们的页面重复的脚本代码不多（至少一个页面里面，呵呵）。不过，我到是希望，我们不仅要做到一个页面脚本不重复，而且要做到N个页面，脚本要重用。

13. Configure ETags 这个好像是服务器端配置的问题，我不太懂，也就不乱说了，怕把大家给误导了。

总共13个，但是看了YAHOO的官方说明，好像还有一个AJAX CACHE(AJAX 缓存)。我倒是觉得这个很重要，随着我们AJAX应用的广泛，AJAX 缓存这个概念一定要时刻在我们脑子中，AJAX是个好东西，但是重复的数据，无休止的向后台申请，绝对是个错误（不仅是速度上还是对服务器压力上来说），所以我们就要对我们已经申请到的数据进行缓存，当第2次用到的时候，就直接从缓存中取，不要在去访问我们宝贵的服务器资源了。其实这个思想不仅仅适合AJAX，在所有有数据复用的应用中都应该考虑到。

YSLOW就分析到这里完毕了，或许有些地方分析的不是很正确，或许有人分析的比我更早，更好，但是这些的确是我从工作中去积累，发现的，并很多都实际应用到工作中去了，顺便说下，嘿嘿，LIST页面进行优化后，在0.92版本的YSLOW评分将达到76分，甚至80分，相当于0.8版本的90分以上。不过评分毕竟是评分，关键还是速度。

本文最初发表《程序员》杂志第三期，现将全文贴上，内容已经过编辑修饰了很多:)

什么是Firebug
从事了数年的Web开发工作，越来越觉得现在对WEB开发有了更高的要求。要写出漂亮的HTML代码；要编写精致的CSS样式表展示每个页面模块；要调试javascript给页面增加一些更活泼的要素；要使用Ajax给用户带来更好的体验。一个优秀的WEB开发人员需要顾及更多层面，才能交出一份同样优秀的作业。为帮助广大正处于Web2.0洪流中的开发人员，在这里为大家介绍一款轻巧灵活的辅助开发工具。

Firebug是Firefox下的一款开发类插件，现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。这是一款让人爱不释手的插件，如果你以前没有接触过它，也许在阅读本文之后，会有一试的欲望。笔者在撰写此文的时候，正逢Firebug发布1.0正式版，这不能不说是种巧合。

应用
Firebug插件虽然功能强大，但是它已经和Firefox浏览器无缝地结合在一起，使用简单直观。如果你担心它会占用太多的系统资源，也可以方便地启用/关闭这个插件，甚至针对特定的站点开启这个插件。

在安装好插件之后，先用Firefox浏览器打开需要测试的页面，然后点击右下方的绿色按钮或使用快捷键F12唤出Firebug插件，它会将当前页面分成上下两个框架，如图1所示。

图1：Firebug插件展开图示

从图1中看到，Firebug有6个主要的Tab按钮，下文将主要介绍介绍这几方面的功能。
Console HTML CSS Script Dom Net
控制台 Html查看器 Css查看器 脚本条时期 Dom查看器 网络状况监视

Console 控制台
控制台能够显示当前页面中的javascript错误以及警告，并提示出错的文件和行号，方便调试，这些错误提示比起浏览器本身提供的错误提示更加详细且具有参考价值。而且在调试Ajax应用的时候也是特别有用，你能够在控制台里看到每一个XMLHttpRequests请求post出去的参数、URL，http头以及回馈的内容，原本似乎在幕后黑匣子里运作的程序被清清楚楚地展示在你面前。

象C shell或Python shell一样，你还能在控制台中查看变量内容，直接运行javascript语句，就算是大段的javascript程序也能够正确运行并拿到运行期的信息。

控制台还有个重要的作用就是查看脚本的log, 从前你也许习惯了使用alert来打印变量，但是Firebug给我们带来了一个新朋友 —— console.log, 最简单的打印日志的语法是这样的：

如果你有一堆参数需要组合在一起输出，可以写成这样：

Firebug的日志输出有多种可选的格式以及语法，甚至可以定制彩色输出，比起单调的alert，显然更加方便，限于篇幅，这里不做详细说明，但是有志于提高debug效率的读者，可以到Firebug的官方站点（见附录）查看更详细的教程。

图2： 在控制台里调试javascript

查看和修改HTML
第一次看到Firebug强大的HTML代码查看器，就觉得它与众不同，相比于Firefox自带的HTML查看器，它的功能强大了许多。 HTML

首先你看到的是已经经过格式化的HTML代码，它有清晰的层次，你能够方便地分辨出每一个标签之间的从属并行关系，标签的折叠功能能够帮助你集中精力分析代码。源代码上方还标记出了DOM的层次，如图3所示，它清楚地列出了一个hml元素的parent、child以及root元素，配合Firebug自带的CSS查看器使用，会给div+css页面分析编写带来很大的好处。你还可以在HTML查看器中直接修改HTML源代码，并在浏览器中第一时间看到修改后的效果，光凭这一点就会让许多页面设计师死心塌地地成为Firebug的粉丝了。

有时候页面中的javascript会根据用户的动作如鼠标的onmouseover来动态改变一些HTML元素的样式表或背景色，HTML查看器会将页面上改变的内容也抓下来，并以黄色高亮标记，让网页的暗箱操作彻底成为历史。

利用Inspect检查功能，我们还可以用鼠标在页面中直接选择一些区块，查看相应的HTML源代码和CSS样式表，真正的做到所见即所得，如果你使用了外部编辑器修改了当前网页，可以点击Firebug的reload图片重新载入网页，它会继续跟踪你之前用Inspect选中的区块，方便调试。

图3:：HTML查看器

CSS调试
Firebug的CSS调试器是专为网页设计师们量身定做的。

如今的网页设计言必称div+css，如果你是用table套出来的HTML页面，就得按这规矩重构一遍，否则显得你不够时髦！用div做出来的页面的确能精简HTML代码，HTML标签减肥的结果就是CSS样式表的编写成了页面制作的重头戏。Firebug的CSS查看器不仅自下向上列出每一个CSS样式表的从属继承关系，还列出了每一个样式在哪个样式文件中定义。你可以在这个查看器中直接添加、修改、删除一些CSS样式表属性，并在当前页面中直接看到修改后的结果。

一个典型的应用就是页面中的一个区块位置显得有些不太恰当，它需要挪动几个象素。这时候用CSS调试工具可以轻易编辑它的位置——你可以根据需要随意挪动象素。
如图4中正在修改一个区块的背景色。

提示：如果你正在学习CSS样式表的应用，但是总记不住常用的样式表有哪些值，可以尝试在CSS调试器中选中一个样式表属性，然后用上下方向键来改变它的值，它会把可能的值一个个遍历给你看。

图4: CSS查看器，能够直接修改样式表

可视化的CSS尺标
我们可以利用Firebug来查看页面中某一区块的CSS样式表，如果进一步展开右侧Layout tab的话，它会以标尺的形式将当前区块占用的面积清楚地标识出来，精确到象素，更让人惊讶的是，你能够在这个可视化的界面中直接修改各象素的值，页面上区块的位置就会随改动而变化。在页面中某些元素出现错位或者面积超出预料值时，该功能能够提供有效的帮助，你可以籍此分析offset、margin、padding、size之间的关系，从而找出解决问题的办法。

图5：Firebug中的CSS标尺

做设计和前端开发三年了，整理一下好的经验和工具共享给各位来我博客的网友，谢谢光临我的博客

继续阅读：前端开发必备工具（2009年3月23日更新）»