提高网站访问速度的20种代码优化方
案一
推荐诚信广告联盟
任何一个程序员都很清楚地知道，之所以不把自己所使用的代码作为最终
的代码来交付是有它合理的原因的。写代码时最好要尽可能多写些注释，通过
编排格式在最大程度上提高代码的可阅读性，同时避免过分的简洁不让晦涩的
代码给日后的维护带来困难。之后，我们再使用编译器等把源代码转化成其他
格式，一方面达到最优执行，另一方面可以防止反编译，以免造成源代码被剽窃。上述的这种模式其实也适用于网站的开发。具体做法是：先制作好网站和
网页的源代码，再利用一些简单的技术(比如：减少空白区域，进行图片和脚本的优化，文件重命名等)把源代码减肥然后你就可以将准备好的网站和网页交付使用了。
希望这种概念对于你来说并不突兀，因为起码你很有可能正是在您站点的
副本上操作，而不是直接在正在运行的站点上作修改更新。如果你不是这样做的，那么请马上停止阅读本文，赶紧去给你的站点做个副本吧！无论您的网站
的内容是静态的手册还是非常复杂的使用内容管理系统来驱动(CMS-driven)的
应用，这都是唯一正确的开发网站的方式。你要是现在还不相信的话，那么我
敢说很快的等到你损毁了网站的一些文件却发现难以恢复的时候你就信了。
在建造网站时，您可能会把注意力放在导致下载速度降低的最大元凶-图片、二进制文件(如Flash等)上。减少GIF图片文件的颜数、压缩JPEG图片文件的大小、优化SWF文件固然颇有裨益，其他大有帮助的方法也不能小觑。要记
得网站性能法则中的第一条，我们得不断的努力以尽可能少地传输数据，不论
它是markup文件、图片还是脚本。把精力放在减少(X)HTML、CSS和
JavaScript文件的字节数上似乎是瞎忙乎，可是，这可能恰恰就是最应该注意
的地方。
在一个典型的网页加载过程中，(X)HTML文件是最先被浏览器读到的。既
然这个文件决定了其他文件的关系，我们可以管这个文件叫主文件(host
document)。浏览器一旦接收到这个主文件，便开始解析各种markup；一般在
解析的同时，也会触发一系列对相关对象的请求，例如外部脚本、关联的样式
表单、图片、或嵌入式Flash等等。这些CSS和JavaScript文件有可能继续触发一些对相关图片或脚本等的请求。这些对相关文件的请求排成队列的速度越快，它们到达浏览器的速度也就越快，从而越早的开始显示出页面来。了解了
主文件的重要性，我们便知道把它尽快地传给浏览器并加以解析的重要性，因
为尽管主文件本身相对来说整个传输量来说只是一小部分，它却能够严重地阻
碍网页的加载速度。要明白，用户才不在乎你使用的字节数的多少，用户在乎
的是时间！怎么编辑网页源代码
那么您具体需要怎么做才能作到最优传输的万全准备呢?一个基本的方法是减少空白区域，精简CSS和J
avaScript，更改文件名，以及对要提交的代码也
采用前述相同的策略，使之越简洁越好(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/code来说明，而lightgoldenrodyellow可以换成
#FAFAD2#FAFAD2。
4、使用最短格式的字符表示
和最短颜表示一样，一些名称可以用最短字符来表示，我们可以用较短
的数字来代替某些长长的字母。比如：È；可以变成。或者，偶尔这个方法反过来也行，比如：如果变成ð则可以省一个字节。不过，这个方法不太
安全，而且成效有限。
5、除去无用的标签
有些'垃圾'markup，比如使用了多次的重复标签或者某些编辑器里用作广
告的meta标签，都可以安全地被删除。
CSS优化
CSS也有一套成熟而又简单的优化方法。实际上，时下大多数的CSS都较(X)HTML更容易压缩。下面所列的技巧除了最后一条都是安全的。最后一条涉
及到客户端的网页技术，可能会变得比较复杂。
6、除去CSS中的空白区域
相比起(X)HTML来，CSS对于空白区域没有那么敏感，所以除去空白区域便可以极大地减少CSS文件和style样式表区域的大小。
7、除去CSS注释
如同除去markup代码中的注释一样，由于CSS中的注释对普通的最终用户来说并没有什么实用价值，所以也应该被除去。不过，如果考虑到较低级的浏
览器，则在CSS中的style标签中的屏蔽注释信息不可以被除去。
8.使用最短格式来表示颜值
和HTML一样，CSS颜也可以用词语或十六进制格式表示。注意，在CSS
中这样做的效果会稍微明显一些。主要是因为CSS中支持3位的十六进制值，例如对白可用#fff来表示。
9、对CSS的规则进行合并、减少或删除
CSS中的诸如字体大小、字体重量等规则往往可以使用一种单属性字体的
速记注释方式来表示。使用得当的话，这个技巧可以让您把如下的规则：
p{font-size：36pt；
font-family：Arial；
line-height：48pt；
font-weight：bold；}
改写成下面简短的形式：
p{font：bold 36pt/48pt Arial；}
如果继承方法使用得当的话，您还会发现在样式表单中的一些规则可以显
著的减少或干脆删掉。到目前为止尚没有能自动移除规则的工具，所以只能通
过手工调整CSS向导(Wizard)来进行这些工作。不过即将推出的w2compiler
2.0会有这个功能。
10、对类和ID值进行重命名
在CSS优化中最危险的动作可能是重命名类或ID值了。看看如下规则：
.superSpecial{color：red；font-size：36pt；}
可将其更名为sS。而对ID值一样可以遵循这样的原则，例如对于：
#firstParagraph{background-color：yellow；}
则可将原来的"#firstParagraph"重命名为"#fp"，并在整个文档中重复这
一动作。诚然，这样做可能会涉及到"标识-样式-脚本"互相依赖的问题：如果
一个"tag"有一个ID值，而这个值又可能不但用于样式表，还可能用于脚本参考，甚至可能是一个链接目标地址。在这种情况下，您一旦修改了这个值，您
就必须得保证对所有相关的脚本和链接参考都进行了相应的修改，包括其他文
件中的这个值，所以千万要小心细致。
改变类的值相对改变ID值来说，危险性小一些。因为经验告诉我们，比较
起ID值来说，大多数JavaScript程序员都不太经常处理类的值。然而，改变
类的名称来缩减CSS的尺寸也面临着和改变ID名称同样的问题，所以再次强调，要小心谨慎。
请注意：最好不要更改名称属性，尤其是表单区域中的名称属性。因为这
些数值也会被服务器端程序所操作。虽然不是不可能，但对多数的网站来讲，
要计算好这些相互依赖关系是困难的。
JavaScript优化
越来越多的网站都依赖于JavaScript来生成导航菜单、表格确认和其他各
种各样实用的东西。不足为奇，大多数这些代码都非常笨重，亟待优化。对JavaScript代码的很多优化技术同那些用于markup代码和CSS的技术很相似。不过，对JavaScript的优化必须更加小心翼翼，因为一旦操作有误，其后果可
能不仅仅是显示变形，并且可能导致网页残缺不全。下面我们先来看看一些最
简单明了的方法，然后再探讨那些需要小心操作的技巧。
11.除去JavaScript注释
除了注释，其他所有的//or/**/注释都可以安全删除，因为它们对于最终
使用者来说没有任何意义(除非有人想了解您的脚本是如何工作的)。
12.除去JavaScript中的空白区域

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。