WEB性能优化及考虑

这是基于Web应用性能有关的两个简单法则：

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

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

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

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

1. Markup优化

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

• 尽可能的除去空白区域

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

•   除去注释

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

• 使用最短格式的颜色表示

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

• 使用最短格式的字符表示

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

• 除去无用的标签

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

2.CSS优化

CSS也有一套成熟而又简单的优化方法。实际上，时下大多数的CSS都较 (X)HTML更容易压缩。下面所列的技巧除了最后一条都是安全的。最后一条涉及到客户端的网页技术，可能会变得比较复杂。

• 除去CSS中的空白区域

如同除去markup代码中的注释一样，由于CSS中的注释对普通的最终用户来说并没有什么实用价值，所以也应该被除去。不过，如果考虑到较低级的浏览器，则在CSS中的style标签中的屏蔽注释信息不可以被除去。

• 使用最短格式来表示颜色值

和HTML一样，CSS颜色也可以用词语或十六进制格式表示。注意，在CSS中这样做的效果会稍微明显一些。主要是因为CSS中支持3位的十六进制色值，例如对白色可用#fff 来表示。

• 对CSS的规则进行合并、减少或删除

CSS中的诸如字体大小、字体重量等规则往往可以使用一种单属性字体的速记注释方式来表示。使用得当的话，这个技巧可以让您把如下的规则：

p {
    font-size: 36pt;
    font-family: Arial;
    line-height: 48pt;
    font-weight: bold;
}

改写成下面简短的形式：

p{font:bold 36pt/48pt Arial;}

如果继承方法使用得当的话，您还会发现在样式表单中的一些规则可以显著的减少或干脆删掉。到目前为止尚没有能自动移除规则的工具，所以只能通过手工调整CSS向导(Wizard)来进行这些工作。

• 对类和ID值进行重命名

.superSpecial {color: red; font-size: 36pt;}

可将其更名为sS。而对ID值一样可以遵循这样的原则，例如对于：

#firstParagraph {background-color: yellow;}

则可将原来的"#firstParagraph" 重命名为"#fp"，并在整个文档中重复这一动作。诚然，这样做可能会涉及到“标识-样式-脚本”互相依赖的问题：如果一个"tag"有一个ID值，而这个值又可能不但用于样式表，还可能用于脚本参考，甚至可能是一个链接目标地址。在这种情况下，您一旦修改了这个值，您就必须得保证对所有相关的脚本和链接参考都进行了相应的修改，包括其他文件中的这个值，所以千万要小心细致。

改变类的值相对改变ID值来说，危险性小一些。因为经验告诉我们，比较起ID值来说，大多数JavaScript程序员都不太经常处理类的值。然而，改变类的名称来缩减CSS的尺寸也面临着和改变ID名称同样的问题，所以再次强调，要小心谨慎。

请注意：最好不要更改名称属性，尤其是表单区域中的名称属性。因为这些数值也会被服务器端程序所操作。虽然不是不可能，但对多数的网站来讲，要计算好这些相互依赖关系是困难的。

3.JavaScript优化

• 除去JavaScript注释

所有的 // or /* */ 注释都可以安全删除，因为 它们对于最终使用者来说没有任何意义（除非有人想了解您的脚本是如何工作的）。

• 除去JavaScript中的空白区域

除去JavaScript中的空白区域并不象想象的那么有用。一方面，像如下代码：

x = x + 1;

显然可以简短得写成

x=x+1;

然而，很多随便的JavaScript程序员会忘记在两行之间加上分号，这时空白区域的除去就会带来问题。比如，下面合法的JavaScript使用了暗示的(implied)分号：

x=x+1

y=y+1

草率地删除了空白区域则会产生如下表达式：

x=x+1y=y+1

显然，错误就产生了。但如果您加上必需的分号，如下：

x=x+1;y=y+1;

• 进行代码优化

简单的方法如除去暗示的(implied)分号，某些情形下的变量声明或者空回车语句都可以进一步减少脚本代码。一些简略的表达方式也会产生很好的优化，例如：

x=x+1;

可以写成：

x++;

不过得小心谨慎，不然代码很容易出错。

• 重命名用户自定义的变量和函数

为了阅读方便，我们都知道在脚本中应该使用象sumTotal这样的变量而不是s。不过，考虑到下载的速度，sumTotal这个变量就显得冗长了。这个长度对于最终使用者来说没有意义，但对浏览器下载则是个负担。这个时候s就成为较好的选择了。先写好方便阅读的代码，然后再使用一些工具来处理以供交付。这种处理方式在这里再一次展示了其价值所在。将所有的名称都重新用一个或两个字母来命名将带来显著的改善。

• 改写内建(built-in)对象

长用户变量名会造成JavaScript代码过长，除此之外，内建(built-in)对象（比如Window、Document、Navigator等）也是原因之一。例如：

alert(window.navigator.appName);

alert(window.navigator.appVersion);

alert(window.navigator.userAgent);

可以改写成如下简短的代码：

w=window;n=w.navigator;a=alert;

a(n.appName);

a(n.appVersion);

a(n.userAgent);

如果这几个对象使用频繁的话，这样改写带来的好处就不言而喻了。事实上这些对象也的确经常被调用。然而我要提醒的是，如果Window或Navigator对象仅仅被使用了一次的话，这样的替换反而使代码变得更长。所以手工进行这种优化时要格外小心，不过好在目前市面的常用的JavaScript代码优化工具都已经考虑到这个因素了。

这个技巧带来一个对象更名后脚本执行效率的问题：除了代码长短上带来的好处，这种改写更名实际上还会稍微的提高一点脚本执行的速度，因为这些对象将会被放在所有被调用对象中比较靠前的位置。JavaScript游戏开发程序员使用这个技巧已经有多年了，下载和执行速度都会有所提高，并且对本地浏览器的内存花销也会降低，可谓一石三鸟。