有效的提高网页效率的14条准则

　　第五条：Put CSS at the Top 把CSS样式放在页面的上方。

　　无论是HTML还是XHTML还是CSS都是解释型的语言，而非编译型的。所以CSS到上方的话，那么浏览器解析结构的时候，就已经可以对页面进行渲染。这样就不会出现，页面结构光秃秃的先出来，然后CSS渲染，页面又忽然华丽起来，这样太具有戏剧性的页面浏览体验了。

　　第六条：Move Scripts to the Bottom 将脚本放在底部

　　原因同第五条一样。只是脚本一般是用来于用户交互的。所以假如页面还没有出来，用户连页面都不知道什么样子，那谈交互简直就是扯谈。所以，脚本和CSS正好相反，脚本应该放在页面的底部。

　　第七条：Avoid CSS Expressions 避免使用CSS中的Expressions

　　图:CSS中的Expressions其实也是一种if判定首先有必要先说明一下CSS Expressions是什么一个东西。其实它就像其它语言中的if……else……语句。这样在CSS中就可以进行简单的逻辑判定了。举个简单的例子

　　这样css就可以根结一些情况分别使用不同的样式了。假如你对这个感爱好可以到我的博客上阅读相关的文章 《CSS中的expression系列文章》。但是CSS中Expressions 的代价却是极高的。当你的页面需要根据判定来渲染效果的元素很多的时候，那么你的浏览器将长期处于假死状态，从而给用户带来极差的用户体验。

　　第八条：Make JavaScript and CSS External 将javascript和css独立成外部文件

　　这一条似乎和第一条有点矛盾。的确，假如从HTTP的request请求数来讲的话，这样做的确是降低了效率。但是之所以这么做，是因为另外一个重要的考虑因素缓存。因为外部的引用文件会被浏览器缓存，所以假如javascript和css体积较大的时候，我们将它们独立成外部文件。这样当用户只要浏览一次以后，这些体积较大的js和css文件就能被缓存起来，从而极高地提高用户再次访问时的效率。

　　第九条：Reduce DNS Lookups 减少DNS查询

　　DNS域名解析系统。大家都知道我们之所以能记住那么多的网址，是因为我们记住的都是单词，而非http://202.153.125.45这样的东西，而帮我们把那些单词和202.153.125.45这样的ip地址联系起来的就是DNS。那这一条对我们到底有什么真正意义上的指导意义呢?其实有两条：

　　1：假如不是必须，请不要把网站放到两台服务器上。

　　2：网页中的图片、css文件、js文件、flash文件等等，不要太多的分散在不同的网络空间中。这就是为什么那种只发一个网站中的壁纸图片的帖子，要比壁纸图片来源于不同网站的帖子显示要快得多的原因。

　　第十条：Minify JavaScript and CSS 减少JavaScript和CSS文件的体积

　　这点很好理解。在你的最终发布版本中把没有必要的空行、空格和注释全部去掉。显然手工去处理效率太低，好在网上到处都是用于压缩这些东西的工具。压缩JavaScript代码体积的工具随处可见，我便不再列举了。

　　它提供了多种压缩方式，可以适应多种要求。

　　第十一条：Avoid Redirects 避免跳转

　　我只从网页开发人员的角度来解读此条。那么我们可以解读到什么东西呢?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/ 。但是显然，中间多浪费了一些时间。

　　第十二条 Remove Duplicate Scripts 移除重复的脚本

　　图:对重复说不!这个准则的道理很浅显，但是真正在工作中，很多人却因为项目时间紧、太累了、初期没有规划好……这样的理由搪塞过去了。你，的确可以找很多的理由不去处理这些多余重复的脚本代码，假如你的网站不需要更高的效率和后期维护的话。

　　也正是这点，我提醒大家一些，一些javascript框架、javascript包一定要慎用。至少要问一下：用了这个js kit 到底给我们多少方便，提高了多少工作效率。然后，再与它因为多余的、重复的代码带来的负面效果比较一下。

　　第十三条：Configure ETags 配置你的实体标签

　　首先来讲讲什么是Etag吧。Etag(Entity tags )实体标签。这个tag和你在网上经常看到的标签云那种tag有点区别。这个Etag不是给用户用的，而是给浏览器缓存用的。Etag是服务器告诉浏览器缓存，缓存中的内容是否已经发生变化的一种机制。通过Etag，浏览器就可以知道现在的缓存中的内容是不是最新的，需不需要重新从服务器上重新下载。这和Last-Modified的概念有点类似。很遗憾作为网页开发人员对此无能为力。他依然是网站服务器人员的工作范畴。假如，你对此有爱好，可以咨询贵公司的网站服务器治理员。

　　第十四条：Make Ajax Cacheable 上面的准则也适用Ajax

　　图:Ajax的使用要恰当现在的Ajax似乎有点被神话了，似乎网页只要Ajax了，那么就不存在效率问题了。其实这是一种误解。拙劣的使用Ajax不会让你的网页效率更高，反而会降低你的网页效率。Ajax的确是个好东西，但是请不要过分的神话它。使用Ajax的时候也要考虑上面的那些准则。

　　后记：

　　当然，上面的这些也只是供你参考的理论上的准则。具体的情况还是要具体的去对待。理论和准则只是用来指导现实工作的，却是万万不可死记硬套。