开发出高性能的网站第一部分：20个客户端代码优化技巧

• 尽可能的减少数据的传输量
• 尽可能的减少数据的传输频率

　　若使用得当，此两条法则会：

• 提高网页的加载速度
• 降低服务器使用的资源
• 提高网络带宽利用率

　　使用这些技巧来开发网站，不仅能够提高用户对一个网站或者是基于web的一个应用的满意度，更可以节约网站数据传输的成本。这篇文章所讲述的技术细节可帮助我们写出很好很实用的代码，从更广泛的角度来讲，这也将会给网站打造出良好的可用性基础。

　　 20个客户端代码优化技巧

　　为自己写代码，为使用而编译

　　任何一个程序员都很清楚地知道，之所以不把自己所使用的代码作为最终的代码来交付是有它合理的原因的。写代码时最好要尽可能多写些注释，通过编排格式在最大程度上提高代码的可阅读性，同时避免过分的简洁不让晦涩的代码给日后的维护带来困难。之后，我们再使用编译器等把源代码转化成其他格式，一方面达到最优执行，另一方面可以防止反编译，以免造成源代码被剽窃。上述的这种模式其实也适用于网站的开发。具体做法是：先制作好网站和网页的源代码，再利用一些简单的技术（比如：减少空白区域，进行图片和脚本的优化，文件重命名等）把源代码减肥然后你就可以将准备好的网站和网页交付使用了。

　　希望这种概念对于你来说并不突兀，因为起码你很有可能正是在您站点的副本上操作，而不是直接在正在运行的站点上作修改更新。如果你不是这样做的，那么请马上停止阅读本文，赶紧去给你的站点做个副本吧！无论您的网站的内容是静态的手册还是非常复杂的使用内容管理系统来驱动（CMS-driven）的应用，这都是唯一正确的开发网站的方式。你要是现在还不相信的话，那么我敢说很快的等到你损毁了网站的一些文件却发现难以恢复的时候你就信了。

　　在建造网站时，您可能会把注意力放在导致下载速度降低的最大元凶―图片、二进制文件（如Flash等）上。减少GIF图片文件的颜色数、压缩JPEG图片文件的大小、优化SWF文件固然颇有裨益，其他大有帮助的方法也不能小觑。要记得网站性能法则中的第一条，我们得不断的努力以尽可能少地传输数据，不论它是markup文件、图片还是脚本。把精力放在减少(X)HTML、CSS和JavaScript文件的字节数上似乎是瞎忙乎，可是，这可能恰恰就是最应该注意的地方。

　　在一个典型的网页加载过程中，(X)HTML文件是最先被浏览器读到的。既然这个文件决定了其他文件的关系，我们可以管这个文件叫主文件(host document)。浏览器一旦接收到这个主文件，便开始解析各种markup；一般在解析的同时，也会触发一系列对相关对象的请求，例如外部脚本、关联的样式表单、图片、或嵌入式Flash等等。这些CSS和JavaScript文件有可能继续触发一些对相关图片或脚本等的请求。这些对相关文件的请求排成队列的速度越快，它们到达浏览器的速度也就越快，从而越早的开始显示出页面来。了解了主文件的重要性，我们便知道把它尽快地传给浏览器并加以解析的重要性，因为尽管主文件本身相对来说整个传输量来说只是一小部分，它却能够严重地阻碍网页的加载速度。要明白，用户才不在乎你使用的字节数的多少，用户在乎的是时间！

　　那么您具体需要怎么做才能作到最优传输的万全准备呢？一个基本的方法是减少空白区域，精简CSS和JavaScript，更改文件名，以及对要提交的代码也采用前述相同的策略，使之越简洁越好(Google 就是一个例子). 这些目前大家都熟知的通用技巧，在很多网站和一些书中比如Andy King的 《Speed up Your Site: Website Optimisation 》都能找到。本文则列出我们认为最有效的优化markup和代码的二十大技巧。当然，您可以手动来做部分优化，或者使用网页编辑器及工具来完成一些优化，当然还可以开发出您自己的精简工具。我们要向你介绍一个由Port80软件公司开发的工具w3compiler. 它几乎实现了下面将要提到的所有技巧，而且它也反映出在“真实”世界里代码优化任务的商业价值。接下来，我们来谈谈这些技巧！

　　Markup优化

　　典型的markup要么是手工编辑出来的，在非常紧凑，注重标准的格式基础上加入注释和空白区域(white space)的文件；要么是编辑器生成的，非常之肥胖，带有过分的格式编排及编辑器特有的通常用来控制结构的注释，甚至还会有不少重复的和没有用修饰或者代码。这两者都不是最优传输的情况。下列技巧既安全又容易，是减小文件尺寸的好方法：

　　1、尽可能的除去空白区域

　　一般而言，空白区域字符（空格、制表符、换行符等）都可以安全删除，但要避免修改pre, textarea, 及受CSS属性中white-space影响的标签。

　　2、除去注释

　　除了在客户端给IE和doctype声明的条件注释外，几乎所有的注释都可以安全去除掉。

　　3、使用最短格式的颜色表示