前端网页优化准则

今天面试的时问道了关于页面优化的问题，虽然之前也看过那网上的雅虎页面优化34条黄金准则，但是对准则中有很多不是很理解，或者在实际的工作中没有引起注意，在赶项目的进度时候往往忽略了这些优化，感慨在小的公司，一个人同时可能要做几个人的事情，也确实是很难深入下去，面试后觉得还是很多基础的知识不是很清楚，只是知道how，但是不知道WHY。我现在唯一能做的就是从某个方面深入下去，在工作中区认识（理论结合实践）。

特此记录下这些优化的准则,已被查阅。

第一条：尽可能的减少HTTP的Request请求数:

减少这些文件的Request请求数。在开发中为了方便组织和规划样式表，将用于不同用途的样式表文件分离开来，形成不同的 css文件。然后在页面中根据需要引用多个css文件。根据“尽可能的减少HTTP的Request请求数”准则我们知道，那样的确是不合理的，因为那样会产生更多的HTTP的Request请求数。从而降低网页的效率。所以，从提高网页效率的角度上而言，我们还是应该将所有的css写在同一个css文件中。但是问题又来了。那么怎么来很好的组织和规划样式表呢？这的确是个矛盾。我现在的做法是采用两套版本。编辑版和发布版。编辑版仍然使用多个css文件以便于规划和组织。而等到发布的时候，再将多个css文件合并到一个文件中去，从而达到减少HTTPRequest请求数的目的。

   1. 用一个大图片代替多个小图片。
   2. 合并你的css文件。
   3. 合并你的javascript文件。

第二条：Use a Content Delivery Network 使用CDN

这个看上去好像很深奥的样子，但是只要结合中国的网络特色，这个便不难理解了。“北方服务器”、“南方服务器”、“电信服务器”、“网通服务器”……这些词听起来是那么熟悉和压抑。如果，一个北京的电信用户试图从广东的网通服务器上打开一个类似《壁纸合集》帖子的网页时，你就能很深刻的理解。

第三条：Add an Expires Header 添加周期头

这个也并非开发人员来控制，而是网站服务器管理员的职责。所以，如果作为开发人员的你不了解和明白也没有关系。还是把这个准则告诉公司的网站服务器管理员。

第四条：Gzip Components 启用Gzip压缩

这个大家应该比较熟悉。Gzip的思想就是把文件先在服务器端进行压缩，然后再传输。这对于体积较大的纯文字型的文件有特效。鉴于这也并非开发人员，而是网站服务器管理员的工作范畴，这里就不详细讲解了。如果你对此感兴趣，可以资讯贵公司的网站服务器管理人员。

第五条：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中就可以进行简单的逻辑判断了。举个简单的例子——
<style>
input{background-color:expression((this.readOnly && this.readOnly==true)?”#0000ff”:”#ff0000″)}
</style>
<INPUT TYPE=”text” NAME=”">
<INPUT TYPE=”text” NAME=”" readonly=”true”>

这样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代码体积的工具随处可见，我便不再列举了，这里我只提供一个用于压缩css代码体积的在线工具网站—— http://www.cssdrive.com/index.php/main/csscompressor

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

第十一条：Avoid Redirects 避免跳转

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的时候也要考虑上面的那些准则。
   1. 合并图片，当然这个图片指的是一些背景图，这么可以减少http请求数，从而减轻服务器负担。
   2. 给内嵌于网页中的图片添加宽度和高度，因为没有写图片大小的话，浏览器在下载完图片后还要对图片进行在一次的渲染。
   3. 选取好图片格式，并给图片添加alt和title属性。
   4. 优化网页结构，网页代码尽量语义化，并且严格控制好嵌套层次，并且合理运用好table。
   5. 对于页面整体的压缩，当然这个压缩包括了css压缩（尽量使用缩写，css代码的复用，同时删空格和注释，而在命名上个人喜欢使用长类名，虽然相对文件的容量大了，但是浏览器对于网页的解析速度会加快）；js压缩（js代码的复用，同时象最小化一样，它通过删除注释和空格来减少源码大小，同时它还可以对代码进行混淆处理。）；html的压缩体现在之前说的网页结构的优化，尽量无冗余代码。压缩HTTP响应内容，目前最流行的应该是Gzip；当然程序的压缩优化也是一部分。
   6. 把JavaScript和css文件放到外部，并不内嵌于网页，同时可以考虑把样式表放到头上把脚本文件放到底部。需要注意的是尽量不要使用css的表达式，他很容易让浏览器出现假死。
   7. 合理使用Ajax和iframe，避免页面大量刷新

评论

11 楼 hymanyung 2010-08-17  

不錯,好東西.

10 楼 william_ai 2010-08-17  

总结的很好，希望再接再厉。
原则是建立在一定前提下的。
真心希望作者能够详细描述下这些总结的大环境是什么，比如主机、网络、客户端配置，当然如果能够详细到具体配置参数那就更好了。

9 楼 光影门徒 2010-08-12  

一切都是因为懒，很多需要注意的都没注意！

8 楼 areha001 2010-08-12  

缓存在IE6下其实很废柴

话说CDN 真的没怎么用过，也不知道怎么用

7 楼 玲cc 2010-08-10  

学习了 写的不错

6 楼 deng131 2010-08-09  

希望大家补充遗漏的地方～

5 楼 webee 2010-08-09  

应该不止这些吧！

4 楼 deng131 2010-08-09  

lsl916201 写道

第十三条看不懂，第十二条不是程序员想跳就能跳过去的呢……

这点我也是搞不明白，这和设置缓存expire有什么区别呐？

3 楼 lsl916201 2010-08-09  

第十三条看不懂，第十二条不是程序员想跳就能跳过去的呢……

2 楼 chancelai 2010-08-08  

在下受教了，不过经常出现第十二条所面临的情况

1 楼 ktex263 2010-08-06  

好东西，确实有道理