1. 软市首页
  2. 行业观察

页加速

• 行业观察

页加速之图形处理篇

    在维护 站的过程用，可能遇到过这样的情况：辛辛苦苦做出来的页面，但图片过多， 页结构、表格结构复杂，程序冗长，使得加载速度很慢！ 页总是不能完全的展现在浏览者面前。

以后的几篇文章将 页减肥方面的一些经验介绍给大家，希望大家都来讨论，说说自己的观点！

1、合并图片

尽量把几个可能组合在一起的图片制作成一张图片，这是因为浏览器对 页中的每个图片都会做个别请求，也就是说如果 页中有5张图片，那么浏览器就会向WEB服务器提出5次请求，这必然会增加服务器的负担，从而使得速度变慢！当然大图片除外。

2、指定宽高

在 页中镶入图片的时候，一定注明高度和宽度，如：

这样，公用文件只需要下载一次，然后就进入缓冲区。等下次再次调用包含公用文件的HTML页面时，下载时间明显减少。

让样式表内容进入地下工作

CSS是HTML装扮器，一个漂亮的WEB页面不可能没有它。HTML页面中有多种引用CSS的方法，不同的方法导致的效率也不一样。通常，我们可以将定义于间的样式控制代码提取出来，保存到单独的.CSS文件中，然后在HTML页面中以标记或者@IMPORT标记的方式进行引用：

请注意2点：1、.CSS文件中无需包括

宝贵内存节省两法

尽量减少HTML页面占用的内存空间是加快页面下载速度的一个有效方法。在这方面，有2个需要注意的问题：

1、使用同一种脚本语言

HTML页面离不开脚本程序的支持，我们经常会在页面中嵌入多种脚本语言，比如JAVASCRIPT与VBSCRIPT。但是，不知你发觉没有：这样的混合使用减慢了页面的访问速度。原因在于：要解释并运行多种脚本代码，就必须在内存中装载多种脚本引擎。所以，请尽量在页面中使用同一种脚本语言编写代码。

2、巧用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代码时，我们一定都遇到过标记有头无尾的情况。比如：

有头无尾标记举例


  • 第一个
  • 第二个
  • 第三个

很明显，上面的代码中缺少三个结束标记。但是这并不妨碍它的正确执行。在HTML中，这样的标记还有一些，例如FRAME、IMG和P。

可是请不要偷懒，请将结束标记写完整，这样做不仅使HTML代码格式规范，更可以加速页面的显示速度。因为INTERNET EXPLORER将不会花费时间判断和计算段落或者列表项目在哪里结束。

有头有尾标记举例



  • 第一个

  • 第二个

  • 第三个

OK，以上列举了有关加速HTML页面的10个处理技巧，描述这些很简单，但是只有真正领会并掌握其中的本质，并且举一反三，才会编写出更快、更好的程序

数据加载采用异步，这样在页面加载的过程中，还会通知服务器处理，直到处理结束通知页面更新。

 

DHTML性能提高的其他技巧

DHTML性能提高的其他技巧
Truly 译

More Performance Tips（英文）
http://msdn.microsoft.com/library/default.asprl=/library/en-us/dndude/html/dude100499.asp

DHTML性能提高的其他技巧

在微软开发过程的最重要的事情之一就是为产品进行调优。
多数开发人员把性能调优看作是某个功能的审查部分之一。如何为Win32程序调优进行了很多年，有大量的文献可以参考。

令许多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属性加了另一个引用，因此这个改动相对小。

代码中增加了该行：
var theBody = document.body;

并且将行：
document.body.insertBefore(tbl, null);

调整为：
theBody.insertBefore(tbl, null);

 

查看示例2

上面的调整并没有影响到整个的时间，仅仅节省了3ms加载时间。然而，如果我们把这段代码引入到主循环中，结果将会变得极具意义。

接下来我打算做的是把document对象本身也缓存起来。由于document对象被引用了3002次在这个示例中。
下面是将document缓存到局部变量后的版本，所有其它的引用也指向了局部变量：



查看示例3

这个版本的页面加载只需要2100ms。这样以来，我们将应用程序的整个运行时间减少了10％，并且很有实际意义。获取一个document变量比局部变量大约多花费4ms时间。

一个是否常用的document加载速度的优化是为

 

查看示例4

页面加载时间降为2043ms了。相对基线页有12％的提升，相对前一版本有2.5%的提升。

接下来要改进的更有意义，但是有一点棘手。当创建element并添加到节点树，并将它们添加到主document上更有效率－－不是把它们添加给一个大的子树，然后将这个子树添加到document上。例如，如果我们打算创建一个新的表格行row，并带有一个含有文本的单元格cell，我将这么做：
create


create
create TextNode
insert TextNode into
insert into
insert into TBODY

但是上面的方法会比下面的慢：
create


create
create TextNode
insert into TBODY
insert into
insert TextNode into

前面的示例都使用了第一个方法，示例5将会使用上面第二个方法，完整代码如下：





 

