网页加速系列
2008-06-02 10:47 Jacky_Xu 阅读(600) 评论(0) 编辑 收藏 举报搜集到一些关于网站提速的资料，做一个系列，一些文章可能转或摘自网络。
（一）、 网页加速之图形处理篇
在维护网站的过程用，可能遇到过这样的情况：辛辛苦苦做出来的页面，但图片过多，网页结构、表格结构复杂，程序冗长，使得加载速度很慢！网页总是不能完全的展现在浏览者面前。
以后的几篇文章将网页减肥方面的一些经验介绍给大家，希望大家都来讨论，说说自己的观点！
1、合并图片
尽量把几个可能组合在一起的图片制作成一张图片，这是因为浏览器对网页中的每个图片都会做个别请求，也就是说如果网页中有5张图片，那么浏览器就会向WEB服务器提出5次请求，这必然会增加服务器的负担，从而使得速度变慢！当然大图片除外。
2、指定宽高
在网页中镶入图片的时候，一定注明高度和宽度，如：<IMG src="TEST.GIF" WIDTH=100 HEIGHT=100>，如果没有注明，浏览器在下载完图片以前，将无法确定图片的大小，页面的提交就会延迟，甚至可能重复向WEB服务器提出请求。
3、选择图片格式
选择适当的图片格式，常见的格式为：JPG和GIF，两种图片分别采用不同的方法压缩图片。JPG支持的颜色数量比较多，一般对于照片或者颜色变化显著的图片用JPG格式，还应该适当的选择压缩比，在基本不损坏效果的前提下尽量压缩。GIF最多支持256种颜色，适合小图片、色彩比较少的图片，对于GIF图片可以在不影响图片效果的前提下尽量减少图片的颜色数量。适当的选择图片的格式，对图片的大小会有不小的影响。可以借助一些图片处理软件。
4、图片处理
应该采用逐步提交方式提交图片，GIF和JPG两种图片格式都支持逐步提交格式，图片在逐步提交时，在浏览器收到完整图片信息之前就开始显示了。这样看起来快一些。GIF保存为交错格式，JPG选择逐步编码来保存。
5、替换文字
对于所有图片应该带有文本，用<IMG>ALT标签实现，因为很多朋友为了增加浏览速度关闭了浏览器的图片功能。提供了文本有助于搞清页面的内容。
最后注意，网页到最后总是以内容来吸引大家的，内容是最重要的！所以，请尽量将一些没有必要的图片去掉！
（二）、 网页加速之网页结构篇
一个网页的结构的好坏，对网页的加载速度有着很大的影响！
1、关于框架结构
一般情况下，应尽量避免使用框架结构，因为浏览器必须对框架中的每个页面分别进行请求！这必然会增加服务器的负担。另外，现在还有少数用户使用的浏览器并不支持框架结构显示。 当然在一些地方，框架结构还是显得非常方便，比如：聊天室、论坛、社区、软件下载。
2、关于表格
表格的应用不仅仅限于，在一些内容列表的时候时候，对于网页的整个布局，表格有着非常重要的作用。为了能使大量的内容在网页上布置的井井有条，一般通过没有边框的来将网页分块，然后将不同的内容放在不同的单元格中。表格的使用是有一些技巧的：首先，尽量避免使用结构复杂的表格，因为结构复杂的表格，有可能使浏览器多次刷新表格。其次，能将一个表格分为两个或两个以上的时候应该分为两个，因为浏览器只有在整个表格的内容全部读入以后再输出显示，如果表格中的内容非常的多，那么在加载过程中，浏览器在表格读入完毕以前将一直显示空白。最后，表格嵌套不要超过3层，层次太多的话在加载表格的时候会使浏览器花大量的时候处理表格结构。
新浪网的首页页面时候很好的例子，大家可以保存它有编辑软件打开查看其结构。 熟练的使用表格是作出美观的网页所必须的！
（三）、 网页加速之网页减肥篇
为完成页面减肥就要先说说HTML语言了，它是一种解释性的脚本语言，更多请参见（http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/dhtml.asp，英文），那怎样可以“减肥”呢，因为在HTML语言里本来是不用换行，不用大量的空格的，但各种用编辑器写出来的HTML为了便于作者查看程序所以都用上了很多的空格和和换行，好像FP2000这个软件会产生相当多的空格使你网页的内空变得很大。还有一些可以减去的内容就是人为的了，比如你把多个HTML的属性用到一个对像上，而这些属性里有重复的，也会使你的页面变肥了。而一些可以产生同要效果的不同定义也会产生了大量的无用代码。下面看一下具体的减肥方法：
1、软件压缩法
最容易的方法就是软件压缩法，用一些专门对HTML减肥的软件来对HTML页面减肥，这个方法很容易且很有效，但对于比如人为造成的冗余HTML代码就不能减了，只能减掉多余的空格和tab。
2、设计减肥法
这个方法也很容易的，在这里只讲一部分，更多的要自己积累，方法就是在设计网页时，特别是用一个软件来设计网页时你要用一种良好的操作习惯和正确的方法使你编写出来的页面量优化。例如当你有文字或图片在表格里时需要居中，那么使用单元格居中就会比使用文字居中产生的代码少；例如页面里所有的文字都是小字的时候用CSS的方法来定义文字会比一部份一部份的去写义文字少产生很多的代码；再例如要
给一个表格里的一行定义相同的色彩，那么使用行定义（TR）就会比使用单元格定义色彩产生的代码少；又例如如果你页面里大多数的链接都是要新开一个窗口，那么你把该页面的默认(base)设为开新窗口，这样又会减少很多的开新窗口的定义。类似的代码也是如此。
3、程序减肥法
这就是页面减肥的较高的境界了，大家看能看到，页面里有很多的代码是想同的，这些样同的东西如果可以减下来可
就不得了了，怎样做到呢？用程序了，因为现在的网页都可以使用一种程序语言JAVASCRIPT这种程序是插入HTML里面完成
一些动态的东西，那么我们的减肥就用它了，比如做链接的HTML如下：
<TD ALIGN=MIDDLE WIDTH=110><A href="HTTP://www.qianxun.com">千寻</A></TD>
<TD ALIGN=MIDDLE WIDTH=110><A href="HTTP://HDQS.126.COM">红豆情思</A></TD>
<TD ALIGN=MIDDLE WIDTH=110><A href="HTTP://STONETIME.126.COM">STONE时间</A></TD>
<TD ALIGN=MIDDLE WIDTH=110><A href="HTTP://XIAOKUEN.ON.NET.CN">恋爱花园</A></TD>
<TD ALIGN=MIDDLE WIDTH=110><A href="HTTP://LILICAI.YEAH.NET">味道</A></TD>
<TD ALIGN=MIDDLE WIDTH=110><A href="HTTP://BROY.126.COM">风花</A></TD>
内容不少了，但有不少的东西是一样的，那么我们就用程序来动态的生成这些东西程序如下：
<SCRIPT>
FUNCTION LK(URL,TXT){
DOCUMENT.WRITE("<TD ALIGN=MIDDLE WIDTH=110><A href="+URL+">"+TXT+"</A></TD>")
}
LK("RONGWW.YEAH.NET","<FONT COLOR=RED>榕儿的家")
LK("HDQS.126.COM","红豆情思")
LK("STONETIME.126.COM","STONE时间")
LK("XIAOKUEN.ON.NET.CN","恋爱花园")
LK("LILICAI.YEAH.NET","味道")
LK("BROY.126.COM","风花")
</SCRIPT>
这样以来，内容就会减少一些，但如果好像上面的链接有很多很多，这段代码就可以大量的为你减肥了，而且增加了页面的可维护性，这个程序只是一个例子，也许它不合你所需，但这就是我告诉你的方法，你可以自已设计所需的程序，使页面更快更好（比如我的页面上的年月日下拉框就是dw("<option value="+i+">"+i+"</option>")，大大减少了页面网络流量）。另一种用程序减肥的方法就是合里的使用.JS程序，.JS的使用不当会使页面速度下降，但如果合理的使用，自己本地的.JS就另有工效了。通过它可以把不同网页里相同的代码用一个.JS文件保存，使
页面的容量减少，同时还便于以后的页面修改。
（四）、 网页加速之CSS辅助减肥篇
WEB网站可用性的关键指标是速度，更确切地说，是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种，包括WEB服务器的速度、访问者的INTERNET连接情况，以及浏览器必须下载的文件大小。尽管你无法控制服务器和连接的速度，但是你可以控制构成网站WEB页面的文件大小。
为了让网站能够更快，WEB的建设者都会按常规地压缩和优化网站上的每一个图像文件，这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量。由于CSS样式表是纯文本文件，和图像相比相对较小，所以WEB建设者很少考虑采取措施减少其CSS样式表文件的大小。但是，通过使用CSS缩写以及其他的一些简单技巧，你可以在很大程度上减少样式表的大小。在我对自己样式表的一次非正式的特别测试中，我把文件的大小降低了大约25－50％。
使用CSS的缩写性质
CSS的缩写性质（SHORTHAND PROPERTY）是一些专用的性质名，用来代替多个相关性质的集合。例如，间隙性质（PADDING PROPERTY）是顶部间隙（PADDING-TOP）、右侧间隙（PADDING-RIGHT）、底部间隙（PADDING-BOTTOM）和左侧间隙（PADDING-LEFT）的缩写。
使用速写性质让你能够把多个性质／属性对（PROPERTY/ATTRIBUTE PAIR）压缩进CSS样式表的一行代码里。例如，想一想下面的代码：
.SAMPLE1 {
MARGIN-TOP: 15PX;
MARGIN-RIGHT: 20PX;
MARGIN-BOTTOM: 12PX;
MARGIN-LEFT: 24PX;
PADDING-TOP: 5PX;
PADDING-RIGHT: 10PX;
PADDING-BOTTOM: 4PX;
PADDING-LEFT: 8PX;
BORDER-TOP-WIDTH: THIN;
BORDER-TOP-STYLE: SOLID;
BORDER-TOP-COLOR: #000000;
}
将它用一些缩写性质来替代就能够把代码减少为下面这样，两者的实际效果是完全一样的：
.SAMPLE1 {
MARGIN: 15PX 20PX 12PX 24PX;
PADDING: 5PX 10PX 4PX 8PX;
BORDER-TOP: THIN SOLID #000000;
}
要注意，缩写性质还有多个属性，每一个（属性）都对应一个被组合进入缩写性质的常规性质。属性由空白隔开。
当属性是类似的值的时候，例如用于边框空白性质（MARGIN PROPERTY）的线性测量的时候，接在缩写性质之后的属性的顺序很重要。属性的次序是从顶部（顶部的边框空白）开始，然后围绕格子（BOX）按顺时针次序继续。
如果缩写性质的所有属性都是相同的，那么你可以简单地列出单个属性，然后在前面将它复制四遍。因此，下面的两个性质是相等的：
MARGIN: 5PX 5PX 5PX 5PX;
MARGIN: 5PX;
类似的，你可以使用接在边框空白或者间隔性质之后的两个属性来代表顶部／底部和右侧／左侧属性对。
MARGIN: 5PX 10PX 5PX 10PX;
MARGIN: 5PX 10PX;
属性的顺序在它们是不相似的值的时候是不重要的。因此，边框颜色、边框风格和边框宽度等属性可以以任何顺序接在大纲性质（OUTLINE PROPERTY）之后。忽略某个属性等同于从样式规则里忽略掉对应的常规性质。
CSS缩写性质列表
下面是CSS缩写性质的列表以及它们所表示的常规性质。
BACKGROUND（背景）：背景附件、背景颜色、背景图像、背景位置、背景重复
BORDER（边框）：边框颜色、边框风格、边框宽度
BORDER-BOTTOM（底部边框）：底部边框颜色、底部边框样式、底部边框宽度
BORDER-LEFT（左侧边框）：左侧边框颜色、左侧边框样式、左侧边框宽度
BORDER-RIGHT（右侧边框）：右侧边框颜色、右侧边框样式、右侧边框宽度
BORDER-TOP（顶部边框）：顶部边框颜色、顶部边框样式、顶部边框宽度
CUE（声音提示）：前提示、后提示
FONT（字体）：字体、字号、字体样式、字体粗细、字体变体、线高度、字体大小调整、字体拉伸
LIST-STYLE（列表样式）：列表样式图像、列表样式位置、列表样式类型
MARGIN（空白）：顶部空白、右侧空白、底部空白、左侧空白
OUTLINE（大纲）：大纲颜色、大纲样式、大纲宽度
PADDING（间隙）：顶部间隙、右侧间隙、底部间隙、左侧间隙
PAUSE（暂停）：后暂停、前暂停
减少空白
减少CSS样式表大小的另一种方法是从文档里删掉大多数无用的空白。换句话说，将每条规则打破放进一行代码里，即把原来插入到代码里用来把每个性质／属性分割到不同行的换行符和缩进符删掉。
例如，下面的代码示例在内容上相同，但是第二个要精炼得多：
H1 {
FONT-SIZE: X-LARGE;
FONT-WEIGHT: BOLD;
COLOR: #FF0000;
}
H1 {FONT-SIZE: X-LARGE; FONT-WEIGHT: BOLD; COLOR: #FF0000}
删掉注释
将注释从你的CSS代码里删掉是减少文件大小的另一种方式。尽管注释对于代码的阅读很有用，但是它无助于浏览器生成你的WEB页面。很多WEB建设者都习惯给每一行代码都加上注释，或者至少给每一条规则声明都加上。这样的慷慨注释在CSS样式表里是极少需要的，因为大多数CSS性质和属性都很容易阅读和理解。如果你对类、ID，以及其他的选择器都使用有意义的名称，你就可以省掉大多数的注释，同时仍然能够保持代码的可读性和可维护性。
H1 { /* HEADING 1 STYLE*/
FONT-SIZE: X-LARGE; /* X-LARGE SIZE */
FONT-WEIGHT: BOLD; /* BOLD */
COLOR: #FF0000; /* RED */
}
使用速写性质、删除无用的空白、省略注释都能够在很大程度上减少你CSS样式表文件的大小。这反过来会对加速你WEB网站速度的总体目标作出小的、但是可能会是显而易见的贡献。
本文原文地址：http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dndude/html/dude1201.asp（英文）
（五）、 网页加速之进阶上篇
WEB开发人员是否必须掌握复杂的组件技术才能加快HTML页面的访问速度？答案是：不一定！实际上，有许多关于HTML与DHTML方面的技巧，它们原理简单而且上手容易。无论是技术高超的老手，还是初涉编程的菜鸟，领会这些都十分必要。
减少下载
减少WEB页面下载时间的关键就是设法减小文件大小。当多个页面共用一些成分内容时，就可以考虑将这些公用部分单独分离出来。比如：我们可以将多个HTML页面都用到的脚本程序编写成独立存在的.JS文件，然后再在页面中按如下方式调用它：
<SCRIPT src="MYFILE.JS"></SCRIPT>
这样，公用文件只需要下载一次，然后就进入缓冲区。等下次再次调用包含公用文件的HTML页面时，下载时间明显减少。
让样式表内容进入地下工作
CSS是HTML装扮器，一个漂亮的WEB页面不可能没有它。HTML页面中有多种引用CSS的方法，不同的方法导致的效率也不一样。通常，我们可以将定义于<STYLE></STYLE>间的样式控制代码提取出来，保存到单独的.CSS文件中，然后在HTML页面中以<LINK>标记或者@IMPORT标记的方式进行引用：
<STYLE>
@IMPORT URL("MYSHEET1.CSS");
</STYLE>
请注意2点：1、.CSS文件中无需包括<STYLE>标记；2、@IMPORT和LINK标记要定义在HTML页面的HEAD部分。
宝贵内存节省两法
尽量减少HTML页面占用的内存空间是加快页面下载速度的一个有效方法。在这方面，有2个需要注意的问题：
1、使用同一种脚本语言
HTML页面离不开脚本程序的支持，我们经常会在页面中嵌入多种脚本语言，比如JAVASCRIPT与VBSCRIPT。但是，不知你发觉没有：这样的混合使用减慢了页面的访问速度。原因在于：要解释并运行多种脚本代码，就必须在内存中装载多种脚本引擎。所以，请尽量在页面中使用同一种脚本语言编写代码。
2、巧用IFRAME
你使用过<IFRAME>标记吗？它可是一个非常美妙的功能。如果要在一个HTML文档中包含第2个页面的内容，通常的方法是使用<FRAMESET>标记。但是有了<IFRAME>，一切变得简单了。比如，开发一个文档预览页面，可以在左边放置一系列主题，在右边放置一个IFRAME，其中包含要预览的文档；当鼠标掠过左边的每一个主题链接时，就在右边建立一个新的IFRAME以预览文档。这样做，代码效率无疑是高效的，但同时导致了繁重的处理过程，最终是缓慢的速度。
没关系，我们有办法：只使用单一的IFRAME。当鼠标指向一个新主题时，只需要修改IFRAME元素的SRC属性即可。这样，任何时间内只会有一个预览文档保留在内存。
择优选用动画定位属性
每天上网浏览页面，你一定会看到许多动画效果。比如，一个可爱的小兔子在页面上来回地走动 ... 实现这个效果的核心技术就是CCS定位。通常，我们是使用ELEMENT.STYLE.LEFT和ELEMENT.STYLE.TOP2个属性来达到图形定位的目的。但是，这样做会产生一些问题：LEFT属性返回一个字符串，并且其中包含了度量单位（比如100PX)。因此，要设定新的位置坐标，就必须首先对这个字符串返回值进行处理，然后才能赋值，象下面一样：
DIM STRINGLEFT, INTLEFT
STRINGLEFT = ELEMENT.STYLE.LEFT
INTLEFT = PARSEINT(STRINGLEFT)
INTLEFT = INTLEFT + 10
ELEMENT.STYLE.LEFT = INTLEFT;
你一定会感觉做这么点事情竟要编写这么复杂的代码，是否有更简洁的方法？当然有！请看这4个属性：POSLEFT、POSTOP、POSWIDTH 和 POSHEIGHT，它们对应于相应字符串返回值的点数数值。好了，使用这些属性重新编写代码实现上面代码实现的功能：
ELEMENT.STYLE.POSLEFT += 10
代码短小、速度却更快！
本文可参考以下网址：
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dndude/html/dude1201.asp
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/perf/perftips.asp
（六）、 网页加速之进阶下篇
循环控制多个动画
说到制作动画效果，当然离不开定时器的运用。通常的方法就是使用WINDOW.SETTIMEOUT来不断地定位页面上的元素。但是，如果页面上有多个动画要显示，是不是就要设定多个定时器呢？答案是NO！原因很简单：定时器功能将消耗掉大量宝贵的系统资源。可是我们仍能在页面上控制多个动画，技巧就是使用一个循环。在循环中根据不同的变量值控制相应动画的位置，整个循环中只使用一个WINDOW.SETTIMEOUT()函数调用。
VISIBILITY快于DISPLAY
让图画时隐时现会创造很有趣的效果，有2种方法可以实现这个目的：使用CSS的VISIBILITY属性或者DISPLAY属性。对于绝对位置元素，DIAPLAY和VISIBILITY具有同样的效果。两者的区别在于：设置为DISPLAY:NONE的元素将不再占用文档流的空间，而设置为VISIBILITY:HIDDEN的元素仍然保留原位置。
但是如果要处理绝对位置的元素，使用VISIBILITY会更快。
从小处着手
编写DHTML网页的一个重要提示是：从小处着手。初次编写DHTML页面时，一定不要试图在页面中使用你了解到的全部DHTML功能。每次可以只使用一个单一的新特征，并且仔细地观察由此产生的变化。如果发现性能有所下降，就可以快速地找到为什么。
脚本的DEFER化
DEFER是脚本程序强大功能中的一个“无名英雄”。你可能从没有使用过它，但是看完这里的介绍后，相信你就离不开它。它告诉浏览器SCRIPT段包含了无需立即执行的代码，并且，与SRC属性联合使用，它还可以使这些脚本在后台被下载，前台的内容则正常显示给用户。
最后请注意两点：
1、不要在DEFER型的脚本程序段中调用DOCUMENT.WRITE命令，因为DOCUMENT.WRITE将产生直接输出效果。
2、而且，不要在DEFER型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。
保持同一URL的大小写一致性
我们都知道UNIX服务器是大小写敏感的，但是你知道吗：INTERNET EXPLORER的缓冲区也是区别对待大小写字符串的。因此，作为WEB开发者，一定要记住保持相同链接的URL字符串在不同位置的大小写的一致性。否则，就会在浏览器的缓冲区中存放同一位置的不同文件备份，也增加了下载同一位置内容的请求次数。这些都无疑降低了WEB访问效率。所以请谨记：同一位置的URL，在不同页面中请保持URL字符串的大小写一致性。
让标记有始有终
自己编写或者查看他人的HTML代码时，我们一定都遇到过标记有头无尾的情况。比如：
<P>有头无尾标记举例
<UL>
<LI>第一个
<LI>第二个
<LI>第三个
</UL>
很明显，上面的代码中缺少三个</LI>结束标记。但是这并不妨碍它的正确执行。在HTML中，这样的标记还有一些，例如FRAME、IMG和P。
可是请不要偷懒，请将结束标记写完整，这样做不仅使HTML代码格式规范，更可以加速页面的显示速度。因为INTERNET EXPLORER将不会花费时间判断和计算段落或者列表项目在哪里结束。
<P>有头有尾标记举例</P>
<UL>
<LI>第一个</LI>
<LI>第二个</LI>
<LI>第三个</LI>
</UL>
OK，以上列举了有关加速HTML页面的10个处理技巧，描述这些很简单，但是只有真正领会并掌握其中的本质，并且举一反三，才会编写出更快、更好的程序。
