研发出高性能的网站第一部分：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、使用最短格式的颜色表示

　　使用颜色时，不要一股脑的使用十六进制或全颜色名称(full color name)，要尽可能根据实际情况使用最短格式的颜色表示。比如，一个为#ff0000 的颜色属性能够直接用red

　　4、 使用最短格式的字符表示

　　和最短颜色表示相同，一些名称能够用最短字符来表示，我们能够用较短的数字来代替某些长长的字母。比如：È 能够变成È。或，偶尔这个方法反过来也行，比如：ð 假如变成ð则能够省一个字节。但是，这个方法不太安全，而且成效有限。

　　5、 除去无用的标签

　　有些‘垃圾’markup，比如使用了多次的重复标签或某些编辑器里用作广告的meta 标签，都能够安全地被删除。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有