查看示例5

示例5仅需1649ms。比上个版本要快25％，并且比基线页快了几乎30％。

下一步要调整的是修改table使用fixed-table布局(layout)。指定了fixed-table布局后的表格的列宽使用

标签设置，或者，如果没有

标签，每个单元格的空间从行平分。fixed-table布局样式将改善table的性能，因为每个单元格的内容的尺寸不需要进行计算了。这是一个非常实用的性能改善方法，特别是那些有很多列的大型表格。

这个操作也可以通过简单增加css样式实现：

tbl.style.tableLayout = “fixed”;

查看示例6

然而，由于本示例只有一个单元格，所以这个改动只带来1.6%的性能提升。这个提示会随着table的单元格数量增加而增加。

最后的2个示例包括调整给单元格赋值的方式。在所有的示例中，创建了一个TextNode，并添加给TD。而示例7，将使用inerText代替插入一个text节点，代码调整为：

td.innerText = “Text”;

（译者：innerText只在IE中受支持，属于IE扩展，兼容FireFox可使用innerHTML）

查看示例7

令人惊奇的是，这个改动有显著效果－－比上次快了9％，总提升36％。这样以来我们的最终测试以1473ms代替了基线页的2323ms。

目前位置，几乎所有人都知道使用element.innerHTML是很慢，很慢，很慢的。想知道有多慢，我最后放了一个使用innerHTML代替innerText来为单元格添加文本的示例。这个调整击跨了性能，总时间变成3375ms，比上个版本差了80％！。这个变化比基线页还差45％。很明显，innerHTML是相当昂贵的。

你可以查看所有的测试结果，显示了演练和平均值。

调优HTML页面跟调优Win32应用程序一样，你必须知道哪里慢下来了，而哪里比较快。希望这些技巧可以帮助你加速你的页面。

 

实战DHTML性能优化，改善自定义下拉框控件
点击这里下载源码

并提供setSelect(id, index)进行某选项的选中，以及其他一些方法，全部功能至少同时兼容IE和FireFox。

因为当初写的比较随意，代码全部完成后，发现性能相当低下。大约出生日期这样的3个下拉框需要几百毫米的时间。

整优化过程我分3次进行

第一步

优化的技巧之一就是优先优化循环体，我把循环体内的不良做法优化，例如

for(var i=0;i

－－》

for(var i=0,j=a.length;i

sel.options[i].value;

－－》

a[i].value;

本步产生代码initSelect2，祥见包内的s.js,下同

第二步

通过上面一个很小的改动，可以节省一些时间了，但是不会有什么大的改观，离我们优化要达到的目标相去甚远。那么现在静下来想一下，应该修改一下逻辑了

由于我们initSelect采用的方式是通过createElement创建TR，然后添加到table的rows集合中，由于创建和解析html都需要时间，所以效率较差，下面我们改良为数组方式

var arr = new Array(a.length);
for (var i=0,j=a.length;i{
arr[i] = “

” + a[i].text + “

“;
}
oCell.innerHTML = “/
     

/
      ” + arr.join() + “

/
     

/
     “;

这样DOM只需解析一次HTML，取得了很好的效果，速度提高了3倍，从300ms降到几十毫秒。

本步产生代码initSelect3

第三步

那么还可以进一步优化吗，答案是肯定的。我们前两步的重点是循环体，现在该着眼大局了，由于整个方法体内仍然多次使用了innerHTML，这是一个非常慢的操作，微软非常推荐使用innerText来尽可能代替innerHTML，但是显然不适合此处。而且必须要指出的是innerText不属于W3C标准，因而不被fireFox支持。

我前面的一些随便中的DHTML技巧里已经指出了insertAdjacentElement会比insertAdjacentHTML效果好，但是这次我们决定抛弃insertAdjacentElement而使用insertAdjacentHTML，因为这样以来我们可以把HTML解析降低为一次，所以我们把多个节点使用一个insertAdjacentHTML完成，而不是insertAdjacentElement配合多次innerHTML赋值。采取这些调整以后，我们的代码再次得到提速，虽然效果不很明显，但是仍有超过10％的改善。

本步产生代码initSelect4

参考时间：
initSelect 313
initSelect2 297
initSelect3 140
initSelect4 94

后记

其实这个方法在项目开发初期就有了，当时使用的是
for(var i=0;i{
td.innerHTML += “

” + sel.options[i].text + “

“;
}
结果当时一个50项的select在我的3g cpu上竟然需要500ms以上的加载时间，这次调优，我重写了该方法，并分步进行了优化，希望能给DHTML开发者们带来一些启示。

如果诸位需要使用这个自定义下拉框，只需select.js和s.css，而优化演示请看demo1中的文件（代码不完整，只做演示)

转自：http://www.cnblogs.com/Truly/category/75432.html

声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！

上一篇 2010年3月7日
下一篇 2010年3月8日

相关推荐

首页
软件超市
企服市场
会员中心