我以前一直以为JavaScript的压缩是为了保护代码而压缩，压缩后的代码可读性极差，根本不能阅读，其实压缩更重要的目的是，压缩后的js代码文件可以小很多倍，从而使这个js代码快速的下载到客户端，特别js文件较大时速度效果非常明显．
这程序是由Mike Hall写的.我一直使用它，一般的文件在几十K的，都可以很快的得到压缩后的代码，文件200K以上的，该工具速度就比较慢，需要耐心等待了。如果要压缩代码，代码的质量就要求非常高，要书写非常规范，不然压缩出来的代码是不能用的，会有语法错误。
网站最重要的东西是什么？
——内容？SEO（搜索引擎优化）？UE（用户体验）？都不对！是速度！
内容再丰富的网站，如果慢到无法访问也是毫无意义的； SEO做的再好的网站，如果搜索蜘蛛抓不到也是白搭(页面效率和搜索蜘蛛之间的关系，需要进一步的确认，此为和上篇保持统一)； UE设计的再人性化的网站，如果用户连看都看不到也是空谈。
所以网页的效率绝对是最值得关注的方面。虽然我们在 《如何提高网页的效率（上篇）——提高网页效率的14条准则》提到了如何提高网页效率的14条准则，但是如何知道我们现在的网页的效率到底如何？到底处于怎样一个级别？又有哪些方面做的不够好，需要改进呢？也许，你会说，问一下用户不就知道了吗？但是相比感性比例占据太大的用户感受而言，理性的工具和数据更具有说服力。本篇就将向你介绍一款评测网页效率的工具——YSlow（why slow，这个名字起的太好了）。
YSlow是由Yahoo开发者团队发布的一款基于Firebug的插件。而Firebug 又是一款基于FireFox的插件。所以说YSlow是一款基于FireFox插件的插件。虽然有点绕，但是最终说明的问题是：
这看上去好像有点令人沮丧，但是事实上它并不像想象中的那么麻烦，只要按照下面的步骤你将能很快的使用YSlow：
下载最新版的FireFox，并安装它。当然如果你已经安装了FireFox可以跳过此步。 下载最新版的Firebug，并安装它。当然如果你已经安装了Firebug可以跳过此步。 下载最新版的YSlow，并安装它。当然如果你已经安装了YSlow可以跳过此步。
这时候打开FireFox，你将在【工具】菜单中看到【firebug】（如图2）。打开firebug，然后在firebug中点击YSlow菜单，便看进入YSlow的主界面（如图3）。
YSlow便开始分析此页的效率，并从13个最影响网页效率的方面给出评估（如图4）。
可以看出来，YSlow评估的依据就是我们在 《如何提高网页的效率（上篇）——提高网页效率的14条准则》中提到的前面13条。前面蓝色的字母表示这一条准则的得分。A最高。点击右面的三角形可以得到更多的信息和建议，有些信息里面还有“放大镜” 图标，点击也将展示更为详细的信息和建议。（如图5所示）
这个视图会告诉你页面的总体统计信息。包括页面大小、css样式表大小、脚本文件大小、总体图片大小、flash文件大小和css中用到的图片文件大小。还会告诉你，哪些东西被缓存了，缓存了多少等等。
这个视图是一个页面所有部件的信息列表。从中我们可以得知每个部件的各种详细信息。如：类型、URL、Expires数据、状态、大小、读取时间、ETag信息等等。通过对这个列表的分析，我们就可以知道到底是什么东西最耗费我们的资源，从而有针对性的进行优化。
【Tools】菜单包含4个子菜单，就是4个实用工具。【JSLine】工具会生成JSLine报表，报表是对本网页中JS脚本的分析报告，包含错误和建议。【ALL JS】工具，将生成本页面所有脚本代码便于阅读和打印的报表页面。【ALL CSS】工具，将生成本页面 所有CSS样式表代码便于阅读和打印的报表页面。【Printable View】将【Performance】和【Stats】视图中的信息生成一份更适合阅读和打印的报表页面。
【Help】主要是些常用的帮助途径的入口。从这里你可以很方面的访问YSlow的官方网络和博客。如果你还对YSlow的使用有什么疑惑的话，那么在这里你将获得满意的解答。
“工欲善其事，必先厉其器！”好的工具的确能很大的提高我们的工作效率。但是“阿斗”就算手里拿着“方天画戟”，估计也没有几个人怕他。好的工具是一方面，但是更重要的还是提高我们自身的知识水平。就如同这款YSlow，如果没有 《如何提高网页的效率（上篇）——提高网页效率的14条准则》中的理论知识，工具提供的信息我们看到的可能只是表面，就算看懂了数据，我们也很难知道对应的手段和措施。壮汉拿厉斧，这样伐木才能又快又轻松。
网站最基本的东西是什么？
——内容？SEO（搜索引擎优化）？UE（用户体验）？都不对！是速度！
内容再丰富的网站，如果慢到无法访问也是毫无意义的； SEO做的再好的网站，如果搜索蜘蛛抓不到也是白搭； UE设计的再人性化的网站，如果用户连看都看不到也是空谈。
所以网页的效率绝对是最值得关注的方面。如何才能提高一个网页的效率呢？Steve Souders(Steve Souders的资料http://www.oreillynet.com/pub/au/2951)提出的提高网页效率的14条准则，而这些准则也将是我们下篇中介绍到的YSlow工具的理论基础：
这里我们将逐一的讲解这些准则,对其中开发者密切相关的准则我将详细讲解。小弟个人技术实在有限，错误和无知在所难免，还请高人指点。
80%的用户响应时间都是浪费在前端。而这些时间主要又是因为下载图片、样式表、JavaScript脚本、flash等文件造成的。减少这些资源文件的Request请求数将是提高网页显示效率的重点。
这里好像有个矛盾，就是如果我减少了很多的图片，样式，脚本或者flash，那么网页岂不是光秃秃的，那多难看呢？其实这是一个误解。我们只是说尽量的减少，并没有说完全不能使用。减少这些文件的Request请求数，当然也有一些技巧和建议的：
这的确有点颠覆传统的思维了。以前我们一直以为多个小图片的下载速度之和会小于一个大图片的下载速度。但是现在利用httpwatch工具的对多个页面进行分析后的结果表明事实并不是这样。
第一张图是一个大小为40528bytes的337*191px的大图片的分析结果。
第二张图是一个大小为13883bytes的280*90px的小图片的分析结果。
第一张大图片花费时间为：
Blocked：13.034s
Send：0.001s
Wait：0.163s
Receive：4.596s
TTFB：0.164s
NetWork：4.760s
功耗时：17.795s
真正用于传输大文件花费的时间为Reveive时间，即4.596s，多数的时间是用来检索缓存和确定链接是否有效的Blocked时间，供花费13.034s，占总时间的73.2%。
第二张小图片花费时间为：
Blocked：16.274s
Send：小于0.001s
Wait：0.117s
Receive：0.397s
TTFB：0.118s
NetWork：0.516s
功耗时：16.790s
真正用于传输文件的花费时间是Reveive时间，即0.397s，这的确要比刚才大文件的4.596s小很多。但是他的Blocked时间为16.274s，占总时间的97%。
如果这些数据还不够说服你的话，让我们看看下面这张图。这里列出了某个网页中所有图片中的花费时间示意图。当然，里面的图片有大有小，规格不一。
其中藏青色的为传输文件花费的Reveive时间，而前面白色的为检索缓存和确认链接是否有效的Blocked时间。铁一样的事实告诉我们：
所以如果可能还是使用大图片来替代过多的琐碎的小图片吧。这也是为什么翻转门的效率要高于图片替换实现的滑动门的原因。
但是，请注意：也不能用太大的单张图片，因为那样会影响到用户体验。例如个几兆的背景图片的使用绝对不是一个好主意。
我以前犯了一个错误，你在看我《样式表的组织与规划》的系列文章中会知道。当时，我为了方便组织和规划样式表，将用于不同用途的样式表文件分离开来，形成不同的css文件。然后在页面中根据需要引用多个css文件。根据“尽可能的减少HTTP的Request请求数”准则我们知道，那样的确是不合理的，因为那样会产生更多的HTTP的Request请求数。从而降低网页的效率。所以，从提高网页效率的角度上而言，我们还是应该将所有的css写在同一个css文件中。但是问题又来了。那么怎么来很好的组织和规划样式表呢？这的确是个矛盾。我现在的做法是采用两套版本。编辑版和发布版。编辑版仍然使用多个css文件以便于规划和组织。而等到发布的时候，再将多个css文件合并到一个文件中去，从而达到减少HTTPRequest请求数的目的。
原因和处理同上，不再赘言。
这个看上去好像很深奥的样子，但是只要结合中国的网络特色，这个便不难理解了。“北方服务器”、“南方服务器”、“电信服务器”、“网通服务器”……这些词听起来是那么熟悉和压抑。如果，一个北京的电信用户试图从广东的网通服务器上打开一个类似《壁纸合集》帖子的网页时，你就能很深刻的理解。
鉴于这个不是我们开发人员力所能及的准则，所以这里也就不多言了。
这个也并非开发人员来控制，而是网站服务器管理员的职责。所以，如果作为开发人员的你不了解和明白也没有关系。还是把这个准则告诉公司的网站服务器管理员。
这个大家应该比较熟悉。Gzip的思想就是把文件先在服务器端进行压缩，然后再传输。这对于体积较大的纯文字型的文件有特效。鉴于这也并非开发人员，而是网站服务器管理员的工作范畴，这里就不详细讲解了。如果你对此感兴趣，可以资讯贵公司的网站服务器管理人员。
无论是HTML还是XHTML还是CSS都是解释型的语言，而非编译型的。所以CSS到上方的话，那么浏览器解析结构的时候，就已经可以对页面进行渲染。这样就不会出现，页面结构光秃秃的先出来，然后CSS渲染，页面又突然华丽起来，这样太具有“戏剧性”的页面浏览体验了。
原因同第五条一样。只是脚本一般是用来于用户交互的。所以如果页面还没有出来，用户连页面都不知道什么样子，那谈交互简直就是扯谈。所以，脚本和CSS正好相反，脚本应该放在页面的底部。
首先有必要先说明一下CSS Expressions是什么一个东西。其实它就像其它语言中的if……else……语句。这样在CSS中就可以进行简单的逻辑判断了。举个简单的例子——
这样css就可以根结一些情况分别使用不同的样式了。如果你对这个感兴趣可以到我的博客上阅读相关的文章—— 《CSS中的expression系列文章》。但是CSS中Expressions 的代价却是极高的。当你的页面需要根据判断来渲染效果的元素很多的时候，那么你的浏览器将长期处于假死状态，从而给用户带来极差的用户体验。
这一条好像和第一条有点矛盾。的确，如果从HTTP的request请求数来讲的话，这样做的确是降低了效率。但是之所以这么做，是因为另外一个重要的考虑因素——缓存。因为外部的引用文件会被浏览器缓存，所以如果javascript和css体积较大的时候，我们将它们独立成外部文件。这样当用户只要浏览一次以后，这些体积较大的js和css文件就能被缓存起来，从而极高地提高用户再次访问时的效率。
DNS域名解析系统。大家都知道我们之所以能记住那么多的网址，是因为我们记住的都是单词，而非http://202.153.125.45这样的东西，而帮我们把那些单词和202.153.125.45这样的ip地址联系起来的就是DNS。那这一条对我们到底有什么真正意义上的指导意义呢？其实有两条：
1：如果不是必须，请不要把网站放到两台服务器上。
2：网页中的图片、css文件、js文件、flash文件等等，不要太多的分散在不同的网络空间中。这就是为什么那种只发一个网站中的壁纸图片的帖子，要比壁纸图片来源于不同网站的帖子显示要快得多的原因。
这点很好理解。在你的最终发布版本中把没有必要的空行、空格和注释全部去掉。显然手工去处理效率太低，好在网上到处都是用于压缩这些东西的工具。压缩JavaScript代码体积的工具随处可见，我便不再列举了，这里我只提供一个用于压缩css代码体积的在线工具网站——http://www.cssdrive.com/index.php/main/csscompressor
它提供了多种压缩方式，可以适应多种要求。
我只从网页开发人员的角度来解读此条。那么我们可以解读到什么东西呢？2点——
1：“此域名已过期，5秒钟以后，页面将跳转到http://www.xxxxxx.com/index.html页面”，这句话看起来的确很熟悉。但是，我就奇怪了，为什么不直接链接到那个页面呢？
2：一些链接地址请更明确的写出来。例如:将http://justinyoung.cnblogs.com/ 写成http://justinyoung.cnblogs.com （注意最后面一个“/”符号）。的确，这两个网址都能访问到我的博客，但是，事实上，它们是有区别的。http://justinyoung.cnblogs.com 的结果是个301响应，它会被重新指向http://justinyoung.cnblogs.com/ 。但是显然，中间多浪费了一些时间。
这个准则的道理很浅显，但是真正在工作中，很多人却因为“项目时间紧”、“太累了”、“初期没有规划好”……这样的理由搪塞过去了。你，的确可以找很多的理由不去处理这些多余重复的脚本代码，如果你的网站不需要更高的效率和后期维护的话。
也正是这点，我提醒大家一些，一些javascript框架、javascript包一定要慎用。至少要问一下：用了这个js kit 到底给我们多少方便，提高了多少工作效率。然后，再与它因为多余的、重复的代码带来的负面效果比较一下。
首先来讲讲什么是Etag吧。Etag（Entity tags ）实体标签。这个tag和你在网上经常看到的标签云那种tag有点区别。这个Etag不是给用户用的，而是给浏览器缓存用的。Etag是服务器告诉浏览器缓存，缓存中的内容是否已经发生变化的一种机制。通过Etag，浏览器就可以知道现在的缓存中的内容是不是最新的，需不需要重新从服务器上重新下载。这和“Last-Modified”的概念有点类似。很遗憾作为网页开发人员对此无能为力。他依然是网站服务器人员的工作范畴。如果，你对此有兴趣，可以咨询贵公司的网站服务器管理员。
现在的Ajax好像有点被神话了，好像网页只要Ajax了，那么就不存在效率问题了。其实这是一种误解。拙劣的使用Ajax不会让你的网页效率更高，反而会降低你的网页效率。Ajax的确是个好东西，但是请不要过分的神话它。使用Ajax的时候也要考虑上面的那些准则。
当然，上面的这些也只是供你参考的理论上的准则。具体的情况还是要具体的去对待。理论和准则只是用来指导现实工作的，却是万万不可死记硬套。
如何提高网页的效率（下篇）暂时还没有排版好，所以没有放出。请您继续关注本博客，我将在1周之内排版好并放出。
如何提高网页的效率 14条建议（IT168版）
如何提高网页的效率（下篇）——Use YSlow to know why your web Slow
《CSS中的expression系列文章》
CSS在线压缩工具
前段时间在鱼的群里，经常碰到很多人问关于wordpress主题制作上的问题…问题主要集中在页面排版，css样式编写，php的简单调试/调用…在解决问题/交流的过程中，就发现，很多人对wordpress主题的制作兴趣浓厚，当然，很多人并非本身就是进行程序编写的…所以很大程度上对于代码编写/调试就有些摸不着头绪…现在推荐一个东西给大家用，是一个ide（集成开发环境），意思就是他可以可视化管理你的wordpress或者其他项目（明白的人，就不需要多说了），这个ide也是目前我正在使用的，结合上firefox+firebugs扩展，调试web程序，真的很不赖…
转载请注明出处：http://www.css88.com/
===================2008年11月3日更新======================
安装了aptana后在查看网页源文件时候，默认用aptana打开了请点击查看这里：http://www.css88.com/article.asp?id=545
==============================2008年3月28日13:20:12=======================
aptana的汉化方法:
点击查看：http://www.css88.com/article.asp?id=232
Aptana Studio支持中文的方法 ：
在Windows 菜单 → Preferences → General → Content Types，选择 Text ，在下方指定默认编码为UTF-8，并在File associations下面添加文件类型，如 *.js
如果文档的编码不是UTF-8 就指定成相应的编码。不过还是建议使用 UTF-8 编码。
破解：http://blog.csdn.net/rjzou2006/archive/2008/01/15/2044670.aspx
aptana studio 1.2破解（2008年10月29日更新）
请查看：http://www.css88.com/article.asp?id=542
Aptana studio pro 破解方法:使用附件中的2个class文件替换掉plugins\com.aptana.ide.core_1.1.0.007007.jar(后面的版本号可能会有所不一样,不用管它,只要找到com.aptana.ide.core_开头就行了),这个文件可以用WINRAR打开.在RAR的 com.aptana.ide.core_1.1.0.007007.jar\com\aptana\ide\core\licensing路径下
其他
使用入门：http://www.css88.com/article.asp?id=200
Aptana：网站地址：http://www.aptana.com
aptana是基于eclipse架构扩展出来的…有免费版本（community）和付费版本（pro），呵呵…我没有发现有破解的…我用的免费版本… aptana支持：
下面是pro和community版本的基本区别，我个人认为community基本上就够用了。
不过，虽然aptana师出eclipse，但是没有eclipse默认自带的cvs，aptana目前只支持svn的插件…此外aptana默认是不安装ruby和php的编辑器的，需要在打开ide之后手动安装：
第一步：选择Aptana Studio的版本
在product page页面上选择你要的版本下载，就选择community吧，下载的时候有zip（直接解压缩就可以用的，也有installer）。
第二步：安装PHP Development Plugin
在aptana的start page（就是安装好后，打开ide后出现的页面）页面上有安装指示，如下图：
如果你没有发现这些，那么就通过菜单里头的”help”->”software updates”->”find and install”
接着就可以进入升级插件界面了：
个人最爱的就是编辑器的code assist，呵呵，懒人的作风…
下面是aptana的php文件编辑器和code assist…
aptana的css,html,js文件编辑器和code assist ：
aptana也可以作为eclipse的插件，个人目前由于有j2ee项目，所以不得不使用eclipse加aptana plugin的方式来用，所以很是慢啊，但是单独运行aptana是很快的…需要jdk支持…去搜一个jdk1.6来装一下…再运行aptana…
更新：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中就不再有这样的问题了，可以直接调试。
真是太棒了。
VS2008破解方法非常简单，在开始>设置>控制面版>添加或删除程序>卸载vs.net2008＞出现卸载界面＞点击Next＞输入上面CD-key ->出现成功画面即可完美将试用版升级成为正式版。
VS2008正式版序列号CDKEY：PYHYP-WXB3B-B2CCM-V9DX9-VDY8T
引用内容免责声明：
此页面提供的文件均通过正版NOD32杀毒软件(病毒库日期：2008.2.9)扫描无毒，请放心使用，但也烦请您在下载后再查毒一次确保文件安全，如本文件对您的计算机造成危害，本站不负责任。
本站所刊载内容均为网络上收集整理，并且以计算机技术研究交流为目的，仅供大家参考，不存在任何商业用途。我们不建议您将其当作技术建议或操作引导而根据其直接行事。若您需要技术服务，您应当正式委托专业公司以保障您的合法权益。这些信息有可能不是最新的、官方的信息，也可能是为了研究某一技术问题而援引自他处，可以不经通知而更改。如果本网站内容不慎侵犯了您的版权，请与我们联系，我们将及时处理，撤下相关内容！
下载地址为90天试用版（官方正式简体中文），只要按上面的说明更换CDKey即可完美升级为正式版。7个分卷压缩包均需下载才能正常安装，包含MSDN。前面6个压缩包均为700M，最后一个压缩包为142M
前端开发工具箱——抓色工具(ColorPic)
特点：
有方案的概念，可以建立多组方案。
强大的色盘功能，多种方式可以选择。
吸色时，局部放大（放大比率可以自己调整），方便抓取细微部分的颜色。
使用Ctrl+G快捷键取色。
截图：
哈哈。。。又发现一个很多小图标的站。。。里面好多小图标都很棒。。如果你用得着。。可以去保存下来。。。哈哈。。不用说谢谢的～
域名就知道不错了～哈哈。。
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标尺
很多人不知道的是，我同样是 Best Web Gallery 和 N.Design Studio“背后”的人. 2006年，我创建了Best Web Gallery,作为我发现的最好的 CSS and Flash 网站的收藏.我非常高兴这个项目让我有机会是我的设计思想与主流保持一致。在过去的一年里，我看了提交的许多网站， (有些很好，也有些则很糟糕).当2007年即将过去,我想与各位共同分享2007年最好的网站设计，下面是一份从 Best Web Gallery 精选的50个优秀网站列表 — 2007年最优秀的CSS网站设计！
非常漂亮的单页网站设计
图形艺术学生Dominik Lenk 的令人印象深刻的设计
很喜欢红色背景的应用
如果您喜欢我之前的 艺术设计集 ,你就会喜欢这个网站的。
一个铝业网站怎么可以如此有艺术性？如果文本区域的对照再高一点，它将是一个完美的设计。
喜欢木质的半透明效果。
很团结，很亲切
另一个但页面网站。
一个使用了漂亮的图标和布局结构的Mac应用网站
网络印刷和格栅布局的良好应用
一个很好的网络程序的界面。
Marius Roosendaal的单页网站.不要忘了检查“白天”和”黑夜”模板.
我超喜欢Trale花在排版上的细节。
非常好的头部设计。
Mmm yummy… both the design and chocolate bars. Another good design site powered by WordPress.
漂亮的两栏主页
无与伦比的布局结构和铺满整个网站的漂亮背景图片.
我更喜欢这个网站的设计，但我不知道这样的设计/样式是否适合一个财经相关网站.
新西兰网络研讨会网站。
简洁、干净、舒服的布局。
John 的排版专用博客.
简洁、大粗字体、绝佳的色彩应用…
非常无与伦比的插画样式和色彩风格.
一个经典的漂亮的网站。
我最喜欢的商务网站只有. The amount of details spent on this site is incredible.
背景上的愿望和标签很有创意!
另一个艺术类的设计.
JS和CSS的良好应用(我的意思是滚动效果).
非常干净的Box布局.
Andy Clarke的网站.
由 Miguel Ripoll 设计(我最喜欢的设计师之一). 他对网页排版很有感觉 ，布局看起来挺乱，但是内容却是精心整理过的。
一个字：漂亮
在Box范围内的优秀设计
Elliot Jay Stocks的一个设计博客.他是一位很有个性的天才设计师 (结论来自于我和他的谈话).
良好的设计和精彩的内容(自由职业相关).
抽象类流行样式
我非常喜欢水彩效果
我不是个喜欢流体样式设计的人，但是这是一个非常好的。
漂亮简洁的2栏博客设计。
另一个单页面网站的范例
Matt Brett的博客, 他是个游戏玩家
Larissa Meek的一个漂亮的博客,她从前是个模特，现在是 AgencyNet的一位艺术导演.
对比颜色的良好应用
Terry and Tami Ng 的博客(明星和娱乐新闻).
另一个设计优秀的博客
另一个写生风格的设计
另一个流行/抽象的表现
图标很漂亮
另一个经典的优秀博客。
Jesse Bennett-Chamberlain的博客和作品集。
原文地址：http://www.webdesignerwall.com/trends/best-of-css-design-2007/
翻译不到位之处，还请高手指正！
点击下载此文件
最新评论
可惜不能辞工。。。
Post:2012-05-14 22:24:43群都满了，求入群。 319031954.
Post:2012-05-14 16:41:39可惜不在广州
Post:2012-05-12 16:10:54厉害，受益匪浅！
Post:2012-05-12 13:48:02又在招人。可惜不是我。
Post:2012-05-12 11:50:12很好很好verygood
Post:2012-05-10 10:58:33json官方的定义是 A collection of »
Post:2012-05-09 20:23:49前端爱好者求入群啊 作品地址:http »
Post:2012-05-09 14:32:41