5.2 精简代码
精简代码是指清除或者简化页面中的代码，从而达到降低页面体积、提高页面的用户体验及搜索引擎友好性的目的。
页面代码的精简包括清理垃圾代码、HTML标签转换、CSS优化、JavaScript优化及表格优化这五大环节。其中，清理垃圾代码是精简代码中最重要、最基础的。
5.2.1 清理垃圾代码
清理垃圾代码是指删除页面中的冗余代码。一个页面经过垃圾代码清理以后，可以删除接近80%的冗余代码。然而，什么样的代码才是垃圾代码呢？
1. 垃圾代码定义
垃圾代码就是指那些删除后也不会影响页面正常显示的非必要的代码。这些代码占据着庞大的空间，不但耗费用户下载页面的时间，还占用搜索引擎巨大的存储空间，增加搜索引擎分析数据的时间。然而，这么庞大的垃圾代码是如何产生的呢？
2. 垃圾代码的产生
一般情况下，我们会使用网页制作软件制作网页，如FrontPage、Word及Dreamweaver。这些网页制作软件在制作网页的时候，会生成相应的HTML代码，其中大部分都是必须的，而有一小部分则是可有可无的，这就是所谓的垃圾代码。因此，避免产生垃圾代码最好的办法就是以手工编写代码的方式制作网页。
即使是同样内容的网页，使用不同的网页制作软件进行制作，产生的代码也会存在很大的区别。例如，对于包含“我做的第一个网页”内容的网页，使用Word制作会产生103行代码，共2.96 KB的内容；使用FrontPage则产生17行代码，共308B的内容；而使用Dreamweaver只产生12行代码，275个B的内容。具体代码如下所示。
• Word
如下所示是使用Word制作网页时所产生的HTML代码，代码中包含了作者、版本、建立日期、最新更新日期、公司名称等标签及内容，其中绝大部分内容不管是对普通用户还是对搜索引擎都是毫无意义的。
<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=GB2312">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 9">
<meta name=Originator content="Microsoft Word 9">
<link rel=File-List href="./1.files/filelist.xml">
<title>我做的第一个网页</title>
<!--[if gte mso 9]><xml>
<o:DocumentProperties>
<o:Author>吴泽欣</o:Author>
<o:Template>Normal</o:Template>
<o:LastAuthor>吴泽欣</o:LastAuthor>
<o:Revision>1</o:Revision>
<o:TotalTime>0</o:TotalTime>
<o:Created>2008-03-13T14:06:00Z</o:Created>
<o:LastSaved>2008-03-13T14:06:00Z</o:LastSaved>
<o:Pages>1</o:Pages>
<o:Lines>1</o:Lines>
<o:Paragraphs>1</o:Paragraphs>
<o:Version>9.2812</o:Version>
</o:DocumentProperties>
</xml><![endif]--><!--[if gte mso 9]><xml>
<w:WordDocument>
<w:PunctuationKerning/>
<w:DrawingGridVerticalSpacing>7.8 磅</w:DrawingGridVerticalSpacing>
<w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery>
<w:DisplayVerticalDrawingGridEvery>2</w:DisplayVerticalDrawingGridEvery>
<w:Compatibility>
<w:SpaceForUL/>
<w:BalanceSingleByteDoubleByteWidth/>
<w:DoNotLeaveBackslashAlone/>
<w:ULTrailSpace/>
<w:DoNotExpandShiftReturn/>
<w:AdjustLineHeightInTable/>
<w:UseFELayout/>
</w:Compatibility>
</w:WordDocument>
</xml><![endif]-->
<style>
<!--
/* Font Definitions */
@font-face
{font-family:宋体;
panose-1:2 1 6 0 3 1 1 1 1 1;
mso-font-alt:SimSun;
mso-font-charset:134;
mso-generic-font-family:auto;
mso-font-pitch:variable;
mso-font-signature:3 135135232 16 0 262145 0;}
@font-face
{font-family:"＼@宋体";
panose-1:2 1 6 0 3 1 1 1 1 1;
mso-font-charset:134;
mso-generic-font-family:auto;
mso-font-pitch:variable;
mso-font-signature:3 135135232 16 0 262145 0;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-parent:"";
margin:0cm;
margin-bottom:.0001pt;
text-align:justify;
text-justify:inter-ideograph;
mso-pagination:none;
font-size:10.5pt;
mso-bidi-font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:宋体;
mso-font-kerning:1.0pt;}
/* Page Definitions */
@page
{mso-page-border-surround-header:no;
mso-page-border-surround-footer:no;}
@page Section1
{size:595.3pt 841.9pt;
margin:72.0pt 90.0pt 72.0pt 90.0pt;
mso-header-margin:42.55pt;
mso-footer-margin:49.6pt;
mso-paper-source:0;
layout-grid:15.6pt;}
div.Section1
{page:Section1;}
-->
</style>
</head>
<body lang=ZH-CN style='tab-interval:21.0pt;text-justify-trim:punctuation'>
<div class=Section1 style='layout-grid:15.6pt'>
<p class=MsoNormal><span style='font-size:9.0pt;mso-bidi-font-size:12.0pt;
font-family:宋体;mso-ascii-font-family:Arial;mso-hansi-font-family:Arial;
color:gray'>我做的第一个网页</span></p>
</div>
</body>
</html>• FrontPage
如下所示是使用FrontPage制作网页时所产生的HTML代码。尽管比较简洁，但还是存在一些可有可无的标签及内容，例如Generator（生成器）及Progid等：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>我做的第一个网页</title>
</head>
<body>
<p>我做的第一个网页</p>
</body>
</html>• Dreamweaver
使用Dreamweaver制作的页面所产生的代码是这三者中最简洁的，但是，它缺少一些非常重要的标签及内容，例如Description和Keywords标签：
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd>
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=gb2312>
<title>无标题文档</title>
</head>
<body>
我做的第一个网页
</body>
</html>从以上例子可以看到，使用Dreamweaver制作网页时所产生的代码量是最少的。因此，在没有掌握手工编写代码之前，可以使用Dreamweaver制作网页，完成后再清理其中的垃圾代码。
尽管不同的软件制作网页时所产生代码存在很大的差别，但有一部分代码是共有的，包括垃圾代码。
3. 垃圾代码的清理
从以上几个例子可以看到，网页制作软件产生的常见垃圾代码包括空格、默认属性、注释语句及空语句等。
• 空格
空格字符是网页中最常见的垃圾代码，但此处讨论的空格字符并非HTML语言中的“ ”标签，而是指在代码编缉环境下敲击键盘上的空格键所产生的符号。网页中每个空格都相当于一个字符，因此，空格字符也会占用巨大的空间。初步统计，空格字符约占页面总体积的1.5%。也就是说，一个100 KB的页面中，有1.5 KB是空格字符。
空格字符通常会出现在每行代码的开始和结束处以及空行中，如图5-1所示。
每行代码开始前的空格字符：是网页制作软件生成代码时默认产生的缩进字符，如图5-1的（A）部分所示。
每行代码结束处的空格字符：是编缉HTML代码时不小心加上的。只要在每行代码的结束位置向右移动光标，如果光标不换行，则说明该行后面还存在空格字符，如图5-1中（C）部分所示。
空白行：在编写代码时，常利用空行或者注释对不同功能模块进行分隔，这样就产生了空白行，如图5-1（C）部分所示。
对于页面中不同位置上的空格字符，清理的方式也有所不同，下面介绍几种常用的空格字符清理方法。
1. 每行代码开始前的空格字符
对于每行代码开始前的空格字符，可以使用Dreamweaver 或者EditPlus等软件进行清理。具体操作步骤如下：
(1) 转至HTML代码编缉模式（如果是Dreamweaver）；(2) 按Ctrl + A 选择全部代码；
(3) 使用组合键Shift + Tab，直至删除所有空格为止。
下面的代码1是清理空格字符前的效果，代码2则是清理空格字符后的效果。
代码1：
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
代码2：
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>2. 空行
对于空行中空格字符的清理，只能手工逐行去掉，如图5-2所示。
1. 首先，使用鼠标选择空行。
2. 再按Delete键，即可删除空行。
3. 每行代码结尾处的空格字符
对于每行代码结束处的空格字符，可以使用Editplus或者其他文本编缉软件的替换功能进行清理。步骤如下。
1. 用鼠标选择“>”+一个空格字符，即“>”。
2. 再按Ctrl + F，就会弹出如图5-3所示的窗口。
3.“替换”处填上“>”，再点击“替换全部”即可。
页面经过清理空格字符后，大概可以删除70%左右的垃圾代码。也就是说，空格字符的代码量大概占总垃圾代码的70%，还有30%左右的垃圾代码分布在默认属性、注释语句及空语句中。
• 默认属性
在利用网页制作软件制作网页时，通常会产生一些默认属性的代码。例如，即使在HTML代码中不添加左对齐属性，页面中的内容也是以左对齐的方式显示的。所以，代码中的左对齐属性是可以删除的。
在页面中，还有很多其他属性都是默认属性，常见的包括以下几种。
align="left"：横向居左对齐属性值，默认情况下文字或者图片都是横向居左对齐的。
valign="middle"：竖向居中对齐属性值，默认情况下文字或者图片都是竖向居中对齐的。
size="3"：文字大小属性值，默认情况下是3号字体。
target="_self"：新页面打开属性值，默认情况下是在当前窗口中打开。
front="#000000"：文字颜色属性值，默认情况下网页中文本的字体颜色是黑色。
bgcolor="#FFFFFF"：背景颜色属性值，默认情况下网页的背景颜色是白色。
利用Dreamweaver的替换功能，可以完成对默认属性代码的替换。在“查找”中填上要替换的默认属性代码，“替换”处留空白，还可以在“查找范围”上选择替换范围，然后，点击“替换全部”就可以删除“查找范围”内所有指定的默认属性代码，如图5-4所示。
• 注释语句
注释语句是用于对代码功能或作用进行说明的语句，其中的内容对于普通用户来说是不可见的，即普通用户在页面中是看不到HTML代码中注释标签里的内容的。
在制作网页的时候，或多或少会添加注释语句以增强代码的可读性。但是，过多的注释语句会占用大量的存储空间。不仅如此，如果在注释标签里添加大量的关键字，还会被搜索引擎认为是堆砌关键字，从而对网站进行惩罚（请参考11.2节）。
所以，在添加注释语句时，要坚守一个原则：绝不添加那些即使删除后也不会影响网页源代码可读性的注释语句。例如，以下代码中的注释内容就是完全可以省略的：
<table width="100%" border="0" cellspacing="0" cellpadding="0"><!--表格开始标签-->
<tr><!--行开始标签-->
<td> </td>
</tr><!--行结束标签-->
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table><!--表格结束标签-->• 空语句
垃圾代码清理的最后一步就是删除代码中的空语句。简单地说，空语句就是指标签间不存在任何内容的语句。例如，<b></b>就是一个典型的空语句，如图5-5所示。
空语句的清理主要针对即使删除后也不会影响页面正常显示的标签，如<b></b>、<font></font>、<h1></h1>等。但有一部标签是不能删除的（如<tr>、<td>或者<p>），否则页面将会出现错乱。
我们可以使用网页制作软件提供的特定功能对代码中的空语句进行清理。例如，Dreamweaver的“清理HTML/XHTML”功能就可以快速清理页面中的空语句，如图5-6所示。
1. 点击菜单栏中的“命令”。
2. 选择“清理HTML”。
3. 根据需要选择相应的选项，然后按“确定”即可。
手工编写HTML代码是搜索引擎优化从业者必备的基本技能。如果你已经具备手工编写HTML代码的能力，就应该优先采用手工编写代码的方式制作网页。
对于不熟悉HTML语言的读者，也可以在网页制作完成后再对垃圾代码进行清理。随着网页制作工具的不断改进，以前很多需要手工清理的工作，现在都可以用特定的软件代替,例如Dreamweaver或者 Advanced HTML Optimizer。
Advanced HTML Optimizer 是常用的垃圾代码清理工具，使用这款工具不但可以删除代码里多余的标签，还能把长标签转换为短标签。但是，这个工具会把所有的换行删除，严重影响代码的可读性，如图5-7所示。
经过垃圾代码清理后，页面中70%以上的冗余代码已经被清除。但是，精简代码的工作并没有完成。接下来，还需要转换HTML中的长标签，以及对CSS、JavaScript进行优化。
5.2.2 HTML标签转换
HTML标签转换主要是使用短标签替换在网页中实现同样效果的长标签。例如<b>与<strong>，两者都是对字体进行加粗，但是<strong>却比<b>多出了5个字符。如果一个页面上有上百个加粗标签，则会产生不少的冗余代码。
在HTML语言中，多种相同的样式可以使用不同的标签实现，如表5-1所示。
表 5-1 实现同样效果的HTML标签
样式 | 长标签 | 短标签 |
|---|---|---|
加粗 | <strong> | <b> |
斜体 | <em> | <i> |
删除线 | <strike> | <s> |
缩进 | <blockquote> | <ul> |
由于HTML语言中每个标签都是成对出现的，除了替换标签中的开始标签以外，还要替换标签中的结束标签，例如加粗标签中的</strong>。替换的方法跟替换开始标签的方法是一样的，只需把图5-8中的<strong>改成</strong>，<b>改成</b>即可。
5.2.3 CSS优化
1. CSS简介
CSS （Cascading Style Sheet），也称为层叠样式表。采用CSS技术，可以有效地对页面的布局、字体、颜色、背景等进行精准的控制。
CSS使得网页中显示描述与文档结构彻底分离，避免了单独使用HTML标签而引起的文档结构与显示格式描述之间的混乱，提高代码的可读性。CSS从整体上对页面布局进行控制，使用相同的样式文件或者相同名称的样式表可以对相同格式的内容进行控制，节省大量的代码。但是，目前搜索引擎并不解析CSS内容。如果页面中每一个样式都使用CSS进行控制，则搜索引擎就识别不了页面中相关内容的样式，也就不能根据这些内容的样式判断页面的相关性（请参考2.3.3节）。
如下所示，方式1及方式2的目的都是为“搜索引擎优化”增加粗体标记。
方式1是通过调用CSS中的b样式实现的，而方式2中则直接采用粗体标签<b>。由于搜索引擎并不解析样式表里的内容，所以也就不能识别方式1中的内容是否采用了粗体标记；而对于方式2则可以轻易识别，从而给方式2的页面赋予相应的权重。
方式1：<p class=b>搜索引擎优化</p>方式2：<p><b>搜索引擎优化</b></p>样式表内容：
<style type="text/css">
<!--
.b {
font-weight: bold;
}
-->
</style>2. CSS优化
CSS优化主要是改变CSS的调用方式以及避免使用CSS为重要内容定义样式，以达到精简页面代码及提高页面相关性的目的。
通过改变CSS的调用方式及使用CSS对相同样式的内容进行控制，可以节省大量的代码。
避免使用CSS为重要的内容定义样式。页面中重要内容的样式（尤其是主辅关键字）必须使用HTML标签进行标注，这样才能达到突出页面中的主辅关键字从而提高页面相关性的目的。如粗体<b></b>、斜体<i></i>、下划线<u></u>、标题<h1></h1>、文字颜色、文字大小等。
3. CSS调用方式
CSS调用方式分页面内部调用及外部调用两种，其中内部调用又分为头部调用及主体调用。
• 头部调用
页面头部调用就是把需要使用的CSS样式内容直接放置在页面的头部中（即<head></head>区域）。如果样式内容极少则影响不大，否则不但会大大增加页面的体积，还会占用顶部的重要位置，给页面带来极大的负面影响。如下代码所示：
<head>
<TITLE>网站优化|搜索引擎优化|seo资料</TITLE>
<meta name="keywords" content="搜索引擎优化,网站优化, SEO培训">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
.class1 {
font-weight: bold;
font-size: 12px;
font-style: normal;
line-height: 25px;
font-variant: normal;
}
.drm {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 20px;
color: #0066CC;
}
.drm_orange {
font-size: 14px;
color: #E36200;
}
.drm_10 {
font-size: 11px;
color: #666666;
padding: 2px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.drm_button {
font-size: 12px;
color: #000000;
background-image: url(img/004.jpg);
border: 1px solid #000000;
font-weight: bold;
padding: 1px;
}
a:hover{
color: #FF6600;
text-decoration: underline;
}
.drm_green:hover {
font-size: 12px;
color: #0099FF;
line-height: 20px;
text-decoration: none;
}
.drm_hei {
font-size: 12px;
color: #666666;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 16px;
}
.drm_hui {
text-decoration: none;
border: 1px solid #B9CAD9;
}
-->
</style>
</head>• 主体调用
页面主体调用就是在页面主体 需要样式控制的内容中添加相应CSS样式。这种CSS调用方式既不能发挥CSS的优势（即对于相同样式的内容使用同一个样式进行控制），又会大大增加页面代码量。如下所示：
<p style="font:Arial, Helvetica, sans-serif; font-size:9px; line-height:12pt;>我做的第一个网页</p></body>
• 外部调用
把CSS样式内容放到外部文件中，使得CSS样式与页面彻底分离，这样就可以有效减少页面代码量，而且还不会占用页面顶部的重要位置，让搜索引擎可以优先发现页面中相对重要的内容。但是，同时要避免使用CSS为重要内容定义样式，例如网页中的主辅关键字。
在下面的代码中，把所有的样式内容都写在css.css文件里面，只有在需要的时候才进行调用。例如，对于
<pclass="background">，就是使用名称为background的样式对段落<p></p>中的内容进行控制。
<TITLE>网站优化|搜索引擎优化|seo资料</TITLE><meta name="description" content="网站优化：建于2003年，收集大量搜索引擎优化、网站优化资料及工具。致力于搜索引擎优化研究，与广大SEO爱好者分享搜索引擎优化技巧及经验。最新推出网站优化及培训服务！"><meta name="keywords" content="搜索引擎优化,网站优化, SEO培训"><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><LINK href="/templets/img/css.css" type=text/css rel=stylesheet>
4. DIV+CSS
使用DIV+CSS方式制作页面，一方面可以防止垃圾代码的产生，另一方面可以减少重复代码² 。
使用DIV+CSS方式制作的页面，不管对于搜索引擎还是普通用户都是非常友好的。对于搜索引擎来说，DIV+CSS制作的页面代码简单、清晰，占用存储空间小；而对于普通用户来说，在下载页面的时候，DIV+CSS方式是以<div></div>为单位，其内容远少于表格，页面打开时自然也会更流畅。
但是，使用DIV+CSS方式制作页面也有缺点。第一，在制作页面的时候还要调整其他多个浏览器的兼容性，例如IE6、IE7及Firefox等；第二，搜索引擎并不解析CSS文件里的内容，对于那些需要被突出的关键字或者内容，最好采用HTML标签进行标注。例如，对于页面中主、辅关键字的加粗<b>、字体颜色、标题标签<h1>等样式。
5.2.4 JavaScript优化
1. JavaScript简介
不管是对于普通用户还是搜索引擎，JavaScript都是极不友好的，目前大部分搜索引擎是不解析JavaScript生成内容（即JavaScript生成的内容对于搜索引擎来说是不可见的），在规划页面时要尽量避免使用JavaScript。
目前为止，搜索引擎并不解析JavaScript生成的页面或者内容。
JavaScript代码冗长，执行效率远低于HTML，导致打开页面时间过长。
2. JavaScript优化
在搜索引擎优化里，JavaScript优化并非为了提高JavaScript代码的执行效率，而是为了避免JavaScript代码占用页面空间及重要位置。为此，只需改变JavaScript代码出现的位置及调用方式即可。另外，JavaScript优化的另一个目的就是利用JavaScript对于搜索引擎不可见的特性，调用那些不想让搜索引擎抓取的内容 ³，例如Flash等。
3. JavaScript调用方式
JavaScript的调用分为内部调用和外部调用两种，其中内部调用又分为头部调用和底部调用。
• 头部调用
头部调用就是把JavaScript代码放到页面的头部。但巨量的JavaScript代码放到页面的头部不但会增加页面体积，还会占用页面顶部重要的位置，使得页面中相对重要的内容不能优先向搜索引擎展示，如下代码所示：
<html>
<head>
<TITLE>网站优化|搜索引擎优化|seo资料</TITLE>
<meta name="description" content="网站优化：建于2003年，收集大量搜索引擎优化、网站
优化资料及工具。致力于搜索引擎优化研究，与广大SEO爱好者分享搜索引擎优化技巧及经验。最
新推出网站优化及培训服务！">
<meta name="keywords" content="搜索引擎优化,网站优化, SEO培训">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<LINK href="/templets/img/css.css" type=text/css rel=stylesheet>
<script language="javascript" type="text/javascript"><!--
var FRIENDLY_URLS='true';
function sortFocus(obj){
if(isIE){
obj.value ='';
}
else{
o=new Option('','-1');
obj.options.add(o);
obj.value ='-1';
}
}
function sortBlur(obj, value){
if(isIE){
obj.value ='value';
}
}
function changeSort(obj, sort_url){
if(obj.value != '-1'){
if(sort_url.indexOf('?') > -1){
window.location.href= sort_url + "&productsort=" + obj.value;
}
else{
window.location.href= sort_url + "?productsort=" + obj.value;
}
}
}
function changePagesize(obj, sort_url){
if(obj.value != '-1'){
if(sort_url.indexOf('?') > -1){
window.location.href= sort_url + "&pagesize=" + obj.value;
}
else{
window.location.href= sort_url + "?pagesize=" + obj.value;
}
}
}
function changePage(obj, sort_url){
if(obj.value != '-1'){
if(sort_url.indexOf('?') > -1){
window.location.href= sort_url + "&page=" + obj.value;
}
else{
window.location.href= sort_url + "?page=" + obj.value;
}
}
}
function getCookie(sName){
// cookies are separated by semicolons
var aCookie = document.cookie.split("; ");
for (var i=0;i< aCookie.length; i++){
//aname/value pair (a crumb) is separated by an equal sign
var aCrumb = aCookie[i].split("=");
if (sName == aCrumb[0])
return unescape(aCrumb[1]);
}
//acookie with the requested name does not exist
return null;
}
function setcookie(cookieName, cookieValue, seconds, path, domain, secure) {
var expires = new Date();
expires.setTime(expires.getTime() + seconds);
document.cookie = escape(cookieName) + '=' + escape(cookieValue)
+ (expires?'; expires=' + expires.toGMTString():'')
+ (path?'; path=' + path:'/')
+ (domain?'; domain=' + domain:'')
+ (secure?'; secure':'');
}
//--></script>
<!--[if IE 6]><script>
document.execCommand("BackgroundImageCache", false, true);
</script>
</head>
</html>• 底部调用
底部调用就是把JavaScript代码放在页面的底部（即</body>标签之前）。这样就不会占用页面顶部重要的位置，但还是会占用页面空间，加大页面体积，如下代码所示：
<script language="javascript" type="text/javascript"><!--
var FRIENDLY_URLS='true';
function sortFocus(obj){
if(isIE){
obj.value ='';
}
else{
o=new Option('','-1');
obj.options.add(o);
obj.value ='-1';
}
}
function sortBlur(obj, value){
if(isIE){
obj.value ='value';
}
}
function changeSort(obj, sort_url){
if(obj.value != '-1'){
if(sort_url.indexOf('?') > -1){
window.location.href= sort_url + "&productsort=" + obj.value;
}
else{
window.location.href= sort_url + "?productsort=" + obj.value;
}
}
}
function changePagesize(obj, sort_url){
if(obj.value != '-1'){
if(sort_url.indexOf('?') > -1){
window.location.href= sort_url + "&pagesize=" + obj.value;
}
else{
window.location.href= sort_url + "?pagesize=" + obj.value;
}
}
}
function changePage(obj, sort_url){
if(obj.value != '-1'){
if(sort_url.indexOf('?') > -1){
window.location.href= sort_url + "&page=" + obj.value;
}
else{
window.location.href= sort_url + "?page=" + obj.value;
}
}
}
function getCookie(sName){
// cookies are separated by semicolons
var aCookie = document.cookie.split("; ");
for (var i=0;i< aCookie.length; i++)
{
//aname/value pair (a crumb) is separated by an equal sign
var aCrumb = aCookie[i].split("=");
if (sName == aCrumb[0])
return unescape(aCrumb[1]);
}
//acookie with the requested name does not exist
return null;
}
function setcookie(cookieName, cookieValue, seconds, path, domain, secure) {
var expires = new Date();
expires.setTime(expires.getTime() + seconds);
document.cookie = escape(cookieName) + '=' + escape(cookieValue)
+ (expires?'; expires=' + expires.toGMTString():'')
+ (path?'; path=' + path:'/')
+ (domain?'; domain=' + domain:'')
+ (secure?'; secure':'');
}
//--></script>
<!--[if IE 6]><script>
document.execCommand("BackgroundImageCache", false, true);
</script>• 外部调用
外部调用就是把JavaScript内容存放到一个JavaScript文件里，再在页面中进行调用。这样做既不占用页面重要的位置，又可以精简大量代码，加快页面显示的速度，如下代码所示。
<TITLE>网站优化|搜索引擎优化|seo资料</TITLE>
<meta name="description" content="网站优化：建于2003年，收集大量搜索引擎优化、网站优化资料及工具。致力于搜索引擎优化研究，与广大SEO爱好者分享搜索引擎优化技巧及经验。最新推出网站优化及培训服务！">
<meta name="keywords" content="搜索引擎优化,网站优化, SEO培训">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<LINK href="/templets/img/css.css" type=text/css rel=stylesheet>
<script language="JavaScript" src="/include/login.js"></script>4. 隐藏信息
在实际应用中，网页中有些内容是会对网页的搜索引擎友好性产生负面影响的。因此，就要对搜索引擎隐藏这些内容，这时就可以利用JavaScript生成或调用。例如网页中的Flash文档，一般的搜索引擎是不检索Flash的，但是Flash却占用了一定的网页区域，从而会影响我们向搜索引擎展示网页中其他相对重要的内容。所以，我们需要向搜索引擎屏蔽掉这些内容，来提高页面的搜索引擎友好性（关于Flash文档的隐藏，请参考7.5.2节）。
5.2.5 表格优化
精简代码的最后一步就是对表格进行优化。表格优化主要是解决表格之间的嵌套问题，让表格之间保持独立，从而加快页面在浏览器中的显示速度，提高用户体验。同时，又可以精简页面代码，提高页面的搜索引擎友好性。
在介绍表格优化之前，我们先来了解一下浏览器解析HTML代码的过程。当浏览器的编译器遇到一个开始标签时，就会寻找与之匹配的结束标签，直至匹配上才会在浏览器中显示该标签中的内容。例如，当浏览器的编译器遇到<table>标签时，就寻找与之匹配的结束标签</table>，直至匹配上才显示表格里的内容。否则将继续往下寻找，直至匹配为止。所以，如果表格间出现多次嵌套，特别是当这些表格里的内容较多的时候，打开页面的速度就会特别慢，因为需要下载及编译的内容特别庞大 ⁴。
请看下面这个例子。一个3行1列的大表格，每个单元格里嵌套着一个小表格。假设每个小表格里内容的代码量有50 KB，则大表格里代码量至少有150 KB。也就是说，浏览器至少需要下载并执行150 KB的代码后才能显示表格里的内容。换句话说，只有下载并执行150KB的代码后，这个页面才会显示。代码内容如下所示，页面效果如图5-9所示。
代码：
<table width="778" height="105" border="1" cellpadding="1" cellspacing="1">
<tr>
<td>
<table width="778" border="1" cellspacing="0" cellpadding="1"
bordercolor="#0000FF">
<tr>
<td>50KB内容</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><table width="778" border="1" cellspacing="0" cellpadding="1" bordercolor="#0000FF">
</table>
<tr>
<td>50KB内容</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="778" border="1" cellspacing="0" cellpadding="1"
bordercolor="#0000FF">
<tr>
<td>50KB内容</td>
</tr>
</table>
</td>
</tr>
</table>如果让表格之间保持独立，即把所有的小表格及内容从大表格中抽离出来，页面内容就会分散在3个小表格里，每个表格里内容的代码量在50 KB左右，如下面代码所示，这时浏览器只需下载并执行50 KB左右的代码量，就可以显示相应的内容，如图5-10所示：
<table width="778" border="1" cellspacing="0" cellpadding="1" bordercolor="#0000FF">
<tr>
<td>50KB内容</td>
</tr>
</table><br>
<table width="778" border="1" cellspacing="0" cellpadding="1" bordercolor="#0000FF">
<tr>
<td>50KB内容</td>
</tr>
</table><br>
<table width="778" border="1" cellspacing="0" cellpadding="1" bordercolor="#0000FF">
<tr>
<td>50KB内容</td>
</tr>
</table>
经过精简代码，有效地删除了页面中的冗余代码，降低了页面体积，提高了页面的搜索引擎友好性。
尽管我们总是想方设法地降低页面的体积，但并不代表页面的体积越小就越好。因为，页面体积越小意味着页面中的内容就会越少，能向用户提供的信息量也就越少。然而，页面的体积究竟多大才合理呢？这取决于网站的类型。一般认为，页面的体积控制在100 KB左右会更受用户及搜索引擎的欢迎（仅指HTML源代码的部分，不包括图片及其他多媒体元素）。
如果一个页面超过100 KB，搜索引擎就可能会拒绝收录100 KB后面的那部分内容甚至放弃抓取该页面。除非这个页面具有更高的权重或者相对重要的内容。例如，对于网站的首页，即使是三四百KB，也极有可能会被收录（如新浪网的首页）。
由此可得出以下结论。
- 一个页面的体积保持在100 KB左右对于搜索引擎最为友好。
- 搜索引擎更加重视页面中前100 KB的内容。
- 搜索引擎更愿意收录体积在100 KB左右的页面。换句话说，如果网站上大部分的页面保持在100 KB左右，被搜索引擎收录的机会就会大大增加。
随着各方面技术的成熟，搜索引擎会慢慢接受体积更大的页面。但是，为了提高用户体验，建议在规划页面的时候，页面体积尽量保持在100 KB左右。
通过上面的操作，基本上清除了页面中的冗余代码。接下来，将介绍代码优化的另一个重要任务——提高页面相关性，主要包括页面头部优化及权重标签使用。
本书评论