高性能的网站开发：标识/CSS优化

一.标识(注释)的优化

　　网站在开发上往往容易出现这样两种情况：一种是代码过于紧密，其中包含大量注释信息和排版空白，一种就是代码太过宽松，其中不但包含了编辑器自动生成的标识语言及大量缩排空白，而且包含了编辑器常用来控制文件结构的特定注释，甚至还有冗余或无用的标识或代码。象这样的代码是不适合传输的。我们可以通过下面一些安全有效的途径来减小文件的大小：

　　1.1 删除多余的空白区域

　　一般说来，可以把那些多余的空白字符如空格，水平TAB，换行符等删除掉。不过当然了，象

，文本框和CSS的<white-space>属性中的空白是不能删除的。<br><br>　　1.2 删除注释文字<br><br>　　除客户端对IE浏览器和文档类型声明条件注释之外的注释几乎都可以删除，不会对文件造成什么影响。<br><br>　　1.3 将色值重新调整至最简短形式<br><br>　　在颜色上，尽量不要只使用十六进制值或只使用颜色名称，哪个短就用哪个。比如对于红颜色，用它的属性值“#ff0000”就没有“red”来得简短。而对于“浅金黄色”如果用它的颜色名“lightgoldenrodyellow”就太长了，反不如用属性值“#FAFAD2”。<br><br>　　1.4 将文字实体重新调整至最简短形式<br><br>　　这一点与色值的替换类似。我们可以把一个单词名很长的文字实体用一个数字性实体来表示。<br><br>　　1.5 删除无用的标识<br><br>　　将无用代码删除。<br><br>　　二.CSS的优化<br><br>　　我们可以对CSS代码进行精简来进一步减小文件的大小。不过，如今大多数网站所创建的CSS都要比普通HTML难压缩的多。对CSS的代码精简有下面这样一些安全有效的措施：<br><br>　　2.1 删除CSS空白<br><br>CSS对空白的敏感度远远低于(X)HTML，因而可将CSS中的空白删除来有效降低CSS文件和样式表区域的大小。<br><br>　　2.2 删除CSS注释信息<br><br>　　就象删除普通代码中的注释来精简代码一样，由于CSS中的注释对普通的终端用户来说并没有什么实用价值，所以应予删除。不过，如果需要考虑改进过的浏览器，则可以保留在CSS的<style>中的屏蔽注释信息。<br><br>　　2.3 将CSS中色值调整至最简短形式<br><br>　　这一点也和HTML相似。对CSS字体颜色可以用单词或十六进制格式。不过，这样做在CSS中的效果会更为显著一些。这是因为CSS支持3位6进制色值，例如对白色(#ffffff)可用“#fff”来表示。<br><br>　　2.4 对CSS设置进行重组，减少及删除<br><br>　　CSS中设定了字体的大小，字重，颜色等。一般CSS内容都是：<br><br>p {font-size：36pt;<br><br>font-family：Arial;<br><br>line-height：48pt;<br><br>font-weight：bold;}<br><br>　　我们可以将其改写成：p{font:bold 36pt/48pt Arial;}<br><br>　　如果运用得当的话，可以对样式表中的一些语法规则进行大幅削减。不过目前还没有这样的工具，所以我们只能手工删除，不过即将推出的w3compiler2.0版将会包含这一特性。<br><br>　　2.5重命名类和ID值<br><br>　　在CSS优化中，对样式表或ID值的重命名可能是最危险的一个步骤。对样式表的重命名可以遵循这样的原则：例如对于： .superSpecial{color: red; font-size: 36pt;} 则可将其更名为sS。而对ID值一样可以遵循这样的原则，例如对于：#firstParagraph {background-color: yellow;} 则可将原来的 "#firstParagraph" 更名为 "#fp" 。自然，这样做可能会牵涉到“标识-样式-脚本”的问题：如果一个“tag”有一个ID值，而这个值又可能不但用于样式表，还可能用于脚本参考，甚至可能是一个链接目标地址。在这种情况下一旦修改了这个值，那么必须确保对所有文件中相关的脚本和链接参考都进行了相应的修改。<br><br>　　请注意：最好不要更改名称属性，尤其是表单区域中的名称属性。因为这些数值也会被服务器端程序操作。<br><br>
					   </div></td>
                </tr>
                
              </table>
              <p class="ss"><span class="ss"><br />
                  </span> </p>
                </td>
              <td align="center" valign="top"> </td>
            </tr>
            
          </table>
          </td>
          <td width="240" valign="top" class="zhiti"><p class="zhiti">
            <iframe src="http://www.designhighest.com/qmzp/bzny/jxal.html" name="jxal" width="260" height="1000" frameborder="0" id="jxal"></iframe>
          </p>            
            <p class="zhiti"> </p></td>
          <td width="30" valign="top"><p> </p>
            <p class="zhiti"> </p>
          <p class="zhiti"> </p></td>
        </tr>
      </table>      
      <p> </p>
      <table width="970" border="0" cellpadding="0" cellspacing="15">
        <tr>
          <td height="20"><p class="STYLE8">Add: Room 702 Tower 10, Jianwai SOHO,39 East 3rd-Ring Road,Chaoyang District, Beijing China Zip Code: 100022 <br />
TEL: 8610-58694115    FAX: 8610-58694117<span class="STYLE3"> www.designhighest.com</span> Copyright 2007 Qingmei Design Inc. All rights reserved.</p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2788222-1";
urchinTracker();
</script>
</body>
</html>