本文分享了多种提升网页加载速度的方法，包括图片优化、CSS样式表瘦身、合理使用脚本及DOM操作技巧等。
|
网页加速之图形处理篇 在维护网站的过程用，可能遇到过这样的情况：辛辛苦苦做出来的页面，但图片过多，网页结构、表格结构复杂，程序冗长，使得加载速度很慢！网页总是不能完全的展现在浏览者面前。 以后的几篇文章将网页减肥方面的一些经验介绍给大家，希望大家都来讨论，说说自己的观点！ 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、软件压缩法 2、设计减肥法 3、程序减肥法
使用CSS的缩写性质 使用速写性质让你能够把多个性质／属性对（PROPERTY/ATTRIBUTE PAIR）压缩进CSS样式表的一行代码里。例如，想一想下面的代码： .SAMPLE1 { 将它用一些缩写性质来替代就能够把代码减少为下面这样，两者的实际效果是完全一样的： .SAMPLE1 { 要注意，缩写性质还有多个属性，每一个（属性）都对应一个被组合进入缩写性质的常规性质。属性由空白隔开。 当属性是类似的值的时候，例如用于边框空白性质（MARGIN PROPERTY）的线性测量的时候，接在缩写性质之后的属性的顺序很重要。属性的次序是从顶部（顶部的边框空白）开始，然后围绕格子（BOX）按顺时针次序继续。 如果缩写性质的所有属性都是相同的，那么你可以简单地列出单个属性，然后在前面将它复制四遍。因此，下面的两个性质是相等的： MARGIN: 5PX 5PX 5PX 5PX; MARGIN: 5PX; 类似的，你可以使用接在边框空白或者间隔性质之后的两个属性来代表顶部／底部和右侧／左侧属性对。 MARGIN: 5PX 10PX 5PX 10PX; MARGIN: 5PX 10PX; 属性的顺序在它们是不相似的值的时候是不重要的。因此，边框颜色、边框风格和边框宽度等属性可以以任何顺序接在大纲性质（OUTLINE PROPERTY）之后。忽略某个属性等同于从样式规则里忽略掉对应的常规性质。 CSS缩写性质列表
BACKGROUND（背景）：背景附件、背景颜色、背景图像、背景位置、背景重复 减少CSS样式表大小的另一种方法是从文档里删掉大多数无用的空白。换句话说，将每条规则打破放进一行代码里，即把原来插入到代码里用来把每个性质／属性分割到不同行的换行符和缩进符删掉。 例如，下面的代码示例在内容上相同，但是第二个要精炼得多： H1 {
H1 {FONT-SIZE: X-LARGE; FONT-WEIGHT: BOLD; COLOR: #FF0000} 删掉注释 将注释从你的CSS代码里删掉是减少文件大小的另一种方式。尽管注释对于代码的阅读很有用，但是它无助于浏览器生成你的WEB页面。很多WEB建设 者都习惯给每一行代码都加上注释，或者至少给每一条规则声明都加上。这样的慷慨注释在CSS样式表里是极少需要的，因为大多数CSS性质和属性都很容易阅 读和理解。如果你对类、ID，以及其他的选择器都使用有意义的名称，你就可以省掉大多数的注释，同时仍然能够保持代码的可读性和可维护性。 H1 { /* HEADING 1 STYLE*/ 使用速写性质、删除无用的空白、省略注释都能够在很大程度上减少你CSS样式表文件的大小。这反过来会对加速你WEB网站速度的总体目标作出小的、但是可能会是显而易见的贡献。
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>
宝贵内存节省两法 尽量减少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 代码短小、速度却更快！
循环控制多个动画 说到制作动画效果，当然离不开定时器的运用。通常的方法就是使用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>有头无尾标记举例 很明显，上面的代码中缺少三个</LI>结束标记。但是这并不妨碍它的正确执行。在HTML中，这样的标记还有一些，例如FRAME、IMG和P。 可是请不要偷懒，请将结束标记写完整，这样做不仅使HTML代码格式规范，更可以加速页面的显示速度。因为INTERNET EXPLORER将不会花费时间判断和计算段落或者列表项目在哪里结束。 <P>有头有尾标记举例</P> OK，以上列举了有关加速HTML页面的10个处理技巧，描述这些很简单，但是只有真正领会并掌握其中的本质，并且举一反三，才会编写出更快、更好的程序
DHTML性能提高的其他技巧 DHTML性能提高的其他技巧 More Performance Tips（英文） DHTML性能提高的其他技巧 在微软开发过程的最重要的事情之一就是为产品进行调优。 令许多DHTML和HTML开发者们的头痛的就是没有足够多的技术文献来了解使页面更快方法和造成了页面缓慢的原因。当然，也有一些简单的事情，比 如页面上不使用2MB的图片。不过，在对DHTML页面提速的工作中，我们发现了一些有趣的技巧和窍门，可以用来提高你自己页面的性能。 这次我要调整的代码示例是一个table构建程序。它要构建一个1000多行表格，通过使用document.createElement()和 element.insertBefore()方法。每行包含一个单元格cell。每个单元格内容为"Text"。实现这一代码的最差劲的代码是什么样子 的？这一小段优化代码可以改善多少？非常多！ 我起初写了一段自以为很快的代码，我努力避免了一些非常低级的错误，比如不进行变量声明，或者在同一个页面同时使用VBScript和JScript。代码如下：
查看示例1 所有的测试都运行在Intel Pentium II 233 ，64MB内存, Windows NT® 4.0和Internet Explorer 5，每个页面都从本地磁盘加载。所有的事件计时都是从页面的初始加载到页面“静止”（所有的队列事件都已执行，屏幕重绘完成）。基线页面（我称作 ‘Test1’）花费了2328毫秒。 在DHTML页面中经常用到，并且相当耗时的操作是全局对象引用。像“document”， “body”，“window”等，这些变量引用的代价比简单通过一个局部变量引用要昂贵的多。 我决定首先要改动的就是将“document.body”的引用“缓存”到一个变量“theBody”。只是给body属性加了另一个引用，因此这个改动相对小。 代码中增加了该行： 并且将行： 调整为：
查看示例2 上面的调整并没有影响到整个的时间，仅仅节省了3ms加载时间。然而，如果我们把这段代码引入到主循环中，结果将会变得极具意义。 接下来我打算做的是把document对象本身也缓存起来。由于document对象被引用了3002次在这个示例中。
这个版本的页面加载只需要2100ms。这样以来，我们将应用程序的整个运行时间减少了10％，并且很有实际意义。获取一个document变量比局部变量大约多花费4ms时间。 一个是否常用的document加载速度的优化是为<script>标签指定defer属性。设置这个属性仅适合不需要立即运 行<SCRIPT>中代码的情况。（立即运行的代码指不在函数体内的－－这些代码将会在脚本块加载后立即执行）当defer属性设置后，IE 不会等待加载和转换这段脚本。这就也为着页面加载会快很多。通常这意味着立即运行的脚本应该封装放在一个函数内，并通过document或者body的 onload的事件处理。如果你的脚本是依赖于页面加载后的用户动作－－如点击按钮，或者移动鼠标到某个区域，会更加有用！不过，如果你的代码希望立即执 行，或者在page加载后立即马上执行，就无法利用这个特性了。 下面是增加了defer属性后新的版本
查看示例4 页面加载时间降为2043ms了。相对基线页有12％的提升，相对前一版本有2.5%的提升。 接下来要改进的更有意义，但是有一点棘手。当创建element并添加到节点树，并将它们添加到主document上更有效率－－不是把它们添加给 一个大的子树，然后将这个子树添加到document上。例如，如果我们打算创建一个新的表格行row，并带有一个含有文本的单元格cell，我将这么 做： 但是上面的方法会比下面的慢： 前面的示例都使用了第一个方法，示例5将会使用上面第二个方法，完整代码如下：
查看示例5 示例5仅需1649ms。比上个版本要快25％，并且比基线页快了几乎30％。 下一步要调整的是修改table使用fixed-table布局(layout)。指定了fixed-table布局后的表格的列宽使 用<COL>标签设置，或者，如果没有<COL>标签，每个单元格的空间从行平分。fixed-table布局样式将改善 table的性能，因为每个单元格的内容的尺寸不需要进行计算了。这是一个非常实用的性能改善方法，特别是那些有很多列的大型表格。 这个操作也可以通过简单增加css样式实现：
查看示例6 然而，由于本示例只有一个单元格，所以这个改动只带来1.6%的性能提升。这个提示会随着table的单元格数量增加而增加。 最后的2个示例包括调整给单元格赋值的方式。在所有的示例中，创建了一个TextNode，并添加给TD。而示例7，将使用inerText代替插入一个text节点，代码调整为：
（译者：innerText只在IE中受支持，属于IE扩展，兼容FireFox可使用innerHTML） 查看示例7 令人惊奇的是，这个改动有显著效果－－比上次快了9％，总提升36％。这样以来我们的最终测试以1473ms代替了基线页的2323ms。 目前位置，几乎所有人都知道使用element.innerHTML是很慢，很慢，很慢的。想知道有多慢，我最后放了一个使用innerHTML代 替innerText来为单元格添加文本的示例。这个调整击跨了性能，总时间变成3375ms，比上个版本差了80％！。这个变化比基线页还差45％。很 明显，innerHTML是相当昂贵的。 你可以查看所有的测试结果，显示了演练和平均值。 调优HTML页面跟调优Win32应用程序一样，你必须知道哪里慢下来了，而哪里比较快。希望这些技巧可以帮助你加速你的页面。
实战DHTML性能优化，改善自定义下拉框控件 作者：Truly 先介绍一下本文演示用的代码，在我的项目中要实现一个自定义样式的下拉框,使用自定义的下拉箭头和自定义颜色的边框来取代系统默认的select。 要实现这个功能就需要通过table模拟实现。那么我使用一个js方法来实现这个模拟过程，并封装为initSelect(id, width, height)方法。 并提供setSelect(id, index)进行某选项的选中，以及其他一些方法，全部功能至少同时兼容IE和FireFox。 因为当初写的比较随意，代码全部完成后，发现性能相当低下。大约出生日期这样的3个下拉框需要几百毫米的时间。 整优化过程我分3次进行 第一步 优化的技巧之一就是优先优化循环体，我把循环体内的不良做法优化，例如 for(var i=0;i<sel.options.length;i++) －－》 for(var i=0,j=a.length;i<j;i++)
－－》 a[i].value; 本步产生代码initSelect2，祥见包内的s.js,下同 第二步 通过上面一个很小的改动，可以节省一些时间了，但是不会有什么大的改观，离我们优化要达到的目标相去甚远。那么现在静下来想一下，应该修改一下逻辑了 由于我们initSelect采用的方式是通过createElement创建TR，然后添加到table的rows集合中，由于创建和解析html都需要时间，所以效率较差，下面我们改良为数组方式 var arr = new Array(a.length); 这样DOM只需解析一次HTML，取得了很好的效果，速度提高了3倍，从300ms降到几十毫秒。 本步产生代码initSelect3 第三步 那么还可以进一步优化吗，答案是肯定的。我们前两步的重点是循环体，现在该着眼大局了，由于整个方法体内仍然多次使用了innerHTML，这是一 个非常慢的操作，微软非常推荐使用innerText来尽可能代替innerHTML，但是显然不适合此处。而且必须要指出的是innerText不属于 W3C标准，因而不被fireFox支持。 我前面的一些随便中的DHTML技巧里已经指出了insertAdjacentElement会比insertAdjacentHTML效果好，但 是这次我们决定抛弃insertAdjacentElement而使用insertAdjacentHTML，因为这样以来我们可以把HTML解析降低为 一次，所以我们把多个节点使用一个insertAdjacentHTML完成，而不是insertAdjacentElement配合多次 innerHTML赋值。采取这些调整以后，我们的代码再次得到提速，虽然效果不很明显，但是仍有超过10％的改善。 本步产生代码initSelect4 参考时间： 后记 其实这个方法在项目开发初期就有了，当时使用的是
|
网页加速
最新推荐文章于 2023-03-16 10:29:24 发布
扫一扫
1611
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